/* ============================================================
   Benjamin Dison · Engineering Portfolio — design tokens
   ============================================================ */

:root {
  /* ── PALETTE: pure-dark (default) ───────────────────────── */
  --bg:        oklch(0.16 0.005 250);
  --bg-2:      oklch(0.20 0.005 250);
  --bg-3:      oklch(0.24 0.006 250);
  --line:      oklch(0.32 0.008 250 / 0.6);
  --line-2:    oklch(0.32 0.008 250 / 0.25);
  --fg:        oklch(1 0 0);
  --fg-2:      oklch(0.82 0.003 250);
  --fg-3:      oklch(0.62 0.005 250);
  --fg-4:      oklch(0.44 0.005 250);

  --accent-h:  235;
  --accent-l:  0.78;
  --accent-c:  0.10;
  --accent:    oklch(var(--accent-l) var(--accent-c) var(--accent-h));
  --accent-2:  oklch(calc(var(--accent-l) - 0.18) calc(var(--accent-c) + 0.04) var(--accent-h));
  --accent-ink:oklch(0.16 0.03 var(--accent-h));

  --font-display: "Geist", "Söhne", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Geist", "Söhne", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-meta:    var(--font-mono);

  --tx-xs: 11px;
  --tx-sm: 13px;
  --tx-md: 15px;
  --tx-lg: 18px;
  --tx-xl: 22px;
  --tx-2xl: 28px;
  --tx-3xl: 38px;
  --tx-4xl: 56px;
  --tx-5xl: 84px;
  --tx-6xl: 128px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 72px;
  --sp-9: 112px;
  --sp-10: 168px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --container: 1360px;
  --gutter: 32px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 180ms;
  --t-med: 360ms;
  --t-slow: 720ms;
}

[data-palette="warm-dark"] {
  --bg:     oklch(0.17 0.011 60);
  --bg-2:   oklch(0.21 0.013 60);
  --bg-3:   oklch(0.26 0.014 60);
  --line:   oklch(0.36 0.018 60 / 0.55);
  --line-2: oklch(0.36 0.018 60 / 0.22);
  --fg:     oklch(0.94 0.018 80);
  --fg-2:   oklch(0.78 0.018 80);
  --fg-3:   oklch(0.58 0.016 70);
  --fg-4:   oklch(0.44 0.014 65);
  --accent-h: 70;
  --accent-l: 0.82;
  --accent-c: 0.10;
}

[data-palette="light"] {
  --bg:     oklch(0.985 0.002 250);
  --bg-2:   oklch(0.96 0.003 250);
  --bg-3:   oklch(0.93 0.004 250);
  --line:   oklch(0.20 0.005 250 / 0.18);
  --line-2: oklch(0.20 0.005 250 / 0.10);
  --fg:     oklch(0.14 0.006 250);
  --fg-2:   oklch(0.30 0.006 250);
  --fg-3:   oklch(0.46 0.005 250);
  --fg-4:   oklch(0.62 0.004 250);
  --accent-h: 235;
  --accent-l: 0.50;
  --accent-c: 0.14;
  --accent-ink:oklch(0.98 0.004 var(--accent-h));
}

[data-type="editorial"] {
  --font-display: "Fraunces", "Tiempos Headline", "Times New Roman", ui-serif, Georgia, serif;
  --font-body:    "Geist", "Söhne", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
}

[data-type="quiet"] {
  --font-display: "Geist", "Söhne", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Geist", "Söhne", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
}

@property --accent-l {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.78;
}
@property --accent-c {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.10;
}

@keyframes accent-breath {
  0%   { --accent-l: 0.78; --accent-c: 0.10; }
  25%  { --accent-l: 0.92; --accent-c: 0.05; }
  50%  { --accent-l: 0.98; --accent-c: 0.01; }
  75%  { --accent-l: 0.55; --accent-c: 0.12; }
  100% { --accent-l: 0.78; --accent-c: 0.10; }
}

html {
  animation: accent-breath 14s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  html { animation: none; }
}

[data-density="compact"] {
  --tx-md: 14px;
  --tx-lg: 16px;
  --tx-xl: 20px;
  --tx-2xl: 24px;
  --tx-3xl: 32px;
  --tx-4xl: 46px;
  --tx-5xl: 68px;
  --tx-6xl: 104px;
  --sp-5: 20px;
  --sp-6: 26px;
  --sp-7: 38px;
  --sp-8: 56px;
  --sp-9: 84px;
  --sp-10: 128px;
  --gutter: 24px;
}