/* ═══════════════════════════════════════════════════════════════════
   ALADDIN Design Tokens v1.0 — 3-layer architecture
   Layer 1: Primitive  — raw values, no semantic meaning
   Layer 2: Semantic   — intent-named, theme-switchable
   Layer 3: Component  — thin, component-specific aliases
   ═══════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────
   LAYER 1 — PRIMITIVE TOKENS
   Raw values. Never use directly in components.
   Use semantic tokens (--theme-*, --color-*) instead.
   ────────────────────────────────────────────── */
:root {
  /* Gold palette */
  --_gold-300: #e5c97a;
  --_gold-300: oklch(83% 0.12 88);
  --_gold-400: #d4b05a;
  --_gold-400: oklch(77% 0.13 85);
  --_gold-500: #c9a84c;
  --_gold-500: oklch(72% 0.14 82);
  --_gold-600: #b8943a;
  --_gold-600: oklch(65% 0.14 80);
  --_gold-700: #9e7c28;
  --_gold-700: oklch(56% 0.13 77);

  /* Navy / dark surface palette */
  --_navy-950: #060810;
  --_navy-950: oklch(9% 0.02 260);
  --_navy-900: #0a0e1a;
  --_navy-900: oklch(12% 0.025 262);
  --_navy-800: #0e1224;
  --_navy-800: oklch(15% 0.028 260);
  --_navy-700: #12162a;
  --_navy-700: oklch(18% 0.03 258);
  --_navy-600: #181d32;
  --_navy-600: oklch(22% 0.035 256);
  --_navy-500: #1e2540;
  --_navy-500: oklch(27% 0.04 255);

  /* Slate / text palette */
  --_slate-50:  #f5f5f7;
  --_slate-50:  oklch(96% 0.003 255);
  --_slate-100: #e8e9f0;
  --_slate-100: oklch(92% 0.008 258);
  --_slate-300: #c0c4d4;
  --_slate-300: oklch(80% 0.015 258);
  --_slate-400: #a0a8c4;
  --_slate-400: oklch(70% 0.02 258);
  --_slate-500: #808ab0;
  --_slate-500: oklch(60% 0.025 258);
  --_slate-600: #6e7694;
  --_slate-600: oklch(52% 0.025 260);
  --_slate-700: #4a5070;
  --_slate-700: oklch(38% 0.025 260);

  /* Accent / indigo palette (matches existing --accent in style.css) */
  --_indigo-400: #7282ff;
  --_indigo-400: oklch(68% 0.19 272);
  --_indigo-500: #5b6ef5;
  --_indigo-500: oklch(62% 0.18 272);
  --_indigo-600: #4858e0;
  --_indigo-600: oklch(55% 0.18 272);

  /* Semantic colors — state */
  --_green-500: #22c55e;
  --_green-500: oklch(72% 0.19 145);
  --_red-500: #ef4444;
  --_red-500: oklch(62% 0.22 26);
  --_amber-500: #f59e0b;
  --_amber-500: oklch(78% 0.18 75);

  /* White / transparent primitives */
  --_white: #ffffff;
  --_white-08: rgba(255, 255, 255, 0.08);
  --_white-12: rgba(255, 255, 255, 0.12);
  --_white-16: rgba(255, 255, 255, 0.16);
  --_white-20: rgba(255, 255, 255, 0.20);
  --_white-40: rgba(255, 255, 255, 0.40);
  --_white-55: rgba(255, 255, 255, 0.55);
  --_white-70: rgba(255, 255, 255, 0.70);
  --_white-90: rgba(255, 255, 255, 0.90);
  --_black-85: rgba(0, 0, 0, 0.85);
}


/* ──────────────────────────────────────────────
   LAYER 2 — SEMANTIC TOKENS (dark theme default)
   Theme-aware. Use these in components.
   Light-mode overrides in @media block below.
   ────────────────────────────────────────────── */
