/**
 * UFOMYST design tokens — "Signal Night" + "Signal Day"
 * Brand: UFOMYST (ufomyst.com) — from Latin mysterium, "that which remains unexplained".
 * Palette: deep void + teal signal + violet anomaly.
 *
 * Theme model (Roy 2026-07):
 *   DEFAULT = light  (long-form reading + AdSense)
 *   dark via [data-theme="dark"] + header toggle (1 click)
 *   Globe section is a fixed dark immersion island in both themes.
 *
 * Wordmark: UFO → signal teal · MYST → anomaly violet
 * Prefix --uf- kept short; product name is UFOMYST.
 */

/* ================================================================== */
/* Raw palette — never reassigned by theme (globe / effects need them) */
/* ================================================================== */
:root {
  /* Brand meta */
  --uf-brand-name: "UFOMYST";
  --uf-brand-domain: "ufomyst.com";
  --uf-brand-tagline: "from the Latin mysterium — that which remains unexplained";
  --uf-brand-wordmark-tracking: 0.08em;
  --uf-brand-wordmark-tracking-mono: 0.22em;

  /* Void scale (dark surfaces / globe island) */
  --uf-void-950: #05060a;
  --uf-void-900: #0a0c12;
  --uf-void-850: #0f1219;
  --uf-void-800: #151922;
  --uf-void-700: #1c2230;
  --uf-void-600: #2a3344;

  /* Teal signal */
  --uf-teal-50:  #e6fffb;
  --uf-teal-100: #b3fff3;
  --uf-teal-200: #7aefe0;
  --uf-teal-300: #3dd9c8;
  --uf-teal-400: #14c4b5;
  --uf-teal-500: #0aa896;
  --uf-teal-600: #088f80;
  --uf-teal-700: #0f766e; /* AA on white (~5.5:1) — light-mode primary text */
  --uf-teal-800: #055a51;
  --uf-teal-900: #033d37;

  /* Violet anomaly */
  --uf-violet-50:  #f3eeff;
  --uf-violet-100: #e0d4ff;
  --uf-violet-200: #c4a8ff;
  --uf-violet-300: #a67cff;
  --uf-violet-400: #8b5cf6;
  --uf-violet-500: #7c3aed;
  --uf-violet-600: #6d28d9; /* AA on white for small text */
  --uf-violet-700: #5b21b6;
  --uf-violet-800: #4c1d95;
  --uf-violet-900: #3b0764;

  /* Amber (case chips / warnings) */
  --uf-amber-300: #fcd34d;
  --uf-amber-400: #fbbf24;
  --uf-amber-500: #f59e0b;
  --uf-amber-600: #d97706;
  --uf-amber-700: #b45309; /* AA on white */

  /* Typography */
  --uf-font-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --uf-font-display: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
  --uf-font-mono: "IBM Plex Mono", "Cascadia Code", ui-monospace, monospace;

  --uf-fs-2xs: 0.6875rem;
  --uf-fs-xs:  0.75rem;
  --uf-fs-sm:  0.875rem;
  --uf-fs-md:  1rem;
  --uf-fs-lg:  1.125rem;
  --uf-fs-xl:  1.375rem;
  --uf-fs-2xl: 1.75rem;
  --uf-fs-3xl: 2.25rem;
  --uf-fs-4xl: 3rem;

  --uf-lh-tight: 1.2;
  --uf-lh-snug:  1.35;
  --uf-lh-body:  1.55;
  --uf-lh-loose: 1.7;

  --uf-fw-regular: 400;
  --uf-fw-medium:  500;
  --uf-fw-semibold: 600;
  --uf-fw-bold:    700;

  --uf-tracking-tight: -0.02em;
  --uf-tracking-wide:  0.06em;
  --uf-tracking-signal: 0.14em;

  /* Space / radius / motion */
  --uf-space-1: 0.25rem;
  --uf-space-2: 0.5rem;
  --uf-space-3: 0.75rem;
  --uf-space-4: 1rem;
  --uf-space-5: 1.5rem;
  --uf-space-6: 2rem;
  --uf-space-7: 3rem;
  --uf-space-8: 4rem;

  --uf-radius-sm: 6px;
  --uf-radius-md: 10px;
  --uf-radius-lg: 16px;
  --uf-radius-xl: 24px;
  --uf-radius-pill: 999px;

  --uf-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --uf-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --uf-dur-fast: 120ms;
  --uf-dur-med:  220ms;
  --uf-dur-slow: 400ms;

  --uf-container: 1120px;
  --uf-gutter: var(--uf-space-5);
}

