/* ============================================================
   PRISM Design Token System
   ────────────────────────────────────────────────────────────
   Architecture: Primitive → Semantic → Component
   Inspired by: Linear (LCH indigo) + Raycast (glass + white CTA)
              + Vercel (border-not-shadow) + Resend (material feel)

   Aesthetic: "Cyberpunk Lightbox"
   — Near-black canvas with micro indigo tint (not pure #000)
   — Indigo #5E6AD2 as sole brand accent (Linear's signature)
   — White as primary CTA (brightest pixel on page)
   — Glassmorphism on chrome (sidebar/topbar/hero), solid on data
   — Single-color radial glows for atmosphere (never rainbow)
   — Hairline borders + subtle multi-layer shadows for depth
   — Inter (UI, ss03) + Geist Mono (code/metrics)
   — Purposeful motion with staggered cinematic reveals
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   1. PRIMITIVE TOKENS (raw values — never use directly)
   ────────────────────────────────────────────────────────── */
:root {
  /* —— Neutral scale (near-black with micro indigo tint) —— */
  --gray-0:    #08080c;
  --gray-10:   #0c0c12;
  --gray-20:   #101018;
  --gray-30:   #14141c;
  --gray-40:   #181822;
  --gray-50:   #1c1c28;
  --gray-60:   #20202c;
  --gray-70:   #242430;
  --gray-80:   #2a2a38;
  --gray-90:   #303040;
  --gray-100:  #383848;
  --gray-110:  #404052;
  --gray-120:  #4a4a5c;
  --gray-130:  #565668;
  --gray-140:  #626276;
  --gray-150:  #717178;
  --gray-160:  #8a8a96;
  --gray-170:  #a1a1ac;
  --gray-180:  #c4c4ce;
  --gray-190:  #d4d4dc;
  --gray-200:  #e4e4ea;
  --gray-210:  #f4f4f6;
  --gray-220:  #fcfcfe;

  /* —— Primary Accent: Indigo (Linear's signature #5E6AD2) —— */
  --indigo-100:  #0a0a18;
  --indigo-200:  #12122a;
  --indigo-300:  #1c1c42;
  --indigo-400:  #2d2d6a;
  --indigo-500:  #3d3d9a;
  --indigo-600:  #5e6ad2;   /* Linear primary */
  --indigo-700:  #7c8aef;   /* hover */
  --indigo-800:  #a0acff;   /* light */
  --indigo-900:  #c4ccff;   /* lightest */

  /* —— Secondary Accent: Cyan (for data viz / info) —— */
  --cyan-400:    #0e7490;
  --cyan-500:    #06b6d4;
  --cyan-600:    #22d3ee;
  --cyan-700:    #67e8f9;

  /* —— Status: Emerald (success) —— */
  --emerald-400: #059669;
  --emerald-500: #10b981;
  --emerald-600: #34d399;
  --emerald-700: #6ee7b7;

  /* —— Status: Amber (warning) —— */
  --amber-400:   #b45309;
  --amber-500:   #f59e0b;
  --amber-600:   #fbbf24;
  --amber-700:   #fcd34d;

  /* —— Status: Rose (danger) —— */
  --rose-400:    #be123c;
  --rose-500:    #f43f5e;
  --rose-600:    #fb7185;
  --rose-700:    #fda4af;

  /* —— White-alpha scale (hairline borders, text opacity, glass) —— */
  --white-3:     rgba(255,255,255,0.03);
  --white-4:     rgba(255,255,255,0.04);
  --white-5:     rgba(255,255,255,0.05);
  --white-6:     rgba(255,255,255,0.06);
  --white-8:     rgba(255,255,255,0.08);
  --white-10:    rgba(255,255,255,0.10);
  --white-12:    rgba(255,255,255,0.12);
  --white-14:    rgba(255,255,255,0.14);
  --white-16:    rgba(255,255,255,0.16);
  --white-20:    rgba(255,255,255,0.20);
  --white-24:    rgba(255,255,255,0.24);
  --white-30:    rgba(255,255,255,0.30);
  --white-40:    rgba(255,255,255,0.40);
  --white-50:    rgba(255,255,255,0.50);
  --white-60:    rgba(255,255,255,0.60);
  --white-70:    rgba(255,255,255,0.70);
  --white-80:    rgba(255,255,255,0.80);
  --white-86:    rgba(255,255,255,0.86);
  --white-90:    rgba(255,255,255,0.90);

  /* —— Indigo-alpha scale (glows, active states, glass tints) —— */
  --indigo-a3:   rgba(94,106,210,0.03);
  --indigo-a5:   rgba(94,106,210,0.05);
  --indigo-a8:   rgba(94,106,210,0.08);
  --indigo-a10:  rgba(94,106,210,0.10);
  --indigo-a12:  rgba(94,106,210,0.12);
  --indigo-a16:  rgba(94,106,210,0.16);
  --indigo-a20:  rgba(94,106,210,0.20);
  --indigo-a25:  rgba(94,106,210,0.25);
  --indigo-a30:  rgba(94,106,210,0.30);
  --indigo-a40:  rgba(94,106,210,0.40);

  /* —— Typographic primitives —— */
  --font-inter:    "Inter", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-geist:     "Geist Mono", "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas, monospace;

  /* —— Motion primitives (cinematic) —— */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-linear:   linear;
  --ease-expo:     cubic-bezier(0.16, 1, 0.3, 1);
}

