/* tokens.css — the design tokens (CSS custom properties) for every page.
   Dark is the default; [data-theme="light"] on <html> switches to light.
   Linked before each page's own CSS. New tokens go here, in both blocks. */

:root {
  --display: 'Sora', system-ui, sans-serif;
  --body:    'Inter', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  --accent:      #F0EEE9;
  --accent-dim:  rgba(240, 238, 233, 0.18);
  --accent-glow: rgba(240, 238, 233, 0.55);
  --accent-soft: rgba(240, 238, 233, 0.08);

  /* dark (default) */
  --bg:             #05060a;
  --bg-2:           #0a0d14;
  --bg-3:           #11151f;
  --line:           rgba(255,255,255,0.08);
  --line-strong:    rgba(255,255,255,0.16);
  --fg:             #f1f3f8;
  --fg-dim:         #a3a8b5;
  --fg-faint:       #6b7180;
  --nav-bg:         rgba(5,6,10,0.55);
  --menu-bg:        rgba(10,13,20,0.95);
  --btn-primary-fg: #000;
  --secondary-glow: rgba(120,80,255,0.06);

  /* ── Modular type scale ─────────────────────────────── */
  --text-caption: 12.8px; --text-caption-lh: 1.4;  --text-caption-wt: 500;
  --text-small:   14px;   --text-small-lh:   1.55; --text-small-wt:   400;
  --text-body:    16px;   --text-body-lh:    1.6;  --text-body-wt:    400;
  --text-lead:    20px;   --text-lead-lh:    1.55; --text-lead-wt:    400;
  --text-h3:      25px;   --text-h3-lh:      1.25; --text-h3-wt:      500;
  --text-h2:      31px;   --text-h2-lh:      1.2;  --text-h2-wt:      500;
  --text-h1:      48px;   --text-h1-lh:      1.1;  --text-h1-wt:      500;
  --text-display: clamp(56px, 8vw, 92px); --text-display-lh: 1.05; --text-display-wt: 500;

  /* form validation errors (contact page) */
  --danger: #f87171;
  --danger-dim: rgba(248, 113, 113, 0.35);
  --danger-soft: rgba(248, 113, 113, 0.12);
}

[data-theme="light"] {
  --accent:      #272E3D;
  --accent-dim:  rgba(39, 46, 61, 0.18);
  --accent-glow: rgba(39, 46, 61, 0.55);
  --accent-soft: rgba(39, 46, 61, 0.08);
  --bg:             #f6f7fb;
  --bg-2:           #ffffff;
  --bg-3:           #eef0f6;
  --line:           rgba(10,12,24,0.08);
  --line-strong:    rgba(10,12,24,0.18);
  --fg:             #0c0e18;
  --fg-dim:         #4a5060;
  --fg-faint:       #8a90a0;
  --nav-bg:         rgba(246,247,251,0.7);
  --menu-bg:        rgba(255,255,255,0.96);
  --btn-primary-fg: #fff;
  --secondary-glow: rgba(120,80,255,0.04);

  /* form validation errors (contact page) */
  --danger: #b91c1c;
  --danger-dim: rgba(185, 28, 28, 0.35);
  --danger-soft: rgba(185, 28, 28, 0.08);
}