/* ============================================================================
   Voyager Design System — tokens.css
   Production design tokens. Consumer layers (child themes, plugins, portal,
   Tailwind) MUST reference these via var() — no hardcoded hex / px / rem
   / font-family strings in consumer code.

   Brand direction: tech-futurist. Deep indigo hull, magenta signal,
   violet + cyan support channels, instrumentation discipline.
   ========================================================================== */

:root {
  /* ==========================================================================
     COLOR — primitive scales (step-wise, never single values)
     ========================================================================== */

  /* Indigo hull — cool, violet-tinted dark surfaces */
  --color-indigo-50:  #E8E5F5;
  --color-indigo-100: #C9C3E3;
  --color-indigo-200: #9A92C2;
  --color-indigo-300: #6A5F9E;
  --color-indigo-400: #463E75;
  --color-indigo-500: #342D5A;
  --color-indigo-600: #272248;
  --color-indigo-700: #1C183B;
  --color-indigo-800: #15122F;
  --color-indigo-900: #0E0C24;
  --color-indigo-950: #08071A;

  /* Bone readout — cool off-whites, slight cyan bias */
  --color-bone-50:  #F4F2FA;
  --color-bone-100: #E6E3F2;
  --color-bone-200: #C7C3DA;
  --color-bone-300: #938EAE;
  --color-bone-400: #625E7C;
  --color-bone-500: #3A3558;

  /* Slate neutrals — light surfaces, print, documentation */
  --color-slate-50:  #FAF9FD;
  --color-slate-100: #F1EFF7;
  --color-slate-200: #E2DFED;
  --color-slate-300: #CBC7DD;
  --color-slate-400: #9A94B4;
  --color-slate-500: #635E82;
  --color-slate-600: #3A3558;
  --color-slate-700: #201C3A;

  /* Magenta — primary brand accent */
  --color-magenta-50:  #FFF0F6;
  --color-magenta-100: #FFD6E8;
  --color-magenta-200: #FFB3D4;
  --color-magenta-300: #FF7AB8;
  --color-magenta-400: #E6317A;  /* bright — data pips, icons on dark */
  --color-magenta-500: #9B1750;  /* primary — buttons, active states */
  --color-magenta-600: #7C0F3F;  /* hover / pressed */
  --color-magenta-700: #5C082D;  /* deepest / borders on light */
  --color-magenta-800: #3F0520;
  --color-magenta-900: #24020F;

  /* Violet — secondary brand accent */
  --color-violet-50:  #F3EEFF;
  --color-violet-100: #E4D7FF;
  --color-violet-200: #C4A6FF;
  --color-violet-300: #A37BFF;
  --color-violet-400: #8B5CF6;
  --color-violet-500: #7238DD;
  --color-violet-600: #5B2FBA;
  --color-violet-700: #442288;
  --color-violet-800: #2D1758;
  --color-violet-900: #170B2E;

  /* Cyan — data / links / navigational affordance */
  --color-cyan-50:  #E6FAFF;
  --color-cyan-100: #C0F0FF;
  --color-cyan-200: #93E5FF;
  --color-cyan-300: #5CD4F6;
  --color-cyan-400: #22B8F0;
  --color-cyan-500: #1595C5;
  --color-cyan-600: #0F7FAD;
  --color-cyan-700: #0A5F82;

  /* Amber — warnings + highlighted data only */
  --color-amber-100: #FFEBCC;
  --color-amber-300: #FFD08A;
  --color-amber-500: #F59E24;
  --color-amber-700: #A8630C;

  /* Green — success only */
  --color-green-300: #7CE2A8;
  --color-green-500: #2BC678;
  --color-green-700: #148247;

  /* Red — critical alerts only */
  --color-red-300: #FF9AAE;
  --color-red-500: #FF4D6D;
  --color-red-700: #B31F3D;

  /* ==========================================================================
     COLOR — semantic aliases (dark surface default)
     Consumers reference SEMANTIC tokens; never reach for primitives
     except when defining a new semantic alias.
     ========================================================================== */
  --bg-canvas:        var(--color-indigo-950);
  --bg-panel:         var(--color-indigo-900);
  --bg-raised:        var(--color-indigo-800);
  --bg-inset:         var(--color-indigo-700);
  --bg-scrim:         rgba(8, 7, 26, 0.72);

  --fg-1:             var(--color-bone-50);   /* high-emphasis / headings */
  --fg-2:             var(--color-bone-100);  /* body */
  --fg-3:             var(--color-bone-200);  /* secondary */
  --fg-4:             var(--color-bone-300);  /* labels / metadata */
  --fg-5:             var(--color-bone-400);  /* disabled / tertiary */

  --border-hair:      var(--color-indigo-600);
  --border-1:         var(--color-indigo-500);
  --border-strong:    var(--color-indigo-400);

  --accent:           var(--color-magenta-500);
  --accent-strong:    var(--color-magenta-600);
  --accent-bright:    var(--color-magenta-400);
  --accent-soft:      rgba(155, 23, 80, 0.20);
  --accent-fg-on:     #FFFFFF;

  --accent-2:         var(--color-violet-400);
  --accent-2-strong:  var(--color-violet-500);
  --accent-2-soft:    rgba(139, 92, 246, 0.16);

  --link:             var(--color-cyan-400);
  --link-hover:       var(--color-cyan-300);
  --link-soft:        rgba(34, 184, 240, 0.14);

  --warn:             var(--color-amber-500);
  --warn-soft:        rgba(245, 158, 36, 0.14);

  --success:          var(--color-green-500);
  --success-soft:     rgba(43, 198, 120, 0.14);

  --critical:         var(--color-red-500);
  --critical-soft:    rgba(255, 77, 109, 0.14);

  --info:             var(--color-cyan-400);
  --info-soft:        var(--link-soft);

  --focus-ring:       var(--color-magenta-400);

  /* ==========================================================================
     TYPOGRAPHY
     ========================================================================== */
  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', monospace;

  /* Type scale — 12 steps, fluid where noted */
  --fs-micro: 10px;   /* UPPERCASE MONO LABELS */
  --fs-label: 12px;
  --fs-sm:    13px;
  --fs-base:  15px;
  --fs-md:    17px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   32px;
  --fs-3xl:   44px;
  --fs-4xl:   60px;
  --fs-5xl:   84px;
  --fs-6xl:   120px;

  /* Fluid variants — preferred for responsive display type */
  --fs-fluid-h1: clamp(40px, 5vw + 16px, 84px);
  --fs-fluid-h2: clamp(32px, 3.5vw + 12px, 60px);
  --fs-fluid-h3: clamp(26px, 2vw + 10px, 44px);
  --fs-fluid-display: clamp(56px, 8vw + 8px, 120px);

  /* Line heights */
  --lh-tight:   1.08;
  --lh-snug:    1.24;
  --lh-body:    1.55;
  --lh-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-mono:   0.08em;

  /* Font weights (semantic) */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ==========================================================================
     SPACING — 4pt grid
     ========================================================================== */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;
  --sp-11: 160px;

  /* ==========================================================================
     RADII — sharp discipline. No arbitrary mid-range values.
     ========================================================================== */
  --r-0:    0;
  --r-1:    2px;
  --r-2:    4px;
  --r-3:    6px;
  --r-pill: 999px;

  /* ==========================================================================
     BORDERS
     ========================================================================== */
  --bw-hair: 1px;
  --bw-1:    1px;
  --bw-2:    2px;

  /* ==========================================================================
     SHADOWS — exactly three. Card = none.
     ========================================================================== */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35);

  /* ==========================================================================
     MOTION — precise, brief, never bouncy
     ========================================================================== */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;

  /* ==========================================================================
     GRID
     ========================================================================== */
  --grid-max:      1280px;
  --grid-gutter:   24px;
  --grid-dot-size: 32px;
  --grid-dot-color: rgba(196, 166, 255, 0.07);

  /* ==========================================================================
     Z-INDEX ladder
     ========================================================================== */
  --z-base:     0;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;
}

