/**
 * BillGrid global design tokens (L1): the Signature palette on the app and the site, Warm Ledger on the paper.
 *
 * TOKEN CONVENTION
 * ----------------
 * CANONICAL: the raw tokens are the source of truth and match the
 *   mock design system (docs/mocks/app/assets/css/billgrid.css) name-for-name:
 *     - palette:  --gold*, --sand-*, --ink, --text*, --bg-*, --border*
 *     - radii:    --r-hair / --r-xs / --r-sm / --r-md / --r-lg / --r-xl / --r-2xl / --r-pill
 *     - type:     --fs-xs / --fs-sm / --fs-ui / --fs-body / --fs-h2 / --fs-h1 / --fs-h3 / --fs-dialog-title / --fs-section / --fs-figure / --fs-figure-lg
 *     - status:   --*-bg / --*-fg (draft/sent/paid/overdue/partial)
 *
 * ALIASES: the --color-*, --radius-*, --space-*, --font-size-* families below
 *   are COMPATIBILITY aliases that bridge legacy app CSS. They resolve to the
 *   canonical tokens; do not treat them as a second design system.
 *
 * RULES
 *   - New rules use the CANONICAL names.
 *   - Existing files converge to canonical opportunistically ONLY when they are
 *     already being edited for parity. Do NOT do a global rename: both families
 *     have hundreds of intermixed references and a sweep is pure churn/risk.
 */
/* A customer's document is drawn in this set, Warm Ledger, in every theme, as its PDF is (PaperStylesheet reads this
   file alone), and so is everything drawn on it to edit it (the files line, work chips, notes): the set is declared again
   on the paper, so every token, alias included, resolves to it inside, whatever the Signature block below and dark mode
   set on the page. The paper's own pins (components/document-paper.css, same specificity, later) still win. */
