/**
 * Design tokens: colours and type, for light and dark themes.
 * Every colour is a token, so components work in both themes.
 *
 * Redesign (Nov 2026): friendlier and faster for busy households.
 * A soft green-grey ground, one blue accent, and the traffic-light status
 * colours (D9) always paired with words. Figtree for everything; big text
 * and 48 px+ touch targets.
 */

/* Layout: one-column phone app. Title, big summary tiles and cards, bottom sheets for every action, a five-slot tab bar with a big + in the middle. */
:root{
  --bg:#f4f6f3; --surface:#ffffff; --surface-2:#eef1ee; --ink:#17201b; --muted:#56635b; --line:#dfe5e0;
  --accent:#1d5b85; --accent-ink:#ffffff; --accent-soft:#e3eef6; --accent-strong:#164766;
  --red:#8f1d17; --red-bg:#fce4e1; --red-line:#f1c9c4;
  --yel:#6e4800; --yel-bg:#fdf0cc;
  --grn:#22553a; --grn-bg:#ddefe3;
  --badge:#b3261e; --badge-ink:#ffffff;
  --scrim:rgba(14,22,18,.5); --shadow:0 10px 30px rgba(20,35,28,.16); --fab-shadow:0 8px 20px rgba(29,91,133,.35);
  --bar:#17201b; --bar-ink:#ffffff;
  --f-display:"Figtree",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --f-body:"Figtree",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:24px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f1512; --surface:#18211c; --surface-2:#1f2a24; --ink:#e6ede8; --muted:#9aa89f; --line:#2b3831;
  --accent:#7cb9e4; --accent-ink:#08151e; --accent-soft:#1c3446; --accent-strong:#a6d0ee;
  --red:#ff9a91; --red-bg:#3d1f1c; --red-line:#5a2b27;
  --yel:#f3c95e; --yel-bg:#3a2e10;
  --grn:#7fd3a0; --grn-bg:#163321;
  --badge:#ff6b5e; --badge-ink:#1a0806;
  --scrim:rgba(0,0,0,.62); --shadow:0 10px 30px rgba(0,0,0,.5); --fab-shadow:0 8px 20px rgba(0,0,0,.5);
  --bar:#e6ede8; --bar-ink:#0f1512;
  color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#0f1512; --surface:#18211c; --surface-2:#1f2a24; --ink:#e6ede8; --muted:#9aa89f; --line:#2b3831;
  --accent:#7cb9e4; --accent-ink:#08151e; --accent-soft:#1c3446; --accent-strong:#a6d0ee;
  --red:#ff9a91; --red-bg:#3d1f1c; --red-line:#5a2b27;
  --yel:#f3c95e; --yel-bg:#3a2e10;
  --grn:#7fd3a0; --grn-bg:#163321;
  --badge:#ff6b5e; --badge-ink:#1a0806;
  --scrim:rgba(0,0,0,.62); --shadow:0 10px 30px rgba(0,0,0,.5); --fab-shadow:0 8px 20px rgba(0,0,0,.5);
  --bar:#e6ede8; --bar-ink:#0f1512;
  color-scheme:dark }