@font-face{font-family:'Space Grotesk';src:url(../fonts/space-grotesk/SpaceGrotesk-Variable.woff2) format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:'Roboto Mono';src:url(../fonts/space-grotesk/RobotoMono-Variable.woff2) format('woff2');font-weight:100 700;font-display:swap}
/* TaskDash tokens (DESIGN.md). Dark is the base. Light comes from the system or the switch.
   Grayscale is a second, independent switch: data-tone="gray" desaturates the whole page. */
:root{
  --bg:#0a0c0b;--bg-2:#0d100f;--panel:#101413;--panel-2:#151a18;
  --line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.16);
  --text:#edf2ef;--muted:#a7b2ad;--faint:#87928d;
  --accent:#21eb98;--accent-soft:rgba(33,235,152,.13);--accent-line:rgba(33,235,152,.38);--accent-ink:#052b1c;--accent-glow:rgba(33,235,152,.22);
  --logo-d:#ffffff;--overlay:rgba(6,10,8,.74);
  --shadow-card:0 24px 70px rgba(0,0,0,.5);--shadow-pop:0 10px 34px rgba(0,0,0,.38);
  --nav-glass:rgba(10,12,11,.8);--glass:rgba(16,20,19,.82);--dots:rgba(255,255,255,.05);
  --off:#f0924e;--off-soft:rgba(240,146,78,.14);--unr:#4b5c55;--warn:#f5b04c;--bad:#ff7a6b;--bad-soft:rgba(255,122,107,.12);
  --ease:cubic-bezier(.16,1,.3,1);
  --font-sans:'Space Grotesk',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  --font-mono:'Roboto Mono',ui-monospace,'SF Mono',Consolas,monospace;
  --r-card:16px;--r-chip:10px;--r-pill:999px;
  color-scheme:dark;
}
:root[data-mode=light]{
  --bg:#f4f6f5;--bg-2:#ecf0ee;--panel:#ffffff;--panel-2:#f4f7f5;
  --line:rgba(12,22,17,.1);--line-2:rgba(12,22,17,.2);
  --text:#111614;--muted:#49544f;--faint:#67736d;
  --accent:#0d7c47;--accent-soft:rgba(13,124,71,.11);--accent-line:rgba(13,124,71,.42);--accent-ink:#ffffff;--accent-glow:rgba(13,124,71,.2);
  --logo-d:#0c100e;--shadow-card:0 24px 70px rgba(20,32,26,.14);--shadow-pop:0 10px 34px rgba(20,32,26,.12);
  --nav-glass:rgba(244,246,245,.82);--glass:rgba(255,255,255,.88);--dots:rgba(12,22,17,.07);
  --off:#c2571a;--off-soft:rgba(194,87,26,.1);--unr:#b5c1bb;--warn:#a15c07;--bad:#c0392b;--bad-soft:rgba(192,57,43,.08);
  color-scheme:light;
}
@media (prefers-color-scheme:light){
  :root:not([data-mode=dark]){
    --bg:#f4f6f5;--bg-2:#ecf0ee;--panel:#ffffff;--panel-2:#f4f7f5;
    --line:rgba(12,22,17,.1);--line-2:rgba(12,22,17,.2);
    --text:#111614;--muted:#49544f;--faint:#67736d;
    --accent:#0d7c47;--accent-soft:rgba(13,124,71,.11);--accent-line:rgba(13,124,71,.42);--accent-ink:#ffffff;--accent-glow:rgba(13,124,71,.2);
    --logo-d:#0c100e;--shadow-card:0 24px 70px rgba(20,32,26,.14);--shadow-pop:0 10px 34px rgba(20,32,26,.12);
    --nav-glass:rgba(244,246,245,.82);--glass:rgba(255,255,255,.88);--dots:rgba(12,22,17,.07);
    --off:#c2571a;--off-soft:rgba(194,87,26,.1);--unr:#b5c1bb;--warn:#a15c07;--bad:#c0392b;--bad-soft:rgba(192,57,43,.08);
    color-scheme:light;
  }
}
html[data-tone=gray]{filter:grayscale(1)}

/* scrollbars stay invisible until something is actually being scrolled (theme.js adds .scrolling) */
*{scrollbar-width:thin;scrollbar-color:transparent transparent}
.scrolling{scrollbar-color:var(--line-2) transparent}
html.scrolling{scrollbar-color:var(--faint) transparent}

/* the two appearance switches */
.modes{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--panel)}
.mode-btn{width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--muted);display:grid;place-items:center;font-size:1.02rem;cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease)}
.mode-btn:hover{color:var(--text);background:var(--panel-2)}
.mode-btn[aria-pressed=true]{background:var(--accent-soft);color:var(--accent)}
.mode-btn .ph{pointer-events:none}