/* --- 1. DESIGN TOKENS --- */
:root {
  /* Color Scheme Declaration */
  color-scheme: light;

  /* Colors (Semantic) */
  --bg: #ffffff;
  --txt: #111111;
  --mute: #f4f4f4;
  --accent: #2933d3; /* International Klein Blue */
  --surface-subtle: #f0f0f0;
  --surface-hover: #e8e8e8;
  --border-strong: #111111;
  --border-width: 2px;

  /* Fluid Space (The "s" scale) */
  --s-1: clamp(0.75rem, 1vw, 1rem);
  --s0:  clamp(1rem, 2vw, 1.5rem);    /* Base */
  --s1:  clamp(1.5rem, 4vw, 3rem);    /* Large */
  --s2:  clamp(3rem, 6vw, 6rem);      /* X-Large */

  /* Measure */
  --measure: 65ch;

  /* Typography */
  --sans: 'Inter', system-ui, sans-serif;
  --head: 'Space Grotesk', system-ui, sans-serif;
  --mono: 'Courier New', monospace;

  /* Fluid Type Scale (Major Third / Utopia) */
  --step-0: clamp(1rem, 0.96rem + 0.22vw, 1.13rem);
  --step-1: clamp(1.25rem, 1.16rem + 0.43vw, 1.50rem);
  --step-2: clamp(1.56rem, 1.41rem + 0.74vw, 1.99rem);
  --step-3: clamp(1.95rem, 1.71rem + 1.22vw, 2.65rem);
  --step-4: clamp(2.44rem, 2.05rem + 1.93vw, 3.53rem);
  --step-5: clamp(3.05rem, 2.45rem + 2.97vw, 4.70rem);
}

/* Light Mode (Explicit) */
html[data-theme="light"] {
  color-scheme: light;

  --bg: #ffffff;
  --txt: #111111;
  --mute: #f4f4f4;
  --accent: #2933d3;
  --surface-subtle: #f0f0f0;
  --surface-hover: #e8e8e8;
  --border-strong: #111111;
}

/* Dark Mode (High Contrast) */
html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #111111;
  --txt: #e0e0e0;
  --mute: #1a1a1a;
  --accent: #6e79fc; /* Lighter Blue for >4.5:1 contrast */
  --surface-subtle: #1a1a1a;
  --surface-hover: #252525;
  --border-strong: #e0e0e0;
}

/* Toggle Logic */
body.no-web-fonts {
  --sans: system-ui, -apple-system, sans-serif;
  --head: system-ui, -apple-system, sans-serif;
}