:root {
  --color-bg: #ffffff;
  --color-bg-alt: #f6f8f7;
  --color-surface: #ffffff;
  --color-text: #1c2521;
  --color-text-muted: #5b6663;
  --color-border: #e4e8e6;
  --color-primary: #4a9950;
  --color-primary-hover: #3d8143;
  --color-primary-contrast: #ffffff;
  --color-header-bg: rgba(255, 255, 255, 0.92);
  --color-overlay: rgba(15, 23, 20, 0.5);
  --color-primary-soft: rgba(74, 153, 80, 0.12);
  --hero-glow: var(--color-primary-soft);
  --hero-depth: radial-gradient(ellipse 62% 68% at 88% 46%, rgba(38, 43, 48, 0.94) 0%, rgba(38, 43, 48, 0.5) 42%, transparent 74%);

  --shadow-sm: 0 1px 2px rgba(20, 30, 25, 0.06);
  --shadow-md: 0 8px 24px rgba(20, 30, 25, 0.08);
  --shadow-lg: 0 24px 48px rgba(20, 30, 25, 0.14);

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --header-height: 76px;
  --container-max: 1200px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-pill: 999px;

  --transition-fast: 160ms ease;
  --transition-base: 240ms ease;
}

:root[data-theme="dark"] {
  --color-bg: #12161a;
  --color-bg-alt: #171c21;
  --color-surface: #1a2025;
  --color-text: #edf1ef;
  --color-text-muted: #a2ada8;
  --color-border: #2a3238;
  --color-primary: #5cb862;
  --color-primary-hover: #74c879;
  --color-primary-contrast: #0d1210;
  --color-header-bg: rgba(18, 22, 26, 0.85);
  --color-overlay: rgba(0, 0, 0, 0.6);
  --color-primary-soft: rgba(92, 184, 98, 0.16);
  --hero-glow: rgba(120, 132, 145, 0.28);
  --hero-depth: radial-gradient(ellipse 62% 68% at 88% 46%, transparent 0%, transparent 100%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.55);
}