/* ============================================================
   Design Tokens
   Color, type, radius, motion and spacing custom properties.
   Theme (data-theme) and density (data-density) variants.
   ============================================================ */
:root {
  --font-display: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif:   "Instrument Serif", Georgia, serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --accent:        #4163e4;                  /* Indigo — matches the logo blue */
  --accent-deep:   #2942ab;                  /* Indigo Deep — hover / shadows */
  --accent-soft:   rgba(65, 99, 228, 0.14);
  --accent-line:   rgba(65, 99, 228, 0.32);
  --accent-deep-line: rgba(41, 66, 171, 0.45);
  --accent-fg:     #ffffff;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.6s;

  --section-y: clamp(6rem, 11vw, 10rem);
}

[data-theme="dark"] {
  --bg-0: oklch(0.17 0.006 256);
  --bg-1: oklch(0.20 0.007 256);
  --bg-2: oklch(0.23 0.008 256);
  --bg-inset: oklch(0.14 0.006 256);

  --fg-0: oklch(0.98 0.003 256);
  --fg-1: oklch(0.78 0.006 256);
  --fg-2: oklch(0.62 0.007 256);
  --fg-3: oklch(0.48 0.008 256);

  --line-0: oklch(1 0 0 / 0.10);
  --line-1: oklch(1 0 0 / 0.16);
  --surface-veil: oklch(1 0 0 / 0.03);
  --surface-veil-2: oklch(1 0 0 / 0.05);

  --grid-line: oklch(1 0 0 / 0.045);
  --shadow-lg: 0 40px 90px -30px rgba(0,0,0,0.85);
  --shadow-glow: 0 0 120px rgba(255,255,255,0.04);

  --on-light: #0a0b0d;
  --chip-bg: #ffffff;
  --chip-fg: #0a0b0d;
}

[data-theme="light"] {
  --bg-0: oklch(0.985 0.002 256);
  --bg-1: oklch(0.965 0.003 256);
  --bg-2: oklch(0.94 0.004 256);
  --bg-inset: oklch(0.93 0.004 256);

  --fg-0: oklch(0.22 0.01 256);
  --fg-1: oklch(0.38 0.01 256);
  --fg-2: oklch(0.52 0.01 256);
  --fg-3: oklch(0.64 0.01 256);

  --line-0: oklch(0.22 0.02 256 / 0.12);
  --line-1: oklch(0.22 0.02 256 / 0.20);
  --surface-veil: oklch(0.22 0.02 256 / 0.025);
  --surface-veil-2: oklch(0.22 0.02 256 / 0.05);

  --grid-line: oklch(0.22 0.02 256 / 0.06);
  --shadow-lg: 0 40px 90px -32px rgba(20,24,33,0.22);
  --shadow-glow: 0 0 120px rgba(20,24,33,0.04);

  --on-light: #0a0b0d;
  --chip-bg: #0a0b0d;
  --chip-fg: #ffffff;
}

[data-density="compact"]  { --section-y: clamp(4rem, 7vw, 6.5rem); }
[data-density="regular"]  { --section-y: clamp(6rem, 11vw, 10rem); }
[data-density="comfy"]    { --section-y: clamp(8rem, 14vw, 13rem); }