:root,
.paper {
  /* Warm Ledger: the paper's palette (the page's is Signature, below) */
  --gold: #9a7b43;
  --gold-deep: #765a30;
  --gold-bright: #b9974f;
  --gold-soft: #f3ead2;
  --cream: #faf6ea;
  --cream-line: #e8ddc4;

  --sand-25: #fdfcf9;
  --sand-50: #f8f5ee;
  --sand-100: #f1ece1;
  --sand-200: #e6dfd0;
  --sand-300: #d6cdb8;
  --sand-400: #b4a98e;
  --sand-500: #948a6f;
  --sand-600: #6d6452;
  --sand-700: #4a4337;
  --sand-800: #2d2920;
  --sand-900: #1d1a13;

  --ink: #28241c;
  --text: #2b2720;
  --text-muted: #6d6452;
  --text-soft: #9b9279;

  --bg-app: #f4f0e7;
  --bg-panel: #ffffff;
  --bg-hover: var(--sand-100);
  --border: var(--sand-200);
  --border-soft: var(--sand-100);

  --ring: var(--gold);
  --gold-wash: rgba(154, 123, 67, 0.09);
  --chip-bg: rgba(109, 100, 82, 0.12);
  --scrim: rgba(29, 26, 19, 0.42);
  --on-accent: #ffffff;

  --paid-bg: #e9efdd;
  --paid-fg: #4d6a2c;
  --sent-bg: #e3eef0;
  --sent-fg: #2c6a72;
  --draft-bg: #efe8d8;
  --draft-fg: #7a7156;
  --overdue-bg: #f8e6dc;
  --overdue-fg: #b1482a;
  --partial-bg: #f5ecd6;
  --partial-fg: #9a7b1f;
  /* estimate turned into an invoice: violet so it never reads as Paid (status chips) */
  --billed-bg: #ece8f3;
  --billed-fg: #62508f;
  /* client tints (the Time calendar): eight muted hues kept apart from the status palette, a client's own in turn (V238) */
  --client-1-bg: #e4ecf4;
  --client-1-fg: #3f6487;   /* steel */
  --client-2-bg: #f1e8de;
  --client-2-fg: #84603f;   /* clay */
  --client-3-bg: #f4e4ea;
  --client-3-fg: #9b4660;   /* rose */
  --client-4-bg: #e2eee8;
  --client-4-fg: #3d6b55;   /* pine */
  --client-5-bg: #efe5f3;
  --client-5-fg: #7a4c8c;   /* orchid */
  --client-6-bg: #e9ecef;
  --client-6-fg: #56616c;   /* slate */
  --client-7-bg: #e9eee7;
  --client-7-fg: #586b55;   /* sage */
  --client-8-bg: #ebe9f1;
  --client-8-fg: #5f5a7a;   /* dusk */

  --font-sans: "BillGrid Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter,
    system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "BillGrid Serif", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    Georgia, "Times New Roman", serif;
  --font-account-brand: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    Georgia, "Times New Roman", serif;
  --font-wordmark: "BillGrid Wordmark", var(--font-sans);
  --font-wordmark-small: "BillGrid Wordmark Small", var(--font-sans);
  --fs-wordmark: 28px;
  --fs-wordmark-inline: var(--fs-h3);
  --font-display: var(--font-serif);
  --font-display-weight: 400;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* The app's own steps under names no page restyles: the site sets its own --fs-xs/sm/body, but not on the paper,
     which prints with these (PaperStylesheet; components/document-paper.css). */
  --type-xs: 11px;
  --type-sm: 12px;
  --type-body: 14px;
  --fs-xs: var(--type-xs);
  --fs-sm: var(--type-sm);
  --fs-ui: 13px;
  --fs-body: var(--type-body);
  --fs-h2: 15px;
  --fs-h1: 22px;
  /* serif display steps: a group's name (a milestone), a section's title, a figure (the client page's money), a
     headline figure (a tile's, css/components/tiles.css) */
  --fs-h3: 16px;
  --fs-dialog-title: 18px;
  --fs-section: 19px;
  --fs-figure: 22px;
  --fs-figure-lg: 28px;
  --lh: 1.5;

  --r-hair: 2px;
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-2xl: 22px;
  --r-pill: 999px;

  /* Compact inline control height: discount %/$ toggle + mini input, line-item
     cost/qty fields - anything meant to read as a single dense row of controls. */
  /* Standard form control height (.inp, .sel, Tom Select, a .fld-check beside them). */
  --field-h: 38px;
  /* the app's square icon button, a chip's height, the document's action line */
  --icon-btn: 34px;
  --chip-h: 30px;
  --line-h: 48px;
  /* color swatches (Settings > Branding; smaller in the editor's Style row) and the switch (.switch-btn) */
  --swatch-size: 28px;
  --swatch-size-sm: 24px;
  --switch-w: 30px;
  --switch-h: 18px;
  --switch-knob: 14px;
  /* menus and popovers: the gap to what opens them, their widths (a menu, a wide one, the most a popover takes) */
  --pop-offset: 7px;
  --pop-w: 228px;
  --pop-w-wide: 260px;
  --pop-w-max: 320px;
  /* how tall a list scrolls: in a popover, in a dialog (the commands) */
  --pop-list-h: 260px;
  --dialog-list-h: 340px;

  /* the tint of a page's own shadows and hover washes: rgba(var(--shadow-rgb), alpha) */
  --shadow-rgb: 40, 32, 16;
  --shadow-sm: 0 1px 2px rgba(40, 32, 16, 0.05);
  --shadow-raise: 0 1px 2px rgba(40, 32, 16, 0.12);
  --shadow-pop: 0 6px 24px rgba(40, 32, 16, 0.12);
  --shadow-dialog: 0 30px 80px -20px rgba(40, 32, 16, 0.5);
  /* the app's strip along the top of every page, and its height (Signature leaves it out: 0px below) */
  --letterhead-h: 3px;
  --letterhead: linear-gradient(
    90deg,
    var(--gold-deep),
    var(--gold-bright) 60%,
    var(--gold)
  );

  /* the left rail, the app's and Settings' alike, so moving between them never shifts the page */
  --nav-w: 200px;
  --content-max: 1320px;
  --content-max-wide: 1560px;
  --gutter: clamp(20px, 3.5vw, 56px);

  --z-sticky: 30;
  --z-dropdown: 40;
  --z-bulkbar: 55;
  --z-rowmenu: 60;
  --z-scrim: 80;
  --z-drawer: 81;
  --z-dialog: 83;
  --z-popover: 90;
  --z-toast: 95;

  color-scheme: light;

  /* Legacy semantic aliases (existing app CSS) */
  --color-brand: var(--gold);

  --color-bg-main: var(--sand-25);
  --color-bg-panel: var(--bg-panel);
  --color-bg-hover: var(--bg-hover);

  --color-border-subtle: var(--border);
  --color-border-soft: var(--border-soft);
  --color-border: var(--border);
  --color-border-strong: var(--sand-300);
  --color-text: var(--text);
  --color-text-muted: var(--text-muted);
  --color-text-soft: var(--text-soft);

  --color-success: var(--paid-fg);
  --color-warning: var(--partial-fg);
  --color-danger: var(--overdue-fg);

  --font-size-xs: 10px;
  --font-size-sm: var(--fs-xs);
  --font-size-ui: var(--fs-ui);
  --font-size-body: var(--fs-body);
  --font-size-lg: var(--fs-h2);
  --line-height-body: var(--lh);
  --line-height-tight: 1.3;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;

  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);

  --shadow-soft: var(--shadow-pop);
  --focus-ring: 0 0 0 3px var(--gold-soft);
  /* touch: the smallest target a finger hits, and the smallest text a phone types in without zooming the page */
  --tap-min: 44px;
  --fs-touch-min: 16px;

  --layout-max-width: var(--content-max);
  --layout-topbar-height: 50px;
  --layout-mobile-bar-height: 48px;
  --layout-page-padding-x: var(--gutter);
  --layout-page-padding-y: 18px;

  /* Icons (Gridmarks): one native 16px set, scaled by size token. Stroke is in screen px (non-scaling), so a
     step up in size also steps up the weight. Components/bg-icon.css applies these; reference: docs/mocks/app/icons.html. */
  --icon-size-xs: 12px;
  --icon-size-md: 16px;
  --icon-size-lg: 20px;
  --icon-size-xl: 24px;
  --icon-stroke-xs: 1.25px;
  --icon-stroke-md: 1.25px;
  --icon-stroke-lg: 1.5px;
  --icon-stroke-xl: 1.75px;
  /* Space between an icon and its label: chips and counts / buttons and bulk bar / menu rows and nav items. */
  --icon-gap-xs: 4px;
  --icon-gap-sm: 6px;
  --icon-gap-md: 8px;
  --icon-gap-lg: 12px;
  /* Duotone fill of an icon's body shapes (0 = outline only). */
  --icon-tint-hover: 0.12;
  --icon-tint-active: 0.2;

  /* Meters (components/meter.css): what an account uses of a limit, as a bar (storage) or pips (seats, businesses).
     Fill is what's used; amber nearly full; red past the limit; gold only a change being made. Dark mode follows the
     sand and status steps they alias. */
  --meter-fill: var(--sand-600);
  --meter-track: var(--sand-100);
  --meter-edge: var(--sand-300);
  --meter-warn: var(--partial-fg);
  --meter-over: var(--overdue-fg);
  --meter-change: var(--gold);
  --meter-bar-h: 6px;
  --meter-pip: 10px;

  /* Paper mini (components/paper-mini.css): a document drawn at its width and zoomed; a frame shows its top. A user
     sets its own scale and frame height on the element around it. */
  --paper-mini-width: 340px;
  --paper-mini-scale: .6;
  --paper-mini-frame-h: 232px;
  --paper-mini-fade: 56px;

  /* Guide card (components/guide-card.css): the one-next-thing card and its quiet row of steps. */
  --guide-pad: var(--space-6);
  --guide-gap: var(--space-5);
  --guide-step-h: 30px;

  /* Progress path (components/progress-path.css): a stop's dot, the rail between dots, the glyph in a dot. */
  --path-dot: 16px;
  --path-rail: 2px;
  --path-glyph: 10px;

  --duration-fast: 140ms;
  --duration-normal: 200ms;
  --ease-standard: ease;
  --ease-out: cubic-bezier(.2, .7, .2, 1);

  /* Shared with the public site, which sets its own values (outer/site.css), for the parts both draw (the paper
     editor, components/paper-editor.css). Dark mode follows the steps they alias. */
  --line: var(--border);
  --caption: var(--text-muted);
  --paper: var(--sand-50);
  --field-border: var(--sand-300);
  --field-focus: var(--focus-ring);
  --fs-md: var(--fs-h3);
  /* The paper editor's own: a field's wash and a moved figure's glow, the dashed edge of an optional part, the shadow
     of what floats over the paper, the commands' backdrop. */
  --pe-tint: #c9a24b;
  --pe-dash: #766c55;
  --pe-shadow: #282010;
  --pe-scrim: rgba(32, 27, 18, 0.28);
  /* a template's blanks in brackets still to fill, and one sending waits on (paper-editor/clauses.js) */
  --pe-blank: color-mix(in srgb, var(--pe-tint) 30%, transparent);
  --pe-blank-due: color-mix(in srgb, var(--overdue-fg) 16%, transparent);

  /* Primary actions are warm charcoal, the same as the public site; gold stays for brand touches
     and selection (logos, totals, checked controls). Inverts to cream in dark mode. */
  --btn-primary-bg: var(--ink);
  --btn-primary-border: var(--ink);
  --btn-primary-text: var(--bg-panel);
  --btn-primary-hover-bg: #3b352a;
  /* Every other button is a soft fill with no outline (owner 2026-11-05; docs/mocks/app/buttons.html): a tint of the
     sand, so it reads on a card and on the page's own sand alike, in light and dark. */
  --btn-soft: color-mix(in srgb, var(--sand-500) 16%, transparent);
  --btn-soft-hover: color-mix(in srgb, var(--sand-500) 26%, transparent);

  /* The parts of the work, each in its own color ([data-m]: the dashboard, the home page's rail): drawn from the client
     tints and status colors, so they follow the theme. */
  --m-client: var(--client-1-fg);
  --m-proposal: var(--gold-deep);
  --m-contract: var(--billed-fg);
  --m-project: var(--client-4-fg);
  --m-time: var(--client-3-fg);
  --m-expense: var(--client-2-fg);
  --m-invoice: var(--sent-fg);
  --m-paid: var(--paid-fg);
  /* the client's own page (the client hub) wears the client's color: the job starts and ends with them */
  --m-portal: var(--client-1-fg);

  /* The app's sidebar (foundations/app-chrome.css), here in the page's own cream; Signature (below) sets it apart from
     the work in near-black ink. Its ground and rule, its words, the strongest and quietest, a hovered row, the
     row you're on and its edge, a count, the focus ring and the gap inside it, the person's initials, and the plate a
     business's logo sits on (its color, padding and corners).
     A dark sidebar on a light page also sets --side-scheme: dark, for its scrollbar; unset, it follows the page. */
  --side-bg: var(--cream);
  --side-line: var(--cream-line);
  --side-text: var(--text-muted);
  --side-strong: var(--ink);
  --side-soft: var(--text-soft);
  --side-hover: var(--gold-wash);
  --side-active-bg: var(--bg-panel);
  --side-active-fg: var(--gold-deep);
  --side-active-edge: inset 0 0 0 1px var(--cream-line), var(--shadow-sm);
  --side-chip: var(--chip-bg);
  --side-focus: var(--gold);
  --side-ring-gap: var(--gold-soft);
  --side-avatar-bg: var(--gold-deep);
  --side-avatar-fg: var(--cream);
  --side-logo-plate: transparent;
  --side-logo-pad: 0;
  --side-logo-radius: 0;

  /* The rule that marks an open row (a project opened on its client's page): its color, width, and how far it stops
     short of the row's top and bottom. */
  --open-rule: var(--gold-deep);
  --open-rule-w: 3px;
  --open-rule-inset: 0px;

  --status-draft: var(--draft-fg);
  --status-sent: var(--sent-fg);
  --status-paid: var(--paid-fg);
  --status-overdue: var(--overdue-fg);
  --status-info: var(--sent-fg);

  /* The site's dark bands (the announcement, the footer on --sand-900, its newsletter strip on --sand-800): body text,
     the quieter line, the quietest, links, headings, the strip's copy, a rule. */
  --inv-text: #e8e1d0;
  --inv-muted: #a99f84;
  --inv-soft: #8d8268;
  --inv-link: #e3dac7;
  --inv-strong: #faf6ea;
  --inv-copy: #cabfa6;
  --inv-line: #392f1f;

  /* The season's paint, from its art (components/seasonal-touches.css, a plan sale on the site and in the app): night
     plum and the sky behind it, candle gold, moon cream and its dimmer light. A night scene in either theme. */
  --season-night: #3d3146;
  --season-sky: #231b2a;
  --season-gold: #e7c77a;
  --season-cream: #fdf4d8;
  --season-cream-dim: #e6dccb;
}

