:root {
  --font-body: "DM Sans", "DM Sans Fallback", Arial, sans-serif;
  --font-heading: "Space Grotesk", "Space Grotesk Fallback", Arial, sans-serif;
  --surface-base: #e8e8e8;
  --surface-soft: #f7f7f5;
  --surface-card: #ffffff;
  --text: #090909;
  --text-muted: #4f4f4f;

  --bg-soft: #f7f7f5;
  --ink-soft: #5f5f5f;
  --container-page: 80rem;
  --container-readable: 66ch;
  --space-gutter: clamp(1rem, 3vw, 1.5rem);
  --space-section: clamp(2.75rem, 6vw, 4.5rem);
  --space-section-lg: clamp(3.5rem, 8vw, 6rem);
  --space-stack: 1rem;
  --space-card: 1.25rem;
  --accent-yellow: #f7f000;
  --accent-red: #ff1919;
  --accent-blue: #1d1dff;
  --border-strong: 3px solid #000;
  --shadow-hard: 8px 8px 0 #000;
  --shadow-mid: 6px 6px 0 #000;
  --shadow-soft: 4px 4px 0 #000;
  --shadow-xl: 10px 10px 0 #000;
  --shadow-press: 2px 2px 0 #000;
  --focus-color: var(--accent-blue);
  --focus-field-bg: var(--accent-yellow);
  --btn-min-h-mobile: 44px;
  --btn-min-h-desktop: 48px;
  --btn-pad-x: 1rem;
  --btn-pad-y: 0.62rem;
  --btn-font-size: 0.78rem;
  --btn-letter-spacing: 0.08em;

  /* Theme color aliases (used by vendor CSS / legacy templates) */
  --primary: var(--accent-red);
  --secondary: var(--accent-blue);
  --cta: var(--accent-yellow);
  --ink: var(--text);
  --ink-muted: var(--text-muted);

  /* Rhythm and layout */
  --rhythm: clamp(3.5rem, 6vw, 6rem);
}