:root,
[data-theme="light"] {
  color-scheme: light;
  --brand-red: #e15554;
  --brand-green: #3bb273;
  --brand-yellow: #e1bc29;
  --route-primary: #2a9d72;
  --route-alternate: #3d7eff;
  --color-danger: #c93f40;
  --color-warning: #e1bc29;
  --color-success: #237f5e;
  --color-info: #2f6fe4;
  --bg-canvas: #f5f7f9;
  --bg-surface: #ffffff;
  --bg-raised: #edf1f4;
  --bg-inverse: #17212b;
  --text-primary: #17212b;
  --text-secondary: #5c6975;
  --text-inverse: #ffffff;
  --border-default: #d7dee4;
  --border-strong: #aeb9c2;
  --focus-ring: #3d7eff;
  --route-casing: #ffffff;
  --shadow-color: rgb(23 33 43 / 14%);
}

[data-theme="dark"] {
  color-scheme: dark;
  --brand-red: #ff7474;
  --brand-green: #47d69b;
  --brand-yellow: #f3ce45;
  --route-primary: #47d69b;
  --route-alternate: #6ea8ff;
  --color-danger: #ff7474;
  --color-warning: #f3ce45;
  --color-success: #47d69b;
  --color-info: #6ea8ff;
  --bg-canvas: #0b1218;
  --bg-surface: #121c24;
  --bg-raised: #192630;
  --bg-inverse: #e8eef3;
  --text-primary: #e8eef3;
  --text-secondary: #a8b5bf;
  --text-inverse: #0b1218;
  --border-default: #30414d;
  --border-strong: #536875;
  --focus-ring: #6ea8ff;
  --route-casing: #071016;
  --shadow-color: rgb(0 0 0 / 40%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --brand-red: #ff7474;
    --brand-green: #47d69b;
    --brand-yellow: #f3ce45;
    --route-primary: #47d69b;
    --route-alternate: #6ea8ff;
    --color-danger: #ff7474;
    --color-warning: #f3ce45;
    --color-success: #47d69b;
    --color-info: #6ea8ff;
    --bg-canvas: #0b1218;
    --bg-surface: #121c24;
    --bg-raised: #192630;
    --bg-inverse: #e8eef3;
    --text-primary: #e8eef3;
    --text-secondary: #a8b5bf;
    --text-inverse: #0b1218;
    --border-default: #30414d;
    --border-strong: #536875;
    --focus-ring: #6ea8ff;
    --route-casing: #071016;
    --shadow-color: rgb(0 0 0 / 40%);
  }
}

:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }