/* ─────────────────────────────────────────────────────────────
   tokens.css — design system primitives (Dave2D blue)
   • Two themes (dark default, light alternate)
   • Type scale based on a 1.25 modular ratio
   • Spacing on a 4px base
   ───────────────────────────────────────────────────────────── */

:root {
  /* ─── Color (dark) — oxford navy + electric cyan ──────────── */
  --c-bg:           #050B16;
  --c-bg-elev:      #0A1424;
  --c-bg-card:      #0E1A2E;
  --c-bg-alt:       #081120;
  --c-ink:          #E6EEFC;
  --c-ink-soft:     #B6C4DC;
  --c-ink-muted:    #7B8AA6;
  --c-ink-faint:    #4A5876;
  --c-line:         rgba(180, 210, 255, 0.10);
  --c-line-soft:    rgba(180, 210, 255, 0.06);
  --c-grid:         rgba(180, 210, 255, 0.04);
  --c-accent:       #38BDF8;
  --c-accent-deep:  #0EA5E9;
  --c-accent-soft:  rgba(56, 189, 248, 0.14);
  --c-accent-glow:  rgba(56, 189, 248, 0.45);
  --c-secondary:    #6366F1;
  --c-pulse:        #34D399;
  --c-noise-op:     0.04;

  /* ─── Type ─────────────────────────────────────────────────── */
  --font-sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:   12px;
  --fs-sm:   13.5px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   30px;
  --fs-2xl:  44px;
  --fs-3xl:  64px;
  --fs-4xl:  clamp(56px, 9vw, 132px);
  --fs-5xl:  clamp(72px, 12vw, 192px);

  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  --tracking-tight: -0.02em;
  --tracking-mono:  0.02em;
  --tracking-wide:  0.16em;

  /* ─── Space ────────────────────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 144px;
  --s-11: 192px;

  /* ─── Layout ───────────────────────────────────────────────── */
  --container-max: 1440px;
  --container-pad: clamp(20px, 4vw, 56px);
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;

  /* ─── Motion ───────────────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0, 0.7, 0.2);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;
  --dur-4: 680ms;
  --dur-5: 1100ms;

  /* ─── Layers ───────────────────────────────────────────────── */
  --z-backdrop: 0;
  --z-base:     1;
  --z-nav:      40;
  --z-modal:    80;
}

/* Light theme override — porcelain blue */
[data-theme="light"] {
  --c-bg:           #F0F4FB;
  --c-bg-elev:      #FFFFFF;
  --c-bg-card:      #FFFFFF;
  --c-bg-alt:       #E2EAF6;
  --c-ink:          #0A1424;
  --c-ink-soft:     #1F2D45;
  --c-ink-muted:    #5A6A85;
  --c-ink-faint:    #95A4BD;
  --c-line:         rgba(10, 20, 36, 0.12);
  --c-line-soft:    rgba(10, 20, 36, 0.06);
  --c-grid:         rgba(10, 20, 36, 0.05);
  --c-accent:       #0284C7;
  --c-accent-deep:  #0369A1;
  --c-accent-soft:  rgba(2, 132, 199, 0.10);
  --c-accent-glow:  rgba(2, 132, 199, 0.30);
  --c-noise-op:     0.025;
}