/* ─────────────────────────────────────────────────────────────
   Overpower — Design Tokens
   Principle: single source of truth; typography/color/motion;
   every value consumed by components, never hardcoded.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Core palette — pitch black base, warm amber accent */
  --ink-0: #09090b;
  --ink-1: #0d0d10;
  --ink-2: #121216;
  --ink-3: #1a1a20;
  --ink-4: #24242c;
  --ink-5: #2e2e38;
  --ink-hair: #ffffff0a;      /* 1px hairline on dark */
  --ink-hair-strong: #ffffff14;

  --paper: #fafaf7;
  --paper-dim: #f0efe9;

  /* Accent — Mango Orange, tuned for dark */
  --flame-50:  #fff1e3;
  --flame-100: #ffd9b0;
  --flame-200: #ffbc76;
  --flame-300: #ff9d44;
  --flame-400: #ff8a1f;
  --flame-500: #ff7a00;       /* brand */
  --flame-600: #e56b00;
  --flame-700: #b85300;
  --flame-glow: #ff7a0033;
  --flame-glow-soft: #ff7a001a;

  /* Text */
  --fg-strong: #ffffff;
  --fg:        #f4f4f6;
  --fg-muted:  #b7b7c0;
  --fg-faint:  #7a7a85;

  /* Semantic */
  --ok:   #4ade80;
  --warn: #facc15;
  --bad:  #ef4444;

  /* Glass — the signature surface */
  --glass-bg:       color-mix(in oklab, var(--ink-2) 72%, transparent);
  --glass-bg-hi:    color-mix(in oklab, var(--ink-3) 78%, transparent);
  --glass-border:   color-mix(in oklab, #ffffff 9%, transparent);
  --glass-edge:     color-mix(in oklab, #ffffff 22%, transparent);

  /* Typography — system stack; variable weight emulation via -webkit-font-smoothing */
  --font-sans: "Inter", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter Display", "Inter", "Noto Sans TC", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — modular, 1.18 ratio, optical centering */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-base:15px;
  --text-md:  17px;
  --text-lg:  20px;
  --text-xl:  24px;
  --text-2xl: 32px;
  --text-3xl: 44px;
  --text-4xl: 60px;
  --text-5xl: 84px;
  --text-hero:clamp(44px, 8vw, 112px);

  /* Radius — soft, friendly, ~goldenratio step */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-2xl: 44px;
  --r-pill: 999px;

  /* Spacing — 4px grid, harmonic */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* Elevation — dark UI needs *less* shadow, *more* inner light */
  --sh-1: 0 1px 0 0 #ffffff08 inset, 0 2px 6px #00000040;
  --sh-2: 0 1px 0 0 #ffffff10 inset, 0 8px 24px #00000055;
  --sh-3: 0 1px 0 0 #ffffff14 inset, 0 20px 60px #00000080;
  --sh-glow: 0 0 0 1px #ff7a0033, 0 0 32px -4px #ff7a0080, 0 0 64px -16px #ff7a0055;
  --sh-glow-soft: 0 0 0 1px #ff7a001a, 0 0 40px -8px #ff7a004a;

  /* Motion — everything that moves lives on this spring */
  --ease-spring:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-back:     cubic-bezier(0.34, 1.56, 0.64, 1);

  --d-instant: 80ms;
  --d-fast:    140ms;
  --d-base:    220ms;
  --d-slow:    360ms;
  --d-slower:  560ms;
  --d-cinema:  900ms;

  /* Mesh gradient stops — Stripe-grade aurora */
  --mesh-1: #ff7a00;
  --mesh-2: #6b2bff;
  --mesh-3: #00d4ff;
  --mesh-4: #ff2e63;
  --mesh-5: #ffb800;

  /* Grid */
  --container:   1240px;
  --container-wide: 1440px;

  /* Layer */
  --z-below: -1;
  --z-base:   0;
  --z-raised: 10;
  --z-nav:    50;
  --z-modal:  100;
  --z-toast:  200;
  --z-pet:    90;
}

/* Light mode — inverted, still warm */
@media (prefers-color-scheme: light) {
  :root.theme-auto,
  :root:not([data-theme]) {
    --ink-0: #fafaf7;
    --ink-1: #f4f4f0;
    --ink-2: #ffffff;
    --ink-3: #f7f7f4;
    --ink-4: #ededea;
    --ink-5: #dcdcd6;
    --ink-hair: #0000000a;
    --ink-hair-strong: #00000014;

    --fg-strong: #0a0a0c;
    --fg:        #1a1a1f;
    --fg-muted:  #55555e;
    --fg-faint:  #90909a;

    --glass-bg:     #ffffffb0;
    --glass-bg-hi:  #ffffffd0;
    --glass-border: #0000000f;
    --glass-edge:   #00000015;
  }
}

:root[data-theme="light"] {
  --ink-0: #fafaf7;
  --ink-1: #f4f4f0;
  --ink-2: #ffffff;
  --ink-3: #f7f7f4;
  --ink-4: #ededea;
  --ink-5: #dcdcd6;
  --ink-hair: #0000000a;
  --ink-hair-strong: #00000014;

  --fg-strong: #0a0a0c;
  --fg:        #1a1a1f;
  --fg-muted:  #55555e;
  --fg-faint:  #90909a;

  --glass-bg:     #ffffffb0;
  --glass-bg-hi:  #ffffffd0;
  --glass-border: #0000000f;
  --glass-edge:   #00000015;
}