:root{
/* --- flash white: the ground. Warmed a touch on cards so nothing is hard #FFF. --- */
--paper-50:#FCFCFB;--paper-100:#F4F4F2;--paper-200:#EFEFEF;--paper-300:#E2E1DE;--paper-400:#CBCAC6;

/* --- dark slate: the ink ramp AND the resting structure colour. --- */
--slate-900:#1E3A44;--slate-800:#284A56;--slate-700:#315762;--slate-550:#426472;--slate-500:#4E7382;--slate-450:#4A6E7D;--slate-400:#5F7F8C;--slate-300:#A8BAC2;--slate-100:#E2EBEF;

/* --- orange: the warm accent. Primary action and "now", nothing else. --- */
--orange-800:#8F3808;--orange-700:#A8430D;--orange-600:#CE5614;--orange-500:#E9631A;--orange-400:#F08A4F;--orange-200:#F9D2B8;--orange-100:#FCEBDF;

/* --- clay: deeper and redder than orange, so "stuck" never reads as "now". --- */
--clay-600:#8C3228;--clay-500:#A64434;--clay-100:#F6E2DD;

/* --- semantic surfaces --- */
--ground:var(--paper-200);
--surface-card:var(--paper-50);
--surface-sunken:var(--paper-300);
--surface-raised:#FFFFFF;
--surface-accent:var(--orange-100);
--surface-inverse:var(--slate-900);
--scrim:rgb(30 58 68 / .48);

/* --- semantic text --- */
--text-body:var(--slate-700);
--text-strong:var(--slate-900);
--text-muted:var(--slate-550);
--text-faint:var(--slate-450);
--text-on-accent:#FFFFFF;
--text-on-inverse:var(--paper-100);
--text-on-done-fill:#FFFFFF;
/* Foregrounds paired with theme-dependent tinted grounds. Never hardcode a
   ramp step on --surface-accent / --accent-quiet: their lightness flips per theme. */
--text-on-accent-surface:var(--orange-700);
--text-on-quiet:var(--orange-700);
/* Accent as TEXT or an icon on the ambient ground (filled buttons use --accent). */
--accent-text:var(--orange-700);
--text-link:var(--orange-700);
--text-link-hover:var(--slate-900);

/* --- semantic lines --- */
--line-hairline:var(--paper-300);
--line-strong:var(--paper-400);
--line-accent:var(--orange-500);
--focus-ring:var(--orange-600);

/* --- interactive --- */
/* Filled surfaces that CARRY TEXT. Deep enough for white at 6:1. */
--accent:var(--orange-700);
--accent-hover:var(--orange-800);
--accent-press:#7A2F05;
--accent-quiet:var(--orange-100);
/* The brand orange at full strength, for fills that carry NO text —
   timer ring, progress fill, chart bars, active tab icon. */
--accent-graphic:var(--orange-500);

/* --- states. done rests into the structure slate; now is the only orange on
       the screen; stuck is clay; later is muted slate. --- */
--state-done:var(--slate-700);--state-done-bg:var(--slate-100);
--state-done-graphic:var(--slate-500); /* @kind color */
--state-now:var(--orange-700);--state-now-bg:var(--orange-100);
--state-now-graphic:var(--orange-500); /* @kind color */
--state-stuck:var(--clay-600);--state-stuck-bg:var(--clay-100);
--state-later:var(--slate-550);--state-later-bg:var(--paper-200);
}
/* Dim theme — evening use and light sensitivity. Slate-based, never black. */
[data-theme="dim"]{
--ground:#16282F;--surface-card:#1E3A44;--surface-sunken:#111F25;--surface-raised:#284A56;
--surface-accent:#3A2A1E;--surface-inverse:var(--paper-100);
--text-body:#DCE6EA;--text-strong:#F2F6F8;--text-muted:#A8BAC2;--text-faint:#96AAB4;
--text-on-accent:#FFFFFF;--text-on-inverse:var(--slate-900);--text-on-done-fill:#0E1B20;
--text-on-accent-surface:#F0A876;--text-on-quiet:#F0A876;--accent-text:#F0A876;
--text-link:#F0A876;--text-link-hover:#F9D2B8;
--line-hairline:#2E5260;--line-strong:#3F6675;--line-accent:var(--orange-400);
--focus-ring:#F08A4F;
--accent:#C24E11;--accent-hover:#D65C18;--accent-press:#A8430D;--accent-quiet:#3A2A1E;--accent-graphic:#F08A4F;
--state-done:#A8C6D2;--state-done-bg:#1B333C;--state-done-graphic:#93B3C1;
--state-now:#F0A876;--state-now-bg:#3A2A1E;--state-now-graphic:#F08A4F;
--state-stuck:#D08A7E;--state-stuck-bg:#33201D;
--state-later:#A8BAC2;--state-later-bg:#1B2E36;
--scrim:rgb(8 16 19 / .64);
}