/* ============================================================================
   LIGHT surface inversion
   ============================================================================ */
[data-surface="light"] {
  --bg-canvas:     var(--color-slate-50);
  --bg-panel:      #FFFFFF;
  --bg-raised:     #FFFFFF;
  --bg-inset:      var(--color-slate-100);
  --bg-scrim:      rgba(32, 28, 58, 0.40);

  --fg-1: var(--color-indigo-950);
  --fg-2: var(--color-slate-700);
  --fg-3: var(--color-slate-600);
  --fg-4: var(--color-slate-500);
  --fg-5: var(--color-slate-400);

  --border-hair:   var(--color-slate-200);
  --border-1:      var(--color-slate-300);
  --border-strong: var(--color-slate-400);

  --accent:        var(--color-magenta-600);
  --accent-strong: var(--color-magenta-700);
  --accent-bright: var(--color-magenta-500);
  --accent-soft:   rgba(124, 15, 63, 0.10);
  --accent-fg-on:  #FFFFFF;
}

/* ============================================================================
   MOTION — reduced-motion override
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur-base: 0.01ms;
    --dur-slow: 0.01ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track, .marquee-content,
  [class*="cursor-"], [class*="parallax-"] {
    transform: none !important;
    animation: none !important;
  }
  [data-motion="none"] * {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================================================
   Focus-visible baseline (consumers may override ring offset, not ring width)
   ============================================================================ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--bw-2) solid var(--focus-ring);
  outline-offset: 2px;
}