:root {
  color-scheme: dark;
  --page: #071321;
  --surface: #122031;
  --surface-raised: #192a3d;
  --text: #f6f7f9;
  --muted: #b7bfca;
  --secondary-icon: #8e9aaf;
  --border: #324256;
  --control-border: #78869b;
  --accent: #ff7a1a;
  --accent-text: #ff9b56;
  --accent-fill: #ff822d;
  --accent-hover: #ff9b56;
  --accent-foreground: #211307;
  --accent-subtle: #392519;
  --focus-ring: #ff9b56;
  --danger: #ffaaa4;
  --danger-strong: #b82627;
  --danger-surface: #3c222a;
  --success: #a3e0bb;
  --success-surface: #1e352e;
  --warning: #ffce85;
  --warning-surface: #362a20;
  --overlay: rgb(3 7 14 / 76%);
  --shadow: 0 4px 14px rgb(0 0 0 / 16%);
  --dialog-shadow: 0 20px 60px rgb(0 0 0 / 42%);
}

:root[data-theme="light"] {
  color-scheme: light;
  --page: #fff8f2;
  --surface: #fffdfb;
  --surface-raised: #f9efe6;
  --text: #15181e;
  --muted: #575e66;
  --secondary-icon: #5d6c80;
  --border: #e8dcd1;
  --control-border: #8e8075;
  --accent: #f46600;
  --accent-text: #a13e00;
  --accent-fill: #ff8129;
  --accent-hover: #ff9a51;
  --accent-foreground: #211307;
  --accent-subtle: #ffebdb;
  --focus-ring: #a13e00;
  --danger: #9d2424;
  --danger-surface: #ffebe7;
  --success: #226045;
  --success-surface: #e6f3eb;
  --warning: #754306;
  --warning-surface: #fff0d8;
  --overlay: rgb(24 15 10 / 56%);
  --shadow: 0 4px 14px rgb(76 40 15 / 8%);
  --dialog-shadow: 0 20px 60px rgb(76 40 15 / 28%);
}

:root {
  background-color: var(--page);
  color: var(--text);
}