/* ═══════════════════════════════════════════════════
   MRCSG Design Tokens
   All CSS custom properties for the theme.
═══════════════════════════════════════════════════ */

/* ── Accent system (hue-driven) ── */
:root {
  --accent-h: 45;
  --accent:   oklch(0.68 0.21 var(--accent-h));
  --accent2:  oklch(0.52 0.21 var(--accent-h));
  --accent-l: oklch(0.82 0.14 var(--accent-h));
  --live-red: #e53e3e;
}

/* ── Dark mode (default) ── */
[data-theme="dark"],
body {
  --bg:     oklch(0.09 0.012 55);
  --bg2:    oklch(0.12 0.012 55);
  --bg3:    oklch(0.16 0.012 55);
  --fg:     oklch(0.95 0.005 80);
  --fg2:    oklch(0.58 0.008 80);
  --border: oklch(0.22 0.01 55);

  /* Fallback hex for older browsers */
  --bg-fb:     #141008;
  --bg2-fb:    #1c160d;
  --bg3-fb:    #261e12;
  --fg-fb:     #f4f1ec;
  --fg2-fb:    #968e82;
  --border-fb: #342c1e;
}

[data-theme="light"] {
  --bg:     oklch(0.97 0.004 80);
  --bg2:    oklch(0.93 0.005 80);
  --bg3:    oklch(0.89 0.006 80);
  --fg:     oklch(0.12 0.01 55);
  --fg2:    oklch(0.42 0.01 55);
  --border: oklch(0.82 0.006 55);

  --bg-fb:     #f8f6f2;
  --bg2-fb:    #edeae4;
  --bg3-fb:    #e2ddd6;
  --fg-fb:     #1a1208;
  --fg2-fb:    #5c5044;
  --border-fb: #cdc8bf;
}

/* ── Typography scale ── */
:root {
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'Barlow', 'Arial', sans-serif;

  --text-hero:    clamp(52px, 10vw, 130px);
  --text-h2:      clamp(36px, 6vw, 64px);
  --text-h3:      clamp(28px, 4vw, 42px);
  --text-label:   11px;
  --text-nav:     12px;
  --text-body:    15px;
  --text-caption: 10px;
}

/* ── Spacing ── */
:root {
  --nav-h:        64px;
  --page-pad-h:   32px;
  --section-pad:  90px;
  --card-gap:     2px;
}

/* ── Borders & radius ── */
:root {
  --radius:       2px;
  --border-w:     1px solid var(--border);
}

/* ── Transitions ── */
:root {
  --t-fast: 0.15s ease;
  --t-mid:  0.2s ease;
  --t-slow: 0.3s ease;
}