:root,
:root[data-color-mode="light"] {
  color-scheme: light;
  --color-bg-start: #f8f3eb;
  --color-bg-end: #efe5d8;
  --color-bg-radial-left: rgba(168, 126, 69, 0.16);
  --color-bg-radial-right: rgba(122, 46, 31, 0.16);
  --color-gridline: rgba(122, 46, 31, 0.03);
  --color-panel: rgba(255, 251, 245, 0.94);
  --color-panel-strong: rgba(255, 253, 248, 0.96);
  --color-panel-border: rgba(167, 133, 87, 0.22);
  --color-border: #d9cab3;
  --color-border-strong: #9f998f;
  --color-card-fill-top: rgba(255, 255, 255, 0.88);
  --color-card-fill-bottom: rgba(248, 243, 235, 0.98);
  --color-card-outline: rgba(130, 114, 95, 0.35);
  --color-card-outline-strong: #a79b8e;
  --color-text: #2f2417;
  --color-muted: #6d5a43;
  --color-accent: #7a2e1f;
  --color-accent-strong: #28354f;
  --color-shadow: rgba(57, 35, 15, 0.12);
}

:root[data-color-mode="dark"] {
  color-scheme: dark;
  --color-bg-start: #211811;
  --color-bg-end: #140f0b;
  --color-bg-radial-left: rgba(181, 128, 62, 0.14);
  --color-bg-radial-right: rgba(126, 54, 35, 0.18);
  --color-gridline: rgba(242, 223, 187, 0.045);
  --color-panel: rgba(41, 30, 22, 0.88);
  --color-panel-strong: rgba(54, 40, 30, 0.94);
  --color-panel-border: rgba(200, 167, 118, 0.2);
  --color-border: #6f5c48;
  --color-border-strong: #9d866d;
  --color-card-fill-top: rgba(98, 78, 59, 0.28);
  --color-card-fill-bottom: rgba(48, 37, 28, 0.96);
  --color-card-outline: rgba(214, 188, 149, 0.28);
  --color-card-outline-strong: #8f775c;
  --color-text: #f0e3d3;
  --color-muted: #c6ad8f;
  --color-accent: #d39161;
  --color-accent-strong: #9db7dc;
  --color-shadow: rgba(0, 0, 0, 0.34);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-color-mode]) {
    color-scheme: dark;
    --color-bg-start: #211811;
    --color-bg-end: #140f0b;
    --color-bg-radial-left: rgba(181, 128, 62, 0.14);
    --color-bg-radial-right: rgba(126, 54, 35, 0.18);
    --color-gridline: rgba(242, 223, 187, 0.045);
    --color-panel: rgba(41, 30, 22, 0.88);
    --color-panel-strong: rgba(54, 40, 30, 0.94);
    --color-panel-border: rgba(200, 167, 118, 0.2);
    --color-border: #6f5c48;
    --color-border-strong: #9d866d;
    --color-card-fill-top: rgba(98, 78, 59, 0.28);
    --color-card-fill-bottom: rgba(48, 37, 28, 0.96);
    --color-card-outline: rgba(214, 188, 149, 0.28);
    --color-card-outline-strong: #8f775c;
    --color-text: #f0e3d3;
    --color-muted: #c6ad8f;
    --color-accent: #d39161;
    --color-accent-strong: #9db7dc;
    --color-shadow: rgba(0, 0, 0, 0.34);
  }
}