:root {
  /* === Theme surface colors === */
  --theme-bg:            var(--_navy-900);
  --theme-surface:       var(--_navy-800);
  --theme-surface-2:     var(--_navy-700);
  --theme-surface-3:     var(--_navy-600);
  --theme-surface-elevated: var(--_navy-600);

  /* === Theme text colors === */
  --theme-fg:            var(--_slate-50);
  --theme-fg-secondary:  var(--_slate-400);
  --theme-fg-muted:      var(--_slate-600);
  --theme-fg-dim:        var(--_slate-700);

  /* === Theme border colors === */
  --theme-border:        var(--_white-08);
  --theme-border-hover:  var(--_white-16);
  --theme-border-accent: rgba(91, 110, 245, 0.35);

  /* === Theme accent === */
  --theme-accent:        var(--_indigo-500);
  --theme-accent-hover:  var(--_indigo-400);
  --theme-accent-dim:    rgba(91, 110, 245, 0.15);
  --theme-accent-glow:   rgba(91, 110, 245, 0.25);

  /* === Semantic state colors === */
  --color-success:       var(--_green-500);
  --color-success-dim:   rgba(34, 197, 94, 0.12);
  --color-danger:        var(--_red-500);
  --color-danger-dim:    rgba(239, 68, 68, 0.12);
  --color-warning:       var(--_amber-500);

  /* === Overlay === */
  --theme-overlay:       rgba(0, 0, 0, 0.85);
  --theme-overlay-blur:  blur(12px);

  /* === Typography tokens === */
  --font-sans:   'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:  'Playfair Display Variable', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-mono:   'JetBrains Mono Variable', 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* Fluid type scale — mobile-first, works at 320px viewport */
  /* Formula: clamp(min, preferred-vw-based, max) */
  --text-hero:    clamp(2.5rem, 2rem + 2.5vw, 5rem);      /* H1 hero — ~40px → 80px */
  --text-h1:      clamp(2rem, 1.5rem + 2vw, 3.5rem);       /* ~32px → 56px */
  --text-h2:      clamp(1.5rem, 1.25rem + 1.25vw, 2.5rem); /* ~24px → 40px */
  --text-h3:      clamp(1.25rem, 1.125rem + 0.625vw, 1.75rem); /* ~20px → 28px */
  --text-h4:      clamp(1.125rem, 1rem + 0.5vw, 1.375rem); /* ~18px → 22px */
  --text-body:    clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* ~16px → 18px */
  --text-caption: 0.875rem;  /* 14px — fixed (no fluid needed at this size) */
  --text-eyebrow: 0.75rem;   /* 12px — uppercase labels, fixed */

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-loose:  1.75;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-widest:  0.1em;

  /* === Spacing scale (4px base) === */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* === Radius scale === */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* === Shadow / elevation scale === */
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 6px rgba(0, 0, 0, 0.35);
  --shadow-md:   0 2px 8px rgba(0, 0, 0, 0.6), 0 6px 24px rgba(0, 0, 0, 0.4),
                 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.7), 0 20px 60px rgba(0, 0, 0, 0.5),
                 0 0 0 1px rgba(255, 255, 255, 0.07);
  --shadow-glow: 0 0 40px rgba(91, 110, 245, 0.2);
  --shadow-modal: 0 30px 80px rgba(0, 0, 0, 0.9);

  /* === Motion tokens === */
  --motion-fast:   150ms;
  --motion-base:   250ms;
  --motion-slow:   450ms;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);   /* spring — fast out, smooth settle */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* smooth symmetric */
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);       /* accelerate */

  /* === Z-index scale === */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  500;
  --z-modal:    1000;
  --z-toast:    2000;
  --z-tooltip:  3000;
}


/* ──────────────────────────────────────────────
   LIGHT MODE OVERRIDES
   Only --theme-* tokens change; primitives stay.
   The current design is dark-first — light mode
   provides an accessible alternative.
   ────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root {
    --theme-bg:               #f8f8fc;
    --theme-surface:          #ffffff;
    --theme-surface-2:        #f0f0f8;
    --theme-surface-3:        #e4e4f0;
    --theme-surface-elevated: #ffffff;

    --theme-fg:               #0a0e1a;
    --theme-fg-secondary:     #3a3d5c;
    --theme-fg-muted:         #6e7694;
    --theme-fg-dim:           #a0a8c4;

    --theme-border:           rgba(10, 14, 26, 0.1);
    --theme-border-hover:     rgba(10, 14, 26, 0.2);
    --theme-border-accent:    rgba(91, 110, 245, 0.4);

    --theme-accent:           var(--_indigo-600);
    --theme-accent-hover:     var(--_indigo-500);
    --theme-accent-dim:       rgba(72, 88, 224, 0.1);
    --theme-accent-glow:      rgba(72, 88, 224, 0.2);

    --theme-overlay:          rgba(0, 0, 0, 0.5);
    --shadow-modal:           0 20px 60px rgba(0, 0, 0, 0.3);
  }
}


/* ──────────────────────────────────────────────
   REDUCED MOTION — collapse all durations to 1ms
   All CSS transitions and animations should use
   var(--motion-*) tokens so this works globally.
   ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast:   1ms;
    --motion-base:   1ms;
    --motion-slow:   1ms;
  }
}


/* ──────────────────────────────────────────────
   LAYER 3 — COMPONENT TOKENS
   Thin aliases for specific components.
   Add more here as components are built in
   Phases 6-10.
   ────────────────────────────────────────────── */
:root {
  /* Button primary */
  --btn-primary-bg:      var(--theme-accent);
  --btn-primary-bg-hover: var(--theme-accent-hover);
  --btn-primary-fg:      var(--_white);

  /* Install modal (used in 02-03) */
  --modal-bg:            #0d0d10;
  --modal-border:        var(--_white-12);
  --modal-header-bg:     linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, #1e3a8a 100%);
  --modal-radius:        var(--radius-xl);
  --modal-shadow:        var(--shadow-modal);
  --modal-step-bg:       rgba(37, 99, 235, 0.08);
  --modal-step-border:   rgba(37, 99, 235, 0.2);
  --modal-step-radius:   11px;

  /* Nav */
  --nav-h: 64px;

  /* Layout */
  --layout-max-w: 1200px;
}