:root {
  color-scheme: light;

  --color-bg: #f4f7f3;
  --color-bg-start: #f8fbf8;
  --color-surface: #ffffff;
  --color-surface-soft: #eef3ef;
  --color-surface-strong: #e1e9e2;
  --color-text: #101315;
  --color-text-soft: #49535b;
  --color-border: rgba(16, 19, 21, 0.1);
  --color-border-strong: rgba(16, 19, 21, 0.18);
  --color-accent: #8ea98d;
  --color-accent-strong: #5f7862;
  --color-accent-soft: #e3ece2;
  --color-accent-alt: #5e7797;
  --color-shadow: rgba(16, 19, 21, 0.07);
  --color-card-bg: rgba(255, 255, 255, 0.92);
  --color-header-bg: rgba(244, 247, 243, 0.92);
  --color-menu-bg: rgba(255, 255, 255, 0.98);
  --color-floating-bg: rgba(255, 255, 255, 0.94);
  --color-floating-border: rgba(16, 19, 21, 0.12);
  --color-button-bg-hover: #1b2024;
  --color-featured-overlay: rgba(16, 19, 21, 0.62);
  --color-featured-outline: rgba(255, 255, 255, 0.28);

  --font-sans: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: "CMU Serif", "Times New Roman", serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --radius-xs: 0.25rem;
  --radius-sm: 0.55rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 1.9rem;
  --radius-pill: 999px;

  --shadow-soft: 0 14px 36px var(--color-shadow);
  --shadow-soft-subtle: 0 10px 24px var(--color-shadow);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;

  --border: 1px solid var(--color-border);
  --transition: 180ms ease;
  --page-gutter: clamp(1.1rem, 2.4vw, 2rem);
  --rail-reserve: clamp(4.5rem, 5vw, 5.75rem);
  --content-max: 86rem;
  --content-readable: 76rem;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #11171c;
  --color-bg-start: #151c22;
  --color-surface: #182028;
  --color-surface-soft: #202a33;
  --color-surface-strong: #283440;
  --color-text: #edf3ef;
  --color-text-soft: #b5c1ba;
  --color-border: rgba(237, 243, 239, 0.08);
  --color-border-strong: rgba(237, 243, 239, 0.14);
  --color-accent: #8ea98d;
  --color-accent-strong: #bad0ba;
  --color-accent-soft: rgba(142, 169, 141, 0.18);
  --color-accent-alt: #93b7e2;
  --color-shadow: rgba(0, 0, 0, 0.28);
  --color-card-bg: rgba(24, 32, 40, 0.88);
  --color-header-bg: rgba(17, 23, 28, 0.9);
  --color-menu-bg: rgba(24, 32, 40, 0.98);
  --color-floating-bg: rgba(24, 32, 40, 0.94);
  --color-floating-border: rgba(237, 243, 239, 0.14);
  --color-button-bg-hover: #27323c;
  --color-featured-overlay: rgba(7, 10, 12, 0.68);
  --color-featured-outline: rgba(255, 255, 255, 0.18);
}