:root {
  color-scheme: light dark;
  --bg: #f3faf6;
  --secondary-bg: #e6f5ec;
  --card-bg: #ffffff;
  --text: #10261b;
  --meta-text: rgba(16, 38, 27, 0.55);
  --border: #d3eadc;
  --header-color: #10261b;
  --accent: #10b981;
  --accent-strong: #059669;
  --accent-soft: #34d399;
  --button-bg: #10b981;
  --button-bg-hover: #059669;
  --button-text: #ffffff;
  --button-secondary-bg: #e3f4ea;
  --button-secondary-bg-hover: #cdecd9;
  --button-secondary-text: #10261b;
  --overlay-bg: rgba(243, 250, 246, 0.8);
  --modal-bg: #ffffff;
  --modal-text: #10261b;
  --shadow-soft: 0 10px 30px rgba(16, 185, 129, 0.18), 0 2px 8px rgba(16, 38, 27, 0.08);
  --shape-large: 22px;
  --font-family: ProductSansRegular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ground-text: rgba(232, 247, 239, 0.6);
  --runner: #10b981;
  --runner-dark: #047857;
  --visor: #10261b;
  --scarf: #fbbf24;
  --hazard: #f43f5e;
  --hazard-dark: #be123c;
  --hazard-light: #fda4af;
  --coin: #fbbf24;
  --coin-dark: #d97706;
  --sky-text: var(--text);
  --sky-meta: var(--meta-text);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1512;
    --secondary-bg: #122019;
    --card-bg: #14231c;
    --text: #e8f7ef;
    --meta-text: rgba(232, 247, 239, 0.55);
    --border: #234134;
    --header-color: #e8f7ef;
    --accent: #34d399;
    --accent-strong: #10b981;
    --accent-soft: #6ee7b7;
    --button-bg: #10b981;
    --button-bg-hover: #34d399;
    --button-secondary-bg: #183226;
    --button-secondary-bg-hover: #204131;
    --button-secondary-text: #e8f7ef;
    --overlay-bg: rgba(5, 12, 9, 0.82);
    --modal-bg: #14231c;
    --modal-text: #e8f7ef;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
    --runner: #34d399;
    --runner-dark: #10b981;
    --visor: #0b1512;
    --hazard: #fb7185;
    --hazard-dark: #e11d48;
    --hazard-light: #fecdd3;
  }
}

[data-sky="dark"] {
  --sky-text: #e8f7ef;
  --sky-meta: rgba(232, 247, 239, 0.68);
}

[data-sky="light"] {
  --sky-text: #10261b;
  --sky-meta: rgba(16, 38, 27, 0.62);
}