:root {
  color-scheme: light;
  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", sans-serif;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --text-2xl: clamp(2.1rem, 1.4rem + 2.2vw, 3.4rem);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --gutter: 1rem;
  --bg: #e6d5b3;
  --surface: #f3ecdc;
  --ink: #1c1612;
  --muted: #4e463c;
  --link: #0d5c30;
  --gold: #6e4700;
  --danger: #8d1a1a;
  --accent: #166b32;
  --accent-ink: #f4fff4;
  --accent-hover: #125828;
  --accent-bevel-light: #3e9a58;
  --accent-bevel-dark: #0c3d1c;
  --stone: #d0d0d0;
  --stone-ink: #1c1612;
  --stone-hover: #e4e4e4;
  --stone-bevel-light: #ffffff;
  --stone-bevel-dark: #555555;
  --bevel-light: #ffffff;
  --bevel-dark: #8a7b64;
  --field: #efe4d0;
  --field-inset: #c9b89a;
  --grass: #5d9c37;
  --dirt: #6b4423;
  --line: #c9b89a;
  --bg-wash: rgba(230, 213, 179, 0.92);
  --mortar: rgba(28, 22, 18, 0.08);
  --header-bg: #10141c;
  --header-ink: #f4efe4;
  --sign-bg: #e0b56a;
  --sign-ink: #2a1c08;
  --sign-light: #f6deaa;
  --sign-dark: #8d5e28;
  --focus-yellow: #ffd84a;
  --focus-ink: #1a1408;
}

@media (min-width: 768px) {
  :root {
    --gutter: 1.5rem;
  }
}

@media (min-width: 1280px) {
  :root {
    --gutter: 2rem;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121418;
  --surface: #22262c;
  --ink: #f4efe6;
  --muted: #d0c9bc;
  --link: #a6e89a;
  --gold: #f3d27a;
  --danger: #ffb4b0;
  --accent: #8ed67c;
  --accent-ink: #10210c;
  --accent-hover: #a4e494;
  --accent-bevel-light: #d5f5cc;
  --accent-bevel-dark: #2f6b32;
  --stone: #3c424c;
  --stone-ink: #f4efe6;
  --stone-hover: #4e5662;
  --stone-bevel-light: #6d7584;
  --stone-bevel-dark: #1a1e24;
  --bevel-light: #4c5360;
  --bevel-dark: #0c0e12;
  --field: #121418;
  --field-inset: #000000;
  --grass: #3d4a38;
  --dirt: #4a3424;
  --line: #3a404a;
  --bg-wash: rgba(18, 20, 24, 0.88);
  --mortar: rgba(244, 239, 230, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121418;
    --surface: #22262c;
    --ink: #f4efe6;
    --muted: #d0c9bc;
    --link: #a6e89a;
    --gold: #f3d27a;
    --danger: #ffb4b0;
    --accent: #8ed67c;
    --accent-ink: #10210c;
    --accent-hover: #a4e494;
    --accent-bevel-light: #d5f5cc;
    --accent-bevel-dark: #2f6b32;
    --stone: #3c424c;
    --stone-ink: #f4efe6;
    --stone-hover: #4e5662;
    --stone-bevel-light: #6d7584;
    --stone-bevel-dark: #1a1e24;
    --bevel-light: #4c5360;
    --bevel-dark: #0c0e12;
    --field: #121418;
    --field-inset: #000000;
    --grass: #3d4a38;
    --dirt: #4a3424;
    --line: #3a404a;
  --bg-wash: rgba(18, 20, 24, 0.88);
  --mortar: rgba(244, 239, 230, 0.06);
  }
}