/* Elyria Education Association — "Frontline" design tokens
   Dark, activist red/black/white. Source of truth is oklch. */
:root {
  /* Surfaces */
  --bg: oklch(0.17 0.006 20);
  --bg-deep: oklch(0.12 0.004 20);
  --surface: oklch(0.21 0.006 20);
  --surface-2: oklch(0.24 0.007 20);
  --watermark: oklch(0.2 0.006 20);

  /* Lines */
  --hairline: oklch(0.28 0.008 20);
  --hairline-raise: oklch(0.35 0.008 20);
  --border-2: oklch(0.4 0.01 40);

  /* Reds */
  --red: oklch(0.55 0.22 27);
  --red-hover: oklch(0.5 0.22 27);
  --red-bright: oklch(0.6 0.2 27);
  --red-kicker: oklch(0.65 0.18 30);
  --eyebrow: oklch(0.75 0.1 30);
  --eyebrow-border: oklch(0.35 0.02 27);
  --cta-body: oklch(0.95 0.03 27);

  /* Text */
  --text: oklch(0.96 0.005 60);
  --text-muted: oklch(0.78 0.005 60);
  --text-dim: oklch(0.7 0.005 60);
  --text-faint: oklch(0.62 0.005 60);
  --nav: oklch(0.82 0.005 60);
  --lockup-sub: oklch(0.62 0.008 40);

  /* Type */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;

  /* Fluid scale */
  --h1: clamp(2.5rem, 1.2rem + 6.2vw, 5rem);
  --h2: clamp(1.9rem, 1.4rem + 2vw, 2.5rem);
  --cta-h2: clamp(1.9rem, 1.4rem + 2vw, 2.5rem);
  --feature-h3: clamp(1.35rem, 1.1rem + 1vw, 1.5rem);

  /* Spacing / gutters */
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.25rem);
  --section-y: clamp(3rem, 2rem + 4vw, 4.5rem);

  /* Radii */
  --r-btn: 8px;
  --r-card: 16px;
  --r-panel: 20px;
  --r-pill: 100px;

  /* Motion */
  --dur: 180ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-card: 0 30px 80px -30px rgba(0, 0, 0, 0.5);
  --maxw: 1280px;
}