/* ══════════════════════════════════════════════════════════════
   1. DESIGN TOKENS (CSS Variables)
   ══════════════════════════════════════════════════════════════ */

:root {

  font-size: 14px;
  
  /* -- PRIMITIVE COLORS (The Palette) -- */
  --gray-000: #FAF9F6;
  --gray-100: #F0EFEA;
  --gray-200: #EDECE8;
  --gray-300: #E0DFD9;
  --gray-500: #6B6A68;
  --gray-900: #2C2C2B;
  
  --red-500:  #D95C50;
  --blue-500: #3B82F6;

  /* -- SEMANTIC COLORS (The Roles) -- */
  --bg-page:        var(--gray-000);
  --bg-surface:     var(--gray-100);
  --bg-surface-alt: var(--gray-200);
  
  --text-primary:   var(--gray-900);
  --text-secondary: var(--gray-500);
  --text-inverse:   var(--gray-000);
  
  --border-subtle:  var(--gray-300);
  --border-strong:  var(--gray-500);
  
  --color-accent:   var(--red-500);
  --focus-ring:     color-mix(in srgb, var(--blue-500) 50%, transparent);

  /* -- DELTA LOGIC -- */
  --delta-neg:      var(--color-accent); /* Action required */
  --delta-pos:      var(--text-secondary); /* Good, muted */

  /* -- TYPOGRAPHY -- */
  --font-mono:      'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --font-serif:     'Lora', ui-serif, Georgia, serif;
  
  --font-base:      var(--font-mono);
  --weight-light:   300;
  --weight-bold:    400;
  --weight-display: 100;
  --line-height:    1.6;

  /* Typographic Scale (Fluid) */
  --text-xs:        0.75rem;
  --text-sm:        0.875rem;
  --text-base:      1rem;
  --text-lg:        clamp(1.125rem, 2vw, 1.25rem);
  --text-xl:        clamp(1.5rem, 3.5vw, 2.5rem);
  --text-2xl:       clamp(2.5rem, 6vw, 4.5rem);
  --text-display:   clamp(3rem, 20vw, 6rem);

  /* -- SPACING (ch for Mono, rem fallback) -- */
  --space-2xs:      0.5ch;
  --space-xs:       1ch;
  --space-sm:       2ch;
  --space-md:       4ch;
  --space-lg:       8ch;
  --space-xl:       16ch;
  
  --layout-pad:     2rem;
  --layout-gap:     var(--space-md);

  /* -- STRUCTURAL -- */
  --radius-none:    0px;
  --radius-sm:      2px;
  
  --transition-fast: 150ms ease;
  --transition-slow: 300ms ease;

  --z-base:         0;
  --z-elevated:     10;
  --z-overlay:      100;
}

/* -- THEME OVERRIDES -- */
[data-theme="dark"] {
  --gray-000: #1C1B1A;
  --gray-100: #262524;
  --gray-200: #2E2D2B;
  --gray-300: #333230;
  --gray-500: #A3A19E;
  --gray-900: #E6E5E3;
  --red-500:  #E07A5F;
}

[data-font="serif"] {
  --font-base:    var(--font-serif);
  --weight-light: 400;
  --weight-bold:  700;
  --line-height:  1.75;
  
  /* Convert ch spacing to rem for serif proportional width */
  --space-2xs:    0.25rem;
  --space-xs:     0.5rem;
  --space-sm:     1rem;
  --space-md:     2rem;
  --space-lg:     4rem;
  --space-xl:     8rem;
}