:root {
  /* Color palette (light defaults) */
  --bg-start: #fff8f8;
  --bg-end: #f3fff3;
  --text: #222222;
  --muted-border: #dcdcdc;
  --card-bg: #ffffff;
  --highlight-bg: #f7fff7;
  --link-bg: #f9fff9;
  --green: #00b25c;
  --red: #b30000;
  --button-gradient: linear-gradient(90deg, var(--green), var(--red));

  /* Spacing / sizing tokens */
  --base-radius: 10px;
  --control-height: 48px;
  --badge-bg: var(--red);
  --focus-ring: rgba(0,178,92,0.16);
}

/* Respect user preference as default (will be overridden by body.dark or saved preference) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-start: #121212;
    --bg-end: #1b1b1b;
    --text: #f5f5f5;
    --muted-border: #333333;
    --card-bg: #1e1e1e;
    --highlight-bg: #222222;
    --link-bg: #161616;
    --green: #00e676;
    --red: #ff5252;
    --button-gradient: linear-gradient(90deg, var(--green), var(--red));
    --badge-bg: #ff5252;
    --focus-ring: rgba(0,230,118,0.14);
  }
}

/* Explicit dark override when toggled via js */
body.dark, html.dark {
  --bg-start: #121212;
  --bg-end: #1b1b1b;
  --text: #f5f5f5;
  --muted-border: #333333;
  --card-bg: #1e1e1e;
  --highlight-bg: #222222;
  --link-bg: #161616;
  --green: #00e676;
  --red: #ff5252;
  --button-gradient: linear-gradient(90deg, var(--green), var(--red));
  --badge-bg: #ff5252;
  --focus-ring: rgba(0,230,118,0.14);
}