/* ============================================================
   DESIGN TOKENS  —  css/variables.css
   ============================================================ */

:root {
  /* Brand Colors (unchanged across themes) */
  --cyan:        #6AB0B0;
  --pastel-cyan: #ABC9C9;
  --coral:       #DE7F65;

  /* Dark mode defaults */
  --black:         #141412;
  --dark:          #1b1d20;
  --dark-mid:      #22252a;
  --dark-surface:  #282c30;
  --white:         #f5f5f2;

  /* Semantic text tokens */
  --text-primary:  #f5f5f2;
  --text-muted:    rgba(245,245,242,0.55);
  --text-faint:    rgba(245,245,242,0.32);
  --text-ultra:    rgba(245,245,242,0.15);

  /* Semantic bg tokens */
  --bg-page:       #141412;
  --bg-card:       #22252a;
  --bg-surface:    #282c30;
  --bg-input:      rgba(255,255,255,0.05);
  --bg-nav:        rgba(20,20,18,0.95);
  --bg-overlay:    rgba(0,0,0,0.85);

  /* Typography */
  --font-sans:   'Josefin Sans', sans-serif;
  --font-serif:  'Cormorant Garamond', serif;

  /* Layout */
  --nav-height:  64px;
  --section-x:   60px;
  --section-y:   80px;

  /* Borders */
  --border-cyan:  rgba(106, 176, 176, 0.12);
  --border-coral: rgba(222, 127, 101, 0.12);
}

/* ── LIGHT MODE OVERRIDES ─────────────────────────────────── */
html[data-theme="light"] {
  --black:         #f2f0ec;
  --dark:          #e8e6e2;
  --dark-mid:      #dddbd7;
  --dark-surface:  #d3d1cd;
  --white:         #1a1918;

  --text-primary:  #1a1918;
  --text-muted:    rgba(26,25,24,0.6);
  --text-faint:    rgba(26,25,24,0.38);
  --text-ultra:    rgba(26,25,24,0.15);

  --bg-page:       #f2f0ec;
  --bg-card:       #dddbd7;
  --bg-surface:    #d3d1cd;
  --bg-input:      rgba(0,0,0,0.04);
  --bg-nav:        rgba(242,240,236,0.95);
  --bg-overlay:    rgba(242,240,236,0.98);

  --border-cyan:  rgba(106, 176, 176, 0.22);
  --border-coral: rgba(222, 127, 101, 0.2);
}