/* Copied verbatim from Sam Workflow (pd-live origin/main 9073b821) static/wf/tokens.css. Do not edit: override in styles.css. */
/* The design tokens for every page: Trang's prototype (18.10.2026), her values exactly, light and dark. Named --wf-*
   so nothing clashes with app.css's names, and this file is the single source of every colour, shadow, radius, font
   and size: app.css maps Trang's own names (--bg, --panel, --ink, ...) and Sam's older names (--navy, --accent,
   --line, ...) onto these, and frame.css, tax.css and desktop.css read them directly. base.html links this file on
   every page. Light on :root (the default, as in Trang's prototype), dark on :root[data-theme="dark"]; wf/theme.js
   sets data-theme on <html> before the first paint. Fonts are Trang's system stacks, with "Segoe UI" added before the
   generic sans-serif for Windows (a recorded deviation). No web fonts, no url(). tests/test_wf_tokens.py names any
   token that goes missing. */
:root {
  --wf-zoom: 1;   /* the page's size scale: .8 on Home and the month page (app.css, fb19/SIZES.md) */
  /* Trang's colours: monochrome greys; status colours are the only hues */
  --wf-bg: #f0f0f0;
  --wf-panel: #ffffff;
  --wf-panel2: #eeeeee;
  --wf-raise: #ededed;
  --wf-border: #e7e7e7;
  --wf-border2: #e3e3e3;
  --wf-ink: #171717;
  --wf-muted: #777777;
  --wf-faint: #9b9b9b;
  --wf-btn: #252525;
  --wf-btn-ink: #ffffff;
  --wf-badge: #ededed;
  --wf-badge-ink: #666666;
  --wf-good: #149059;
  --wf-good-soft: #e7f6ee;
  --wf-warn: #b26a00;
  --wf-warn-soft: #fdf2e0;
  --wf-bad: #d6453d;
  --wf-bad-soft: #fdecec;
  /* her fixed colours, kept here so every page can theme them */
  --wf-btn-hover: #2e2e2e;
  --wf-active: #eeeeee;
  --wf-good-line: #bfe5d1;
  --wf-panel-line: transparent;
  --wf-row-flag-hover: #fbe2e0;
  --wf-pill: #eeeeee;
  --wf-pill-hover: #e7e7e7;
  --wf-home-bg: #fafafa;
  --wf-toast: #252525;
  --wf-toast-ink: #ffffff;
  --wf-chat-me: #252525;
  --wf-chat-me-ink: #ffffff;
  --wf-glass: rgba(255, 255, 255, .82);
  --wf-glass-line: rgba(20, 20, 20, .07);
  --wf-glass-pill: rgba(255, 255, 255, .72);
  --wf-overlay: rgba(16, 16, 16, .16);
  --wf-backdrop: rgba(0, 0, 0, .25);
  --wf-shimmer: rgba(255, 255, 255, .55);
  /* shadows (elevation) */
  --wf-shadow-panel: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 20px rgba(0, 0, 0, .04);
  --wf-shadow-card: 0 1px 2px rgba(0, 0, 0, .04), 0 5px 16px rgba(0, 0, 0, .04);
  --wf-shadow-btn: 0 1px 2px rgba(0, 0, 0, .12);
  --wf-shadow-seg: 0 1px 2px rgba(0, 0, 0, .1);
  --wf-shadow-demo: 0 8px 28px rgba(0, 0, 0, .12);
  --wf-shadow-menu: 0 4px 10px rgba(0, 0, 0, .08), 0 16px 40px rgba(0, 0, 0, .14);
  --wf-shadow-pop: 0 18px 40px -12px rgba(0, 0, 0, .22);
  --wf-shadow-sheet: -12px 0 32px rgba(0, 0, 0, .08);
  --wf-shadow-drawer: -14px 0 44px rgba(0, 0, 0, .12);
  --wf-shadow-toast: 0 10px 30px rgba(0, 0, 0, .18);
  --wf-shadow-dialog: 0 30px 90px rgba(0, 0, 0, .25);
  --wf-shadow-lift: 0 10px 26px -12px rgba(0, 0, 0, .18);
  /* radii */
  --wf-radius-pill: 999px;
  --wf-radius-chip: 5px;
  --wf-radius-tab: 6px;
  --wf-radius-nav: 7px;
  --wf-radius-btn: 8px;
  --wf-radius-card: 9px;
  --wf-radius-row: 10px;
  --wf-radius-ocard: 11px;
  --wf-radius-panel: 12px;
  --wf-radius-strip: 14px;
  --wf-radius-home: 16px;
  --wf-radius-ask: 20px;
  --wf-radius-paper: 3px;
  /* type */
  --wf-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", sans-serif;
  --wf-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --wf-tracking: -.15px;
  --wf-fs-body: 13px;
  --wf-fs-h1: 23px;
  --wf-fs-h2: 13px;
  --wf-fs-section: 17px;
  --wf-fs-th: 11px;
  --wf-fs-eyebrow: 10.5px;
  --wf-fs-chip: 12px;
  --wf-fs-btn: 12px;
  --wf-fs-btn-sm: 12px;
  --wf-fs-small: 12px;
  /* the shell */
  --wf-rail-demo: 316px;
  --wf-rail-nav: 236px;
  --wf-rail-icon: 56px;
  --wf-content-max: 1120px;
  --wf-side: 420px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --wf-zoom: 1;
  --wf-bg: #181818;
  --wf-panel: #202020;
  --wf-panel2: #181818;
  --wf-raise: #181818;
  --wf-border: #3a3a3a;
  --wf-border2: #3a3a3a;
  --wf-ink: #e9e9e9;
  --wf-muted: #bababa;
  --wf-faint: #a1a1a1;
  --wf-btn: #ededed;
  --wf-btn-ink: #171717;
  --wf-badge: #181818;
  --wf-badge-ink: #bababa;
  --wf-good: #3ec27f;
  --wf-good-soft: rgba(62, 194, 127, .12);
  --wf-warn: #e3a443;
  --wf-warn-soft: rgba(227, 164, 67, .12);
  --wf-bad: #f2716a;
  --wf-bad-soft: rgba(242, 113, 106, .12);
  --wf-btn-hover: #ffffff;
  --wf-active: #181818;
  --wf-good-line: rgba(62, 194, 127, .3);
  --wf-panel-line: rgba(255, 255, 255, .07);
  --wf-row-flag-hover: rgba(242, 113, 106, .18);
  --wf-pill: #2b2b2b;
  --wf-pill-hover: #343434;
  --wf-home-bg: #181818;
  --wf-toast: #181818;
  --wf-toast-ink: #e9e9e9;
  --wf-chat-me: #e9e9e9;
  --wf-chat-me-ink: #111111;
  --wf-glass: rgba(22, 22, 26, .84);
  --wf-glass-line: rgba(255, 255, 255, .07);
  --wf-glass-pill: rgba(29, 29, 34, .8);
  --wf-overlay: rgba(16, 16, 16, .16);
  --wf-backdrop: rgba(0, 0, 0, .25);
  --wf-shimmer: rgba(255, 255, 255, .07);
  --wf-shadow-panel: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 8px 24px rgba(0, 0, 0, .35);
  --wf-shadow-card: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 8px 24px rgba(0, 0, 0, .35);
  --wf-shadow-btn: none;
  --wf-shadow-seg: 0 1px 2px rgba(0, 0, 0, .1);
  --wf-shadow-demo: 0 8px 28px rgba(0, 0, 0, .5);
  --wf-shadow-menu: 0 4px 10px rgba(0, 0, 0, .08), 0 16px 40px rgba(0, 0, 0, .14);
  --wf-shadow-pop: 0 18px 40px -12px rgba(0, 0, 0, .22);
  --wf-shadow-sheet: -12px 0 32px rgba(0, 0, 0, .08);
  --wf-shadow-drawer: -14px 0 44px rgba(0, 0, 0, .12);
  --wf-shadow-toast: 0 10px 30px rgba(0, 0, 0, .18);
  --wf-shadow-dialog: 0 30px 90px rgba(0, 0, 0, .25);
  --wf-shadow-lift: 0 10px 26px -12px rgba(0, 0, 0, .18);
  color-scheme: dark;
}