/* ──────────────────────────────────────────────────────────
   2. SEMANTIC TOKENS (theme-aware — use these in components)
   ────────────────────────────────────────────────────────── */
:root {
  /* —— Canvas / Background layers (4-level surface staircase) —— */
  --bg-canvas:        var(--gray-0);         /* #08080c — page background (near-void, indigo tint) */
  --bg-deep:          var(--gray-10);        /* #0c0c12 — code windows, deepest wells */
  --bg-base:          var(--gray-20);        /* #101018 — base surface */
  --bg-elevated:      var(--gray-30);        /* #14141c — sidebar, raised areas */
  --bg-surface:       var(--gray-20);        /* #101018 — cards, panels */
  --bg-surface-2:     var(--gray-40);        /* #181822 — hover, nested */
  --bg-surface-3:     var(--gray-50);        /* #1c1c28 — active, pressed */
  --bg-sunken:        var(--gray-10);        /* #0c0c12 — inset, wells */
  --bg-glass:         rgba(20,20,28,0.60);   /* glass surface for chrome */
  --bg-glass-hover:   rgba(28,28,38,0.70);   /* glass hover */

  /* —— Borders (half-transparent white — Raycast/Vercel signature) —— */
  --border-subtle:    var(--white-6);        /* barely visible hairline */
  --border-default:   var(--white-8);        /* standard hairline */
  --border-strong:    var(--white-14);       /* emphasis hairline */
  --border-focus:     var(--indigo-600);     /* #5e6ad2 — focus ring */
  --border-glass:     var(--white-10);       /* glass edge */

  /* —— Text hierarchy (cool white, Linear ink scale) —— */
  --text-primary:     #fcfcfe;               /* headings, key content */
  --text-secondary:   var(--white-86);       /* body text */
  --text-tertiary:    var(--white-70);       /* descriptions, labels */
  --text-muted:       var(--gray-170);       /* #a1a1ac — muted */
  --text-disabled:    var(--gray-150);       /* #717178 — placeholders */
  --text-faint:       var(--gray-140);       /* #626276 — very dim */

  /* —— Primary Accent: Indigo (Linear #5E6AD2 — interactive states) —— */
  --accent:           var(--indigo-600);     /* #5e6ad2 */
  --accent-hover:     var(--indigo-700);     /* #7c8aef */
  --accent-active:    var(--indigo-500);
  --accent-faint:     var(--indigo-a5);
  --accent-subtle:    var(--indigo-a8);
  --accent-muted:     var(--indigo-a12);
  --accent-solid:     var(--indigo-a20);
  --accent-glow:      var(--indigo-a25);

  /* —— Primary CTA: White on near-black (Raycast's signature) —— */
  --cta-bg:           #fcfcfe;
  --cta-bg-hover:     #f4f4f6;
  --cta-bg-active:    #e4e4ea;
  --cta-text:         #08080c;
  --cta-text-hover:   #101018;

  /* —— Ambient glow (single-color radial, never rainbow) —— */
  --glow-indigo:      rgba(94,106,210,0.08);
  --glow-indigo-soft: rgba(94,106,210,0.04);
  --glow-cyan:        rgba(6,182,212,0.05);
  --glow-emerald:     rgba(16,185,129,0.06);
  --glow-amber:       rgba(245,158,11,0.06);
  --glow-rose:        rgba(244,63,94,0.06);

  /* —— Semantic: Status —— */
  --success:          var(--emerald-500);
  --success-bg:       rgba(16,185,129,0.08);
  --success-border:   rgba(16,185,129,0.22);
  --success-text:     var(--emerald-600);

  --warning:          var(--amber-500);
  --warning-bg:       rgba(245,158,11,0.08);
  --warning-border:   rgba(245,158,11,0.22);
  --warning-text:     var(--amber-600);

  --danger:           var(--rose-500);
  --danger-bg:        rgba(244,63,94,0.08);
  --danger-border:    rgba(244,63,94,0.22);
  --danger-text:      var(--rose-600);

  --info:             var(--cyan-500);
  --info-bg:          rgba(6,182,212,0.08);
  --info-border:      rgba(6,182,212,0.22);
  --info-text:        var(--cyan-600);

  /* —— Multi-layer shadow system (Raycast-inspired, subtle) —— */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.24);
  --shadow-sm:  0 2px 4px rgba(0,0,0,0.20), 0 1px 2px rgba(0,0,0,0.16);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.20), 0 2px 4px rgba(0,0,0,0.12);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.24), 0 4px 8px rgba(0,0,0,0.12);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.28), 0 8px 16px rgba(0,0,0,0.16);
  --shadow-glow: 0 0 24px rgba(94,106,210,0.12);
  --shadow-inset: inset 0 1px 0 var(--white-6);

  /* —— Typography —— */
  --font:             var(--font-inter);
  --font-mono:        var(--font-geist);
  --font-display:     var(--font-inter);

  --fs-2xs:  10px;
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   18px;
  --fs-2xl:  22px;
  --fs-3xl:  28px;
  --fs-4xl:  36px;
  --fs-5xl:  48px;

  --lh-tight:   1.15;
  --lh-snug:    1.30;
  --lh-normal:  1.45;
  --lh-relaxed: 1.60;
  --lh-loose:   1.75;

  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  -0.005em;
  --tracking-wide:    0.01em;
  --tracking-wider:   0.04em;
  --tracking-widest:  0.08em;

  /* —— Spacing (4px base scale, generous for premium feel) —— */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;
  --sp-11: 80px;

  /* —— Radius (layered: sharp data, soft chrome, pill CTAs) —— */
  --r-xs:    3px;
  --r-sm:    5px;
  --r-md:    6px;
  --r-lg:    8px;
  --r-xl:    12px;
  --r-2xl:   14px;
  --r-3xl:   16px;
  --r-4xl:   20px;
  --r-pill:  9999px;

  /* —— Motion (cinematic, purposeful) —— */
  --t-instant: 0.05s var(--ease-smooth);
  --t-fast:    0.1s var(--ease-smooth);
  --t-base:    0.15s var(--ease-out);
  --t-slow:    0.25s var(--ease-out);
  --t-spring:  0.3s var(--ease-spring);
  --t-page:    0.4s var(--ease-out);
  --t-cinema:  0.6s var(--ease-expo);

  /* —— Layout dimensions —— */
  --sidebar-w:       248px;
  --sidebar-collapsed: 56px;
  --topbar-h:        56px;
  --content-max:     1200px;
  --content-pad:     32px;

  /* —— Z-index scale —— */
  --z-base:     1;
  --z-sticky:   10;
  --z-overlay:  50;
  --z-modal:    100;
  --z-toast:    200;
  --z-top:      999;

  /* —— Glassmorphism tokens —— */
  --glass-blur:      16px;
  --glass-saturate:  180%;
  --glass-bg:        rgba(20,20,28,0.55);
  --glass-bg-hover:  rgba(28,28,38,0.65);
  --glass-border:    var(--white-10);
  --glass-shadow:    0 8px 32px rgba(0,0,0,0.20);
}

