/* ============================================================================
   Design tokens — abstracted from the Graphite / Linear / Stripe analysis.
   Two layers:
     1. PRIMITIVE  — raw scales (never used directly by components)
     2. SEMANTIC   — role names mapped from primitives (the only layer components read)
   Theme = re-map the semantic layer only.
   No brand colors, fonts, or assets are copied; values are original abstractions.
   ============================================================================ */

:root {
  /* ---- Primitive: neutral ramp (dark-first, ~equal lightness steps) ------- */
  --neutral-0:  #08090b;
  --neutral-1:  #0e1013;
  --neutral-2:  #16181c;
  --neutral-3:  #1d2025;
  --neutral-4:  #262a31;
  --neutral-5:  #343a44;
  --neutral-6:  #4b525e;
  --neutral-7:  #6c7480;
  --neutral-8:  #9aa1ac;
  --neutral-9:  #c8cdd5;
  --neutral-10: #f4f6f8;

  /* ---- Primitive: single accent hue (indigo) + derived tints ------------- */
  --accent-300: #9b9bf2;
  --accent-400: #7c7cee;
  --accent-500: #5b5bd6;
  --accent-600: #4a47c2;
  --accent-soft: color-mix(in oklab, var(--accent-500) 14%, transparent);
  --accent-ring: color-mix(in oklab, var(--accent-500) 45%, transparent);

  /* ---- Primitive: semantic status hues ----------------------------------- */
  --success-500: #3ecf8e;
  --warning-500: #f0b65a;
  --danger-500:  #f0596b;

  /* ---- Spacing: strict 4px grid ------------------------------------------ */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px; --space-11: 160px;

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

  /* ---- Typography -------------------------------------------------------- */
  --font-sans: "InterVariable", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", SFMono-Regular,
               Menlo, monospace;

  --fw-regular: 400; --fw-book: 460; --fw-medium: 510; --fw-semibold: 560;

  --tracking-tight: -0.022em;  /* display */
  --tracking-snug:  -0.011em;  /* body */
  --tracking-wide:   0.04em;   /* eyebrow / label */

  /* Fluid type scale (clamp: mobile -> desktop) */
  --text-display-xl: clamp(2.5rem, 1.4rem + 4.6vw, 4rem);
  --text-display-lg: clamp(2rem, 1.3rem + 3vw, 3rem);
  --text-h3:        1.5rem;
  --text-h4:        1.25rem;
  --text-body-lg:   1.125rem;
  --text-body:      1rem;
  --text-body-sm:   0.875rem;
  --text-label:     0.8125rem;
  --text-eyebrow:   0.75rem;

  /* ---- Elevation: depth from light + tinted soft shadow ------------------ */
  --border:        rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --ring-hairline: inset 0 0 0 1px rgba(255,255,255,0.08);
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.30);
  --shadow-lift:  0 10px 28px -14px rgba(0,0,0,0.60);
  --shadow-float: 0 30px 60px -18px rgba(16,18,40,0.65);

  /* ---- Motion ------------------------------------------------------------ */
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --dur-reveal: 560ms;
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.66, 0, 0.34, 1);
  --ease-snap:   cubic-bezier(0.16, 1, 0.3, 1);
  /* spring-like reveal curve (abstracted from a linear() spring) */
  --ease-glide: linear(0, .012 .9%, .05 2%, .411 9.2%, .517 11.8%, .611 14.6%,
    .694 17.7%, .765 21.1%, .824 24.8%, .872 28.9%, .91 33.4%, .939 38.4%,
    .977 50.9%, .994 68.4%, 1);

  /* ---- Layout ------------------------------------------------------------ */
  --max-w: 1120px;
  --max-w-prose: 64ch;
  --gutter: 16px;
  --header-h: 64px;
  --section-pad: clamp(64px, 4rem + 6vw, 144px);

  /* ---- Semantic layer (the ONLY tokens components reference) -------------- */
  --bg:           var(--neutral-0);
  --surface:      var(--neutral-2);
  --surface-2:    var(--neutral-3);
  --surface-hi:   var(--neutral-4);
  --text:         var(--neutral-10);
  --text-muted:   var(--neutral-8);
  --text-subtle:  var(--neutral-7);
  --accent:       var(--accent-500);
  --accent-hover: var(--accent-400);
  --on-accent:    #ffffff;
  --focus-ring:   var(--accent-ring);
}

@media (min-width: 768px)  { :root { --gutter: 24px; } }
@media (min-width: 1280px) { :root { --gutter: 32px; } }

/* ---- Light theme: remap semantic layer only (Stripe-spirit) ------------- */
[data-theme="light"] {
  --bg:          #ffffff;
  --surface:     #f6f9fc;
  --surface-2:   #eef2f7;
  --surface-hi:  #e6ebf1;
  --text:        #0b1b2b;
  --text-muted:  #5a6b7b;
  --text-subtle: #8895a4;
  --on-accent:   #ffffff;
  --border:        rgba(11,27,43,0.08);
  --border-strong: rgba(11,27,43,0.14);
  --ring-hairline: inset 0 0 0 1px rgba(11,27,43,0.08);
  --shadow-sm:    0 1px 2px rgba(50,50,93,0.10);
  --shadow-lift:  0 12px 28px -14px rgba(50,50,93,0.18);
  --shadow-float: 0 30px 60px -16px rgba(50,50,93,0.18);
  color-scheme: light;
}
:root { color-scheme: dark; }