:root {
  /* --- Colors --- */
  --paper: #FBF8F2;
  --ink: #2E2E2C;
  --ink-soft: #6B6963;
  --cyan: #B8DDE0;
  --cyan-deep: #6FA8AD;
  --rule: #E4DFD3;
  
  --error: #d93025;
  --success-bg: #EAF5F6;
  --error-bg: #FCE8E6;
  --footer-faint: #ABA69C;
  --white: #FFFFFF;

  /* --- East Wind Phase Ladder --- */
  --ew-phase-1: #5B8B94;
  --ew-phase-2: #3D6169;
  --ew-phase-3: #2B2A26;
  --ew-phase-4: #928F83;
  
  --ew-parchment: var(--paper); /* Alias */
  --ew-ink: var(--ink); /* Alias */
  --ew-ink-soft: var(--ink-soft); /* Alias */
  --ew-ink-faint: #75726B; /* Alias */
  --ew-rule: var(--rule); /* Alias */

  /* --- Typography --- */
  --font-sans: 'Work Sans', sans-serif;
  --font-serif: 'Fraunces', serif;
  
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --text-base: 16px;
  --text-base-lh: 1.7;
  
  --text-h1: clamp(30px, 4vw, 42px);
  --text-h2: 30px;
  --text-h3: 19px;
  --text-masthead: 22px;
  --text-display: 90px;
  
  --text-small: 14.5px;
  --text-tiny: 11px;
  --tracking-wide: 0.08em;

  /* --- Spacing & Layout --- */
  --max-width-grid: 1000px;
  --max-width-text: 460px;
  
  --spacing-section-y: 60px;
  --spacing-section-x: 48px;
  
  --gap-grid: 20px;
  --gap-tabs: 28px;

  /* --- Borders & Radius --- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;

  /* --- Transitions --- */
  --transition-fast: 0.2s ease;
  --transition-flip: 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
}

@media (max-width: 600px) {
  :root {
    --spacing-section-x: 20px;
    --spacing-section-y: 40px;
  }
}