/* The app and the site in Signature (docs/BRAND_REFRESH.md): the page itself, never the paper, which keeps the set
   above. Only literal values live here; every alias above follows them. */
:root {
  /* The accent is petrol, the brand's own color, not brass (owner, 2026-11-05: "departing from yellowish tones"); the
     gold-named tokens carry it until docs/UPLIFT_PLAN.md M7 renames them. Brass stays the proposal's part color. */
  --gold: #2c6a62;
  --gold-deep: #1f5f58;
  --gold-bright: #3f8a80;
  --gold-soft: #e4efec;
  --cream: #f1f6f5;
  --cream-line: #d6e4e1;
  --m-proposal: #8a6a2c;

  --sand-25: #fcfcfa;
  --sand-50: #f7f7f4;
  --sand-100: #efefeb;
  --sand-200: #e3e4df;
  --sand-300: #cfd1ca;
  --sand-400: #a9aea6;
  --sand-500: #858c86;
  --sand-600: #56615e;
  --sand-700: #3d4846;
  --sand-800: #24302e;
  --sand-900: #0e1a19;

  --ink: #14211f;
  --text: #24302e;
  --text-muted: #56615e;
  --text-soft: #858c86;

  --bg-app: #f5f5f2;

  /* petrol: focus, every security cue and the accent */
  --ring: #0f5b5e;
  --focus-ring: 0 0 0 3px rgba(15, 91, 94, 0.22);
  --gold-wash: rgba(44, 106, 98, 0.09);
  --chip-bg: rgba(86, 97, 94, 0.12);
  --scrim: rgba(14, 26, 25, 0.42);

  --paid-bg: #e6f0e0;
  --paid-fg: #3a6e2b;
  --sent-bg: #e2eef0;
  --sent-fg: #19626a;
  --draft-bg: #eeefeb;
  --draft-fg: #5a6360;
  --overdue-bg: #fbe6e1;
  --overdue-fg: #b23a25;
  /* due soon is orange, so it never reads as the brand's brass */
  --partial-bg: #fcebd9;
  --partial-fg: #9a4d0b;

  --shadow-rgb: 20, 33, 31;
  --shadow-sm: 0 1px 2px rgba(20, 33, 31, 0.05);
  --shadow-raise: 0 1px 2px rgba(20, 33, 31, 0.12);
  --shadow-pop: 0 6px 24px rgba(20, 33, 31, 0.12);
  --shadow-dialog: 0 30px 80px -20px rgba(14, 26, 25, 0.5);

  --btn-primary-hover-bg: #24342f;

  --inv-text: #dde3e0;
  --inv-muted: #a6b3af;
  --inv-soft: #8d9a96;
  --inv-link: #dde3e0;
  --inv-strong: #f1f3ef;
  --inv-copy: #c2ccc9;
  --inv-line: #253634;

  /* the sidebar in near-black ink, a shade under the brand's ink (--ink, the buttons'), so the work beside it reads
     first; a pale petrol marks where you are */
  --side-bg: #151b1a;
  --side-line: rgba(255, 255, 255, 0.07);
  --side-text: #b7c6c3;
  --side-strong: #f4f7f5;
  --side-soft: #849d98;
  --side-hover: rgba(255, 255, 255, 0.06);
  --side-active-bg: rgba(255, 255, 255, 0.1);
  --side-active-fg: #9fd1c6;
  --side-active-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  --side-chip: rgba(255, 255, 255, 0.08);
  --side-focus: #6fb3a8;
  --side-ring-gap: #151b1a;
  --side-avatar-bg: #9fd1c6;
  --side-avatar-fg: #151b1a;
  --side-logo-plate: #fff;
  --side-logo-pad: 3px 6px;
  --side-logo-radius: 6px;
  --side-scheme: dark;

  /* no gold strip along the top: the sidebar carries the brand */
  --letterhead-h: 0px;

  /* an open row's rule: a fine petrol line with room above and below, not an edge */
  --open-rule: #9cc5bd;
  --open-rule-w: 2px;
  --open-rule-inset: 12px;
}

