/* AuraTrack colour tokens.
   Light is the base. Dark is defined twice, in the prefers-color-scheme block
   (applies when the person's theme is System) and under [data-theme="dark"]
   (applies when Dark is chosen), and the two blocks carry the same tokens.
   Status tones come in three parts: --st-<tone> for the symbol, --st-<tone>-text
   for a label on its tint, --st-<tone>-tint for the soft background. */

:root {
  color-scheme: light;
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #f1f4fa;
  --surface-3: #e9eef7;
  --line: #d9e0ec;
  --line-soft: #e8edf6;
  --ink: #0e1b3d;
  --ink-2: #364567;
  --muted: #62718f;
  /* How far a status icon fades when its count is zero. The same in light and dark, with --muted for the number. */
  --zero-fade: .38;
  --blue: #1565e6;
  --blue-strong: #0d52c4;
  --blue-wash: #e6efff;
  --on-blue: #ffffff;
  --focus: #1565e6;
  --track: #dfe6f2;
  --shadow: 0 1px 2px rgba(14, 27, 61, .06), 0 4px 14px rgba(14, 27, 61, .05);
  --shadow-pop: 0 10px 30px rgba(14, 27, 61, .18), 0 2px 6px rgba(14, 27, 61, .1);
  --scrim: rgba(14, 27, 61, .35);
  --on-fill: #ffffff;
  --attention-bg: #fff7f6;
  --attention-line: #f6d4d1;
  --warn: #c2410c;

  --st-slate: #62718f;   --st-slate-text: #3d4b69;   --st-slate-tint: #ebeff6;
  --st-blue: #1565e6;    --st-blue-text: #0d52c4;    --st-blue-tint: #e3edff;
  --st-amber: #e58a00;   --st-amber-text: #8f5200;   --st-amber-tint: #fff0d2;
  --st-orange: #ee4b17;  --st-orange-text: #b53a0d;  --st-orange-tint: #ffe9df;
  --st-green: #1a9f4b;   --st-green-text: #0d6b30;   --st-green-tint: #def5e6;
  --st-red: #dc2626;     --st-red-text: #b01620;     --st-red-tint: #ffe3e3;
  --st-violet: #9333ea;  --st-violet-text: #6e1fb5;  --st-violet-tint: #f1e5ff;
  --st-teal: #0d9488;    --st-teal-text: #0a6a62;    --st-teal-tint: #d9f4f0;
  --st-stone: #8a8272;   --st-stone-text: #595244;   --st-stone-tint: #eeebe3;

  --mark-overdue: #ee6a00;
  --mark-stale: #62718f;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b1222;
    --surface: #131c32;
    --surface-2: #19243f;
    --surface-3: #212e4d;
    --line: #2b3a5c;
    --line-soft: #223152;
    --ink: #eaf0ff;
    --ink-2: #c3cfea;
    --muted: #93a3c6;
    --blue: #5b9bff;
    --blue-strong: #86b4ff;
    --blue-wash: #1a2b52;
    --on-blue: #06142e;
    --focus: #86b4ff;
    --track: #2a3a5f;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .25);
    --shadow-pop: 0 10px 30px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
    --scrim: rgba(3, 8, 20, .6);
    --on-fill: #ffffff;
    --attention-bg: #2a1a1f;
    --attention-line: #5b2c33;
    --warn: #ffa468;

    --st-slate: #9aa9c8;   --st-slate-text: #c2cde6;   --st-slate-tint: #25314f;
    --st-blue: #5b9bff;    --st-blue-text: #a8c9ff;    --st-blue-tint: #1b2e57;
    --st-amber: #f5a524;   --st-amber-text: #ffd48a;   --st-amber-tint: #3d2d0c;
    --st-orange: #ff6a3d;  --st-orange-text: #ffb399;  --st-orange-tint: #43200f;
    --st-green: #34c26a;   --st-green-text: #8ee5b0;   --st-green-tint: #12361f;
    --st-red: #ff5a5f;     --st-red-text: #ffa7aa;     --st-red-tint: #461a1d;
    --st-violet: #b678ff;  --st-violet-text: #d9b8ff;  --st-violet-tint: #34205a;
    --st-teal: #2fc4b4;    --st-teal-text: #8fe6dc;    --st-teal-tint: #0f3a36;
    --st-stone: #a39c8c;   --st-stone-text: #d3cdbf;   --st-stone-tint: #2d2a24;

    --mark-overdue: #ff9a3c;
    --mark-stale: #9aa9c8;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1222;
  --surface: #131c32;
  --surface-2: #19243f;
  --surface-3: #212e4d;
  --line: #2b3a5c;
  --line-soft: #223152;
  --ink: #eaf0ff;
  --ink-2: #c3cfea;
  --muted: #93a3c6;
  --blue: #5b9bff;
  --blue-strong: #86b4ff;
  --blue-wash: #1a2b52;
  --on-blue: #06142e;
  --focus: #86b4ff;
  --track: #2a3a5f;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .25);
  --shadow-pop: 0 10px 30px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
  --scrim: rgba(3, 8, 20, .6);
  --on-fill: #ffffff;
  --attention-bg: #2a1a1f;
  --attention-line: #5b2c33;
  --warn: #ffa468;

  --st-slate: #9aa9c8;   --st-slate-text: #c2cde6;   --st-slate-tint: #25314f;
  --st-blue: #5b9bff;    --st-blue-text: #a8c9ff;    --st-blue-tint: #1b2e57;
  --st-amber: #f5a524;   --st-amber-text: #ffd48a;   --st-amber-tint: #3d2d0c;
  --st-orange: #ff6a3d;  --st-orange-text: #ffb399;  --st-orange-tint: #43200f;
  --st-green: #34c26a;   --st-green-text: #8ee5b0;   --st-green-tint: #12361f;
  --st-red: #ff5a5f;     --st-red-text: #ffa7aa;     --st-red-tint: #461a1d;
  --st-violet: #b678ff;  --st-violet-text: #d9b8ff;  --st-violet-tint: #34205a;
  --st-teal: #2fc4b4;    --st-teal-text: #8fe6dc;    --st-teal-tint: #0f3a36;
  --st-stone: #a39c8c;   --st-stone-text: #d3cdbf;   --st-stone-tint: #2d2a24;

  --mark-overdue: #ff9a3c;
  --mark-stale: #9aa9c8;
}