/* ================================================================== */
/* LIGHT (default) — long-form + AdSense                               */
/* Surfaces: #fafbfd page · #fff panels · soft hairlines               */
/* Signal/anomaly text uses darker steps for WCAG AA on white          */
/* ================================================================== */
:root,
[data-theme="light"] {
  color-scheme: light;

  --uf-surface-0: #fafbfd;
  --uf-surface-1: #ffffff;
  --uf-surface-2: #f1f4f9;
  --uf-surface-3: #e6ebf3;
  --uf-surface-elevated: #ffffff;

  --uf-ink:        #0f172a;
  --uf-ink-muted:  #475569;
  --uf-ink-faint:  #64748b;
  --uf-ink-invert: #f8fafc;

  --uf-border:        color-mix(in srgb, #0f172a 9%, transparent);
  --uf-border-strong: color-mix(in srgb, #0f172a 16%, transparent);
  --uf-border-signal: color-mix(in srgb, var(--uf-teal-600) 42%, transparent);
  --uf-border-anomaly: color-mix(in srgb, var(--uf-violet-500) 40%, transparent);

  /* Semantic accent text (AA on light surfaces) */
  --uf-signal-fg:        var(--uf-teal-700);
  --uf-signal-fg-strong: var(--uf-teal-800);
  --uf-signal-fg-soft:   var(--uf-teal-600);
  --uf-anomaly-fg:       var(--uf-violet-600);
  --uf-anomaly-fg-strong: var(--uf-violet-700);
  --uf-amber-fg:         var(--uf-amber-700);

  /* Brand wordmark — dark-on-light */
  --uf-brand-ufo:  var(--uf-teal-700);
  --uf-brand-myst: var(--uf-violet-600);

  /* Aperture mark strokes (CSS-painted SVG) */
  --uf-mark-iris:      #0f172a;
  --uf-mark-ring-teal: var(--uf-teal-600);
  --uf-mark-ring-violet: var(--uf-violet-500);
  --uf-mark-iris-hl:   var(--uf-teal-400);
  --uf-mark-tick:      var(--uf-violet-500);
  --uf-mark-core:      var(--uf-teal-600);
  --uf-mark-core-hl:   var(--uf-teal-50);

  /* Fills / tints for chips, rows, chrome */
  --uf-fill-signal:  color-mix(in srgb, var(--uf-teal-100) 55%, #ffffff);
  --uf-fill-anomaly: color-mix(in srgb, var(--uf-violet-100) 55%, #ffffff);
  --uf-fill-amber:   color-mix(in srgb, var(--uf-amber-400) 14%, #ffffff);
  --uf-fill-hover:   color-mix(in srgb, var(--uf-teal-100) 40%, transparent);
  --uf-fill-active:  color-mix(in srgb, var(--uf-teal-100) 70%, #ffffff);
  --uf-fill-stat:    color-mix(in srgb, #ffffff 82%, var(--uf-teal-50));
  --uf-fill-stat-accent: color-mix(in srgb, var(--uf-violet-50) 80%, #ffffff);
  --uf-fill-wave:    color-mix(in srgb, var(--uf-violet-50) 70%, #ffffff);
  --uf-fill-rail-head: color-mix(in srgb, var(--uf-violet-50) 65%, #ffffff);

  /* Chrome (header / search / dropdowns) */
  --uf-header-bg:    color-mix(in srgb, #fafbfd 86%, transparent);
  --uf-search-bg:    #ffffff;
  --uf-dropdown-bg:  #ffffff;
  --uf-dropdown-item-hover: color-mix(in srgb, var(--uf-teal-50) 90%, var(--uf-teal-100));
  --uf-mobile-search-bg: color-mix(in srgb, #fafbfd 96%, transparent);

  --uf-success: #15803d;
  --uf-warning: var(--uf-amber-700);
  --uf-danger:  #dc2626;
  --uf-info:    var(--uf-teal-700);

  /* Soft glows — restrained on light */
  --uf-glow-teal:   0 0 20px color-mix(in srgb, var(--uf-teal-400) 18%, transparent);
  --uf-glow-violet: 0 0 22px color-mix(in srgb, var(--uf-violet-400) 16%, transparent);
  --uf-glow-soft:   0 6px 24px color-mix(in srgb, #0f172a 8%, transparent);

  --uf-grad-signal: linear-gradient(135deg, var(--uf-teal-500) 0%, var(--uf-violet-500) 100%);
  --uf-grad-hero: linear-gradient(
    160deg,
    color-mix(in srgb, #ffffff 70%, var(--uf-violet-100) 30%) 0%,
    #fafbfd 50%,
    color-mix(in srgb, #ffffff 75%, var(--uf-teal-50) 25%) 100%
  );
  --uf-grad-card: linear-gradient(
    180deg,
    #ffffff 0%,
    color-mix(in srgb, #ffffff 92%, var(--uf-teal-50) 8%) 100%
  );
  --uf-grad-rail: linear-gradient(
    90deg,
    transparent 0%,
    var(--uf-teal-500) 20%,
    var(--uf-violet-400) 80%,
    transparent 100%
  );
  --uf-grad-banner: linear-gradient(
    135deg,
    color-mix(in srgb, var(--uf-violet-50) 80%, #ffffff) 0%,
    #fafbfd 55%,
    color-mix(in srgb, var(--uf-teal-50) 75%, #ffffff) 100%
  );

  /* Atmosphere blobs on body */
  --uf-atmosphere-violet: color-mix(in srgb, var(--uf-violet-200) 35%, transparent);
  --uf-atmosphere-teal:   color-mix(in srgb, var(--uf-teal-200) 30%, transparent);

  /* Shape-chip tints — darker for AA on light chips */
  --uf-shape-light:    var(--uf-teal-700);
  --uf-shape-triangle: var(--uf-violet-600);
  --uf-shape-disk:     #0369a1;
  --uf-shape-fireball: #c2410c;
  --uf-shape-sphere:   #4f46e5;
  --uf-shape-other:    var(--uf-ink-muted);

  /* Theme-color meta helper */
  --uf-theme-color: #fafbfd;
}

/* ================================================================== */
/* DARK — original Signal Night identity                               */
/* ================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --uf-surface-0: var(--uf-void-950);
  --uf-surface-1: var(--uf-void-900);
  --uf-surface-2: var(--uf-void-850);
  --uf-surface-3: var(--uf-void-800);
  --uf-surface-elevated: color-mix(in srgb, var(--uf-void-800) 88%, var(--uf-teal-500) 12%);

  --uf-ink:        #e8ecf4;
  --uf-ink-muted:  #9aa3b5;
  --uf-ink-faint:  #6b7385;
  --uf-ink-invert: #0a0c12;

  --uf-border:        color-mix(in srgb, var(--uf-ink) 10%, transparent);
  --uf-border-strong: color-mix(in srgb, var(--uf-ink) 18%, transparent);
  --uf-border-signal: color-mix(in srgb, var(--uf-teal-400) 45%, transparent);
  --uf-border-anomaly: color-mix(in srgb, var(--uf-violet-400) 45%, transparent);

  --uf-signal-fg:        var(--uf-teal-300);
  --uf-signal-fg-strong: var(--uf-teal-200);
  --uf-signal-fg-soft:   var(--uf-teal-100);
  --uf-anomaly-fg:       var(--uf-violet-300);
  --uf-anomaly-fg-strong: var(--uf-violet-200);
  --uf-amber-fg:         var(--uf-amber-400);

  --uf-brand-ufo:  var(--uf-teal-400);
  --uf-brand-myst: var(--uf-violet-300);

  --uf-mark-iris:      var(--uf-void-950);
  --uf-mark-ring-teal: var(--uf-teal-400);
  --uf-mark-ring-violet: #a78bfa;
  --uf-mark-iris-hl:   var(--uf-teal-200);
  --uf-mark-tick:      var(--uf-violet-200);
  --uf-mark-core:      var(--uf-teal-400);
  --uf-mark-core-hl:   var(--uf-teal-50);

  --uf-fill-signal:  color-mix(in srgb, var(--uf-teal-900) 55%, var(--uf-void-850));
  --uf-fill-anomaly: color-mix(in srgb, var(--uf-violet-900) 55%, var(--uf-void-850));
  --uf-fill-amber:   color-mix(in srgb, var(--uf-amber-400) 14%, transparent);
  --uf-fill-hover:   color-mix(in srgb, var(--uf-teal-900) 28%, transparent);
  --uf-fill-active:  color-mix(in srgb, var(--uf-teal-700) 40%, var(--uf-void-850));
  --uf-fill-stat:    color-mix(in srgb, var(--uf-void-900) 70%, transparent);
  --uf-fill-stat-accent: color-mix(in srgb, var(--uf-violet-900) 35%, var(--uf-void-900));
  --uf-fill-wave:    color-mix(in srgb, var(--uf-violet-900) 22%, var(--uf-void-900));
  --uf-fill-rail-head: color-mix(in srgb, var(--uf-void-800) 70%, var(--uf-violet-900) 30%);

  --uf-header-bg:    color-mix(in srgb, var(--uf-void-950) 88%, transparent);
  --uf-search-bg:    color-mix(in srgb, var(--uf-void-900) 92%, var(--uf-teal-900) 8%);
  --uf-dropdown-bg:  color-mix(in srgb, var(--uf-void-900) 96%, transparent);
  --uf-dropdown-item-hover: color-mix(in srgb, var(--uf-void-800) 80%, var(--uf-teal-800) 20%);
  --uf-mobile-search-bg: color-mix(in srgb, var(--uf-void-950) 96%, transparent);

  --uf-success: #22c55e;
  --uf-warning: var(--uf-amber-500);
  --uf-danger:  #ef4444;
  --uf-info:    var(--uf-teal-400);

  --uf-glow-teal:   0 0 24px color-mix(in srgb, var(--uf-teal-400) 35%, transparent);
  --uf-glow-violet: 0 0 28px color-mix(in srgb, var(--uf-violet-400) 40%, transparent);
  --uf-glow-soft:   0 8px 32px color-mix(in srgb, #000 55%, transparent);

  --uf-grad-signal: linear-gradient(135deg, var(--uf-teal-500) 0%, var(--uf-violet-500) 100%);
  --uf-grad-hero: linear-gradient(
    160deg,
    color-mix(in srgb, var(--uf-void-900) 70%, var(--uf-violet-900) 30%) 0%,
    var(--uf-void-950) 55%,
    color-mix(in srgb, var(--uf-void-900) 80%, var(--uf-teal-900) 20%) 100%
  );
  --uf-grad-card: linear-gradient(
    180deg,
    color-mix(in srgb, var(--uf-void-800) 92%, var(--uf-teal-700) 8%) 0%,
    var(--uf-void-850) 100%
  );
  --uf-grad-rail: linear-gradient(
    90deg,
    transparent 0%,
    var(--uf-teal-500) 20%,
    var(--uf-violet-400) 80%,
    transparent 100%
  );
  --uf-grad-banner: linear-gradient(
    135deg,
    color-mix(in srgb, var(--uf-violet-900) 40%, var(--uf-void-900)) 0%,
    var(--uf-void-950) 55%,
    color-mix(in srgb, var(--uf-teal-900) 30%, var(--uf-void-900)) 100%
  );

  --uf-atmosphere-violet: color-mix(in srgb, var(--uf-violet-700) 28%, transparent);
  --uf-atmosphere-teal:   color-mix(in srgb, var(--uf-teal-700) 22%, transparent);

  --uf-shape-light:    var(--uf-teal-300);
  --uf-shape-triangle: var(--uf-violet-300);
  --uf-shape-disk:     #7dd3fc;
  --uf-shape-fireball: #fb923c;
  --uf-shape-sphere:   #a5b4fc;
  --uf-shape-other:    var(--uf-ink-muted);

  --uf-theme-color: #05060a;
}

/* ================================================================== */
/* Base shell                                                          */
/* ================================================================== */
.uf-root {
  color: var(--uf-ink);
  background: var(--uf-surface-0);
  font-family: var(--uf-font-sans);
  font-size: var(--uf-fs-md);
  line-height: var(--uf-lh-body);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--uf-dur-med) var(--uf-ease-soft),
    color var(--uf-dur-med) var(--uf-ease-soft);
}

.uf-root *,
.uf-root *::before,
.uf-root *::after {
  box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* Wordmark — UFOMYST (Aperture mark + dual-tone text)                 */
/* ------------------------------------------------------------------ */
.uf-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
  font-family: var(--uf-font-display);
  font-size: var(--uf-fs-xl);
  font-weight: var(--uf-fw-bold);
  letter-spacing: var(--uf-brand-wordmark-tracking);
  line-height: 1;
  text-decoration: none;
  color: inherit;
  user-select: none;
}

.uf-wordmark__mark {
  flex-shrink: 0;
  width: 1.05em;
  height: 1.05em;
  display: block;
}

.uf-wordmark__text {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}

.uf-wordmark__ufo {
  color: var(--uf-brand-ufo);
  font-weight: var(--uf-fw-bold);
  letter-spacing: var(--uf-tracking-tight);
}

.uf-wordmark__myst {
  color: var(--uf-brand-myst);
  font-weight: var(--uf-fw-semibold);
  letter-spacing: 0.04em;
}

.uf-wordmark--lg {
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: 0.1em;
  gap: 0.38em;
}

.uf-wordmark--lg .uf-wordmark__mark {
  width: 0.95em;
  height: 0.95em;
}

.uf-wordmark--lg .uf-wordmark__ufo {
  letter-spacing: -0.03em;
}

.uf-wordmark--lg .uf-wordmark__myst {
  letter-spacing: 0.06em;
}

.uf-wordmark--sm {
  font-size: var(--uf-fs-md);
  letter-spacing: 0.06em;
  gap: 0.4em;
}

.uf-wordmark--sm .uf-wordmark__mark {
  width: 1.15em;
  height: 1.15em;
}

.uf-wordmark--mono {
  font-family: var(--uf-font-mono);
  font-weight: var(--uf-fw-medium);
  font-size: var(--uf-fs-sm);
  letter-spacing: var(--uf-brand-wordmark-tracking-mono);
  text-transform: uppercase;
  gap: 0.45em;
}

.uf-wordmark--mono .uf-wordmark__mark {
  width: 1.2em;
  height: 1.2em;
}

.uf-wordmark--mono .uf-wordmark__ufo,
.uf-wordmark--mono .uf-wordmark__myst {
  letter-spacing: inherit;
  font-weight: inherit;
}

.uf-wordmark--solid {
  background: var(--uf-grad-signal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.uf-wordmark--solid .uf-wordmark__ufo,
.uf-wordmark--solid .uf-wordmark__myst {
  color: inherit;
}

.uf-wordmark--solid .uf-wordmark__mark {
  -webkit-background-clip: initial;
  background-clip: initial;
  color: initial;
}

.uf-tagline {
  margin: 0;
  font-family: var(--uf-font-mono);
  font-size: var(--uf-fs-2xs);
  letter-spacing: var(--uf-tracking-wide);
  color: var(--uf-ink-faint);
  max-width: 48ch;
  line-height: var(--uf-lh-snug);
}

.uf-tagline em {
  font-style: normal;
  color: var(--uf-ink-muted);
}