[data-theme="dark"] {
  --btn-primary-hover-bg: #ffffff;
  --gold: #6fb3a8;
  --gold-deep: #9fd1c6;
  --gold-bright: #b7e0d8;
  --gold-soft: #15302c;
  --cream: #101b1a;
  --cream-line: #22332f;
  --m-proposal: #d4b26a;

  --sand-25: #0f1a19;
  --sand-50: #132120;
  --sand-100: #1a2b29;
  --sand-200: #22332f;
  --sand-300: #2f4440;
  --sand-400: #4f625e;
  --sand-500: #7a8b87;
  --sand-600: #a2b0ac;
  --sand-700: #c2ccc9;
  --sand-800: #dde3e0;
  --sand-900: #f1f3ef;

  --ink: #f1f3ef;
  --text: #dde3e0;
  --text-muted: #a2b0ac;
  --text-soft: #788985;

  --bg-app: #0c1615;
  --bg-panel: #132120;
  --bg-hover: #1a2b29;
  --border: #22332f;
  --border-soft: #1a2b29;

  --ring: #6cc3c4;
  --focus-ring: 0 0 0 3px rgba(108, 195, 196, 0.28);
  --gold-wash: rgba(111, 179, 168, 0.13);
  --chip-bg: rgba(194, 204, 201, 0.14);
  --scrim: rgba(0, 0, 0, 0.6);
  --on-accent: #0c1615;

  --paid-bg: #1d3118;
  --paid-fg: #9fcf83;
  --sent-bg: #123239;
  --sent-fg: #7ccbd3;
  --draft-bg: #1c2928;
  --draft-fg: #bcc6c3;
  --overdue-bg: #3c1d16;
  --overdue-fg: #f2a08c;
  --partial-bg: #3a2610;
  --partial-fg: #f0b06d;
  --billed-bg: #2a2438;
  --billed-fg: #b9a8e6;
  --client-1-bg: #19283a;
  --client-1-fg: #93b8db;
  --client-2-bg: #33271c;
  --client-2-fg: #d1ad8a;
  --client-3-bg: #3a1d27;
  --client-3-fg: #e39ab1;
  --client-4-bg: #1b2e25;
  --client-4-fg: #8fc7aa;
  --client-5-bg: #2f2138;
  --client-5-fg: #c9a2db;
  --client-6-bg: #262b30;
  --client-6-fg: #b0bac4;
  --client-7-bg: #252d23;
  --client-7-fg: #b2c4ad;
  --client-8-bg: #26243a;
  --client-8-fg: #b8b2d4;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-raise: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-dialog: 0 30px 80px -20px rgba(0, 0, 0, 0.6);

  /* logos are drawn for white paper */
  --side-logo-plate: #fff;
  --side-logo-pad: 3px 6px;
  --side-logo-radius: var(--r-sm);
  /* the sidebar a step deeper than the canvas */
  --side-bg: #080b0b;
  --side-line: rgba(255, 255, 255, 0.06);
  --side-ring-gap: #080b0b;

  color-scheme: dark;
}

/* What an element stands for, as its --m: [data-m="invoice"] draws in the invoices' color (the site's and the
   dashboard's parts of the work). */
[data-m="client"] { --m: var(--m-client); }
[data-m="proposal"] { --m: var(--m-proposal); }
[data-m="contract"] { --m: var(--m-contract); }
[data-m="project"] { --m: var(--m-project); }
[data-m="time"] { --m: var(--m-time); }
[data-m="expense"] { --m: var(--m-expense); }
[data-m="invoice"] { --m: var(--m-invoice); }
[data-m="paid"] { --m: var(--m-paid); }
[data-m="portal"] { --m: var(--m-portal); }

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
  }
}