:root {
  /* ---------- Color: brand green ---------- */
  --color-green-500: #0f8a43;
  --color-green-600: #0a6e34;
  --color-green-700: #085c2b;
  --color-green-900: #071209;

  /* ---------- Color: gold accent (hero comic-outline treatment) ---------- */
  --color-gold-500: #d9a440;
  --color-gold-600: #b9842a;

  /* ---------- Color: neutral base ---------- */
  --color-base: #fafaf8;
  --color-surface: #f4f8f5;
  --color-elevated: #e8f3ec;
  --color-edge: #d8eae0;
  --color-white: #ffffff;

  /* ---------- Color: text ---------- */
  --color-ink: #111111;
  --color-body: #555555;
  --color-faint: #888888;
  --color-on-dark: #ffffff;
  --color-on-dark-muted: rgba(255, 255, 255, 0.85);

  /* ---------- Typography (system stacks only — no CDN font dependency) ---------- */
  --font-display: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", monospace;

  --text-xs: clamp(0.7rem, 0.66rem + 0.1vw, 0.75rem);
  --text-sm: clamp(0.8rem, 0.77rem + 0.1vw, 0.875rem);
  --text-base: clamp(0.95rem, 0.92rem + 0.15vw, 1rem);
  --text-md: clamp(1.05rem, 1rem + 0.25vw, 1.25rem);
  --text-lg: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --text-2xl: clamp(2rem, 1.6rem + 1.6vw, 3.5rem);
  --text-3xl: clamp(2.75rem, 2rem + 3vw, 5.5rem);
  --text-hero: clamp(4.5rem, 2.5rem + 10vw, 13.125rem);

  /* ---------- Spacing ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: clamp(1.5rem, 1rem + 2vw, 3rem);
  --space-8: clamp(2rem, 1.2rem + 3vw, 4rem);
  --space-section: clamp(4rem, 2.5rem + 6vw, 7.5rem);
  --space-gutter: clamp(1.5rem, 0.8rem + 3vw, 5rem);
  --content-max: 1280px;

  /* ---------- Radius ---------- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;

  /* ---------- Shadow ---------- */
  --shadow-sm: 0 2px 10px rgba(15, 30, 20, 0.06);
  --shadow-md: 0 8px 28px rgba(15, 30, 20, 0.1);
  --shadow-lg: 0 18px 48px rgba(15, 30, 20, 0.16);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 200ms;
  --duration-base: 350ms;
  --duration-slow: 400ms;
}