/* Design tokens. A flat printed timetable: hairline rules, square controls, one yellow action.
   tests/contrast.test.mjs reads this file and checks every text pairing against WCAG AA. */
:root {
  --bg: #EEF0F3; --surface: #FFFFFF; --ink: #0E1116; --ink-2: #4F596A; --line: #CFD4DC;
  --accent: #1B4DFF; --accent-ink: #FFFFFF; --accent-soft: #DDE5FF;
  --go: #FFD400; --go-ink: #14120A; --go-ink-2: #3F3800;
  --ok: #0B6E3A; --warn: #8F4200; --warn-soft: #FFE8D1; --bad: #B42318;
  --f-display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue", sans-serif;
  --f-body: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0D11; --surface: #14171C; --ink: #EEF1F5; --ink-2: #A3ACB9; --line: #2B313A;
    --accent: #84A0FF; --accent-ink: #0A1230; --accent-soft: #1A2550;
    --go: #FFD400; --go-ink: #14120A; --go-ink-2: #3F3800;
    --ok: #4FD58C; --warn: #FFA64D; --warn-soft: #3A2610; --bad: #FF7B7B;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0B0D11; --surface: #14171C; --ink: #EEF1F5; --ink-2: #A3ACB9; --line: #2B313A;
  --accent: #84A0FF; --accent-ink: #0A1230; --accent-soft: #1A2550;
  --go: #FFD400; --go-ink: #14120A; --go-ink-2: #3F3800;
  --ok: #4FD58C; --warn: #FFA64D; --warn-soft: #3A2610; --bad: #FF7B7B;
  color-scheme: dark;
}

/* ---------- scale: every gap, size and rule in the app comes from here ---------- */
:root {
  /* spacing, 4px steps */
  --s0: 2px; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  /* one table row: label | value, amounts right-aligned in DM Mono */
  --row-pad: 10px;
  /* text sizes: label (mono caps), extra small (mono details), secondary, ui (buttons, links, rows), body, lead, heading */
  --fs-label: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-ui: 14px; --fs-md: 15px; --fs-lg: 16px; --fs-xl: 18px;
  /* headings: body font, bold. The display face (Big Shoulders) is used only for the brand and the one page title on the first screen */
  --h: 700 var(--fs-xl)/1.25 var(--f-body);
  --d-brand: 30px; --d-title: clamp(26px, 7.6vw, 36px);
  /* amounts that stand out (a total, a sheet amount): mono, a little larger, never display-sized */
  --fig: 500 var(--fs-xl)/1.2 var(--f-mono);
  /* controls and rules */
  --ctl: 44px; --ctl-lg: 52px; --hair: 1px; --rule: 1.5px; --heavy: 2px; --radius: 0;
  /* the schedule: one time column, used by plan, my day and the payments ledger */
  --time-col: 48px;
  --shell: 560px;
}
@media (min-width: 960px) { :root { --shell: 640px; --time-col: 56px; --fs-md: 16px; --fs-xl: 20px; --d-brand: 36px; } }