:root {
  --paper: #EEF2EF;
  --surface: #FFFFFF;
  --ink: #18221D;
  --muted: #5B6A62;
  --line: #D3DCD6;
  --accent: #1E6A4C;
  --accent-ink: #FFFFFF;
  --tag: #F4C531;
  --tag-ink: #2A2306;
  --short: #B93A26;
  --short-soft: #F8E1DC;
  --ok: #2D7A53;
  --ok-soft: #DCEFE4;
  --prio-thinking: #7C8893; --prio-delayed: #A8681A; --prio-want: #3A6BD6; --prio-planned: #1E6A4C; --prio-critical: #C2321F;
  /* Fonts: option 1 is the default. Pick another with <html data-font="2"> or "3" (see the sets below). */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-num: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
  --num-weight: 700;
  /* Type scale: the only place font sizes live. Phones get the second set (see below). */
  --fs-label: 13px;      /* uppercase labels, table heads, tags, pills */
  --fs-small: 15px;      /* notes, hints, secondary lines, chips */
  --fs-body: 17px;       /* default text, inputs, buttons */
  --fs-name: 19px;       /* item names */
  --fs-num: 20px;        /* numbers in steppers and totals */
  --fs-heading: 15px;    /* section headings */
  --fs-modal-title: 22px;
  --fs-title: 28px;      /* app name */
  --fs-glyph: 24px;      /* stepper + / − and other icon-like characters */
  --fs-glyph-small: 18px;
  --grouphead-height: 52px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #111714; --surface: #19211D; --ink: #E4EBE7; --muted: #92A39A; --line: #2B3731;
    --accent: #5BC497; --accent-ink: #0D1A13; --tag: #E5B828; --tag-ink: #221C03;
    --short: #F07F6A; --short-soft: #3A1F1A; --ok: #6FD3A0; --ok-soft: #173326;
    --prio-thinking: #8E9AA4; --prio-delayed: #E0A458; --prio-want: #7FA4F5; --prio-planned: #5BC497; --prio-critical: #FF7A63;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #111714; --surface: #19211D; --ink: #E4EBE7; --muted: #92A39A; --line: #2B3731;
  --accent: #5BC497; --accent-ink: #0D1A13; --tag: #E5B828; --tag-ink: #221C03;
  --short: #F07F6A; --short-soft: #3A1F1A; --ok: #6FD3A0; --ok-soft: #173326;
    --prio-thinking: #8E9AA4; --prio-delayed: #E0A458; --prio-want: #7FA4F5; --prio-planned: #5BC497; --prio-critical: #FF7A63;
}
@media (max-width: 700px) {
  :root { --fs-body: 18px; --fs-small: 16px; --fs-name: 20px; --fs-glyph: 26px; --grouphead-height: 56px; }
}
/* Font pairings. Option 1 (the :root default) = Bricolage Grotesque / Inter / JetBrains Mono. */
/* Option 2: rounded and warm. */
:root[data-font="2"] {
  --font-display: "Fredoka", "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, sans-serif;
  --font-num: "Nunito", system-ui, sans-serif;
  --num-weight: 800;
}
/* Option 3: built for easy reading (Lexend headings, Atkinson Hyperlegible text and numbers). */
:root[data-font="3"] {
  --font-display: "Lexend", "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
  --font-num: "Atkinson Hyperlegible", system-ui, sans-serif;
  --num-weight: 700;
}