/* ──────────────────────────────────────────────────────────
   3. COMPONENT TOKENS (specific component aliases)
   ────────────────────────────────────────────────────────── */
:root {
  /* Card (12px radius, hairline border, subtle shadow on hover) */
  --card-bg:        var(--bg-surface);
  --card-border:    var(--border-subtle);
  --card-radius:    var(--r-xl);
  --card-padding:   var(--sp-6);
  --card-shadow:    none;
  --card-shadow-hover: var(--shadow-sm);

  /* Glass card (for hero, featured panels) */
  --glass-card-bg:       var(--glass-bg);
  --glass-card-border:   var(--glass-border);
  --glass-card-radius:   var(--r-2xl);
  --glass-card-blur:     var(--glass-blur);

  /* Input (6px radius, deep bg, hairline border) */
  --input-bg:       var(--gray-10);
  --input-border:   var(--border-default);
  --input-radius:   var(--r-md);
  --input-padding:  10px 13px;

  /* Button (generous padding, large per user preference) */
  --btn-radius:     var(--r-lg);
  --btn-padding:    11px 20px;
  --btn-height:     38px;

  /* Nav item */
  --nav-radius:     var(--r-md);
  --nav-padding:    9px 12px;

  /* Sidebar glass */
  --sidebar-bg:     var(--bg-glass);
  --sidebar-blur:   var(--glass-blur);
  --sidebar-border: var(--border-subtle);

  /* Topbar glass */
  --topbar-bg:      var(--bg-glass);
  --topbar-blur:    var(--glass-blur);
  --topbar-border:  var(--border-subtle);
}