/* tokens.css — THE PACKAGE'S TOKEN FILE (AF-TOKENS.md; AF-DESIGN-SYSTEM.md §4, §6; [AF-111] (4), [AF-114] (2), (3)).
   The package ships NO look: the semantic set's VALUES come from the app's registered theme (Theme/tokens.css, linked after
   this file) or, for the gallery and the preview page only, from harness.css. This file carries what is the package's:
   the fixed tokens (breakpoints, container names), the component tokens with the harness's defaults, and the LEGACY
   mapping (AF-TOKENS.md §6) — every name the lifted Synergy sheets still read, each resolved onto the closed semantic set
   so the sheets render under any theme. A legacy name is retired when its last reader in components.css goes; a theme
   (Synergy's, for one) may re-pin a legacy name to its own exact value under its --app- group.
   The lints (tools/af/lint-design.sh) do not read this file; a component sheet reads only --surface-*, --text-*, --border-*,
   --accent-*, --state-*, --category-*, --focus-*, --shape-*, --elevation-*, --space-*, --type-*, --target-min, --motion-*,
   the component tokens below, and the legacy names until they retire. */

/* Geist (Vercel) — vendored variable woff2 under wwwroot/fonts (SIL OFL 1.1, see fonts/OFL.txt): the face Synergy's theme
   names in --type-family; an asset the package carries, not a value it imposes (the harness theme names system-ui). */
@font-face {
    font-family: 'Geist Variable';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/Geist-Variable.woff2') format('woff2');
}
@font-face {
    font-family: 'Geist Mono Variable';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/GeistMono-Variable.woff2') format('woff2');
}

:root { color-scheme: light; }   /* Q286: the root declares its scheme; theme.js toggles .dark on this element */
.dark { color-scheme: dark; }

/* ===================== FIXED — the package's, never a theme's (AF-TOKENS.md §2 "Breakpoints") ===================== */
:root {
    /* [AF-36], [AF-114] (4): the breakpoints are CONTAINER widths, spelled once here as the names the sheets, the JS and the
       conformance harness read; every query in the package spells the same numbers. extra-wide is declared for its row. */
    --bp-compact: 639px;        /* compact: width <= 639 */
    --bp-medium: 640px;         /* medium: 640 <= width <= 1023 */
    --bp-wide: 1024px;          /* wide: 1024 <= width (to 1439 once extra-wide lands) */
    --bp-extra-wide: 1440px;    /* extra-wide: width >= 1440 (row) */
    --cq-page: af-page;         /* the page shell's container name */
    --cq-block: af-block;       /* a grammar block's own container name */
    --type-mono-notch: 0.9375;  /* d-anatomy ([AF-187]): the identifier face's size as a share of body (15/16) */
}

/* ===================== DERIVED — the package's arithmetic over the theme's tokens ([AF-131]; AF-TOKENS.md §2) ===
   A theme writes the ladder as three parts per role and the space scale as a base and a ratio; the package composes the
   font shorthand --type-<role> and derives the rungs --space-1 … --space-8 here, once, for every theme — the browser does
   the arithmetic, so registration computes nothing and the harness, a fixture and an app's Theme/tokens.css all read the
   same lines. The density multipliers (AF-DESIGN-SYSTEM.md §3.1a; DensityProfiles.Of) are set where the page declares its
   profile; the derivation is declared on :root AND on every [data-density] element so it re-evaluates there with that
   profile's multiplier (a custom property inherits its computed value; declared on :root alone it would never see the
   page's). space.2 is the base; each rung is the ratio times the one below; space.1 is the base over the ratio.
   The four profile lines are the package's DEFAULT ([AF-468]): a theme's per-density block, linked after this file,
   may declare --density-type and --density-space, and the later rule wins on the element the derivation reads them at. */
:root { --density-type: 1; --density-space: 1; }
[data-density="standard"] { --density-type: 1; --density-space: 1; }
[data-density="dense"] { --density-type: .92; --density-space: .85; }
[data-density="clinical"] { --density-type: 1.12; --density-space: 1.15; }
[data-density="public"] { --density-type: 1.12; --density-space: 1.25; }
:root, [data-density] {
    --space-2: calc(var(--space-base) * var(--density-space));
    --space-1: calc(var(--space-2) / var(--space-ratio));
    --space-3: calc(var(--space-2) * var(--space-ratio));
    --space-4: calc(var(--space-3) * var(--space-ratio));
    --space-5: calc(var(--space-4) * var(--space-ratio));
    --space-6: calc(var(--space-5) * var(--space-ratio));
    --space-7: calc(var(--space-6) * var(--space-ratio));
    --space-8: calc(var(--space-7) * var(--space-ratio));
    /* AF-2070 (Batch A, [AF-2174]): THE BLOCK-TITLE GAP — a block's heading stands 16 px above its plane at Standard (was
       space.2, 8 px; Ken read the titles as crowding their planes), twice the base at the density so it scales as the scale does */
    --block-title-gap: calc(var(--space-2) * 2);
    --type-title: var(--type-title-weight) calc(var(--type-title-size) * var(--density-type))/var(--type-title-leading) var(--type-family);
    --type-figure: var(--type-figure-weight) calc(var(--type-figure-size) * var(--density-type))/var(--type-figure-leading) var(--type-family);
    /* d-cards-dates (row 211 (b), audit #5, [AF-410]): the card's lead column holds a clock at the figure rung on one line —
       the floor --card-lead, else four and a half of the figure's em at the density (*12:00 pm* is 3.9 in Harbor's face, 4.2 in Arial), so the
       column scales with the type it holds; one measure for every card of the list, so the cards keep one geometry ([AF-139] (a)) */
    --card-lead-measure: max(var(--card-lead), calc(var(--type-figure-size) * var(--density-type) * 4.5));
    --type-heading: var(--type-heading-weight) calc(var(--type-heading-size) * var(--density-type))/var(--type-heading-leading) var(--type-family);
    --type-label: var(--type-label-weight) calc(var(--type-label-size) * var(--density-type))/var(--type-label-leading) var(--type-family);
    --type-body: var(--type-body-weight) calc(var(--type-body-size) * var(--density-type))/var(--type-body-leading) var(--type-family);
    --type-control: var(--type-control-weight) calc(var(--type-control-size) * var(--density-type))/var(--type-control-leading) var(--type-family);
    --type-caption: var(--type-caption-weight) calc(var(--type-caption-size) * var(--density-type))/var(--type-caption-leading) var(--type-family);
    /* d-anatomy ([AF-187]; [AF-139] (a) "the mono notch"): an identifier face inline sits one notch below body — the body
       rung's weight and leading at the body size times the notch, in the theme's mono family; the notch is the package's (15/16) */
    --type-identifier: var(--type-body-weight) calc(var(--type-body-size) * var(--density-type) * var(--type-mono-notch))/var(--type-body-leading) var(--type-family-mono);
}

/* ===================== COMPONENT — a knob one component needs (AF-TOKENS.md §3); the defaults are the harness's ====== */
:root {
    --modal-width-small: 480px; --modal-width-standard: 640px; --modal-width-wide: 780px; --modal-width-extra: 900px;
    --modal-header: plain; --modal-footer: plain; --icon-stroke: 1.5px;
    --rail-width-expanded: 208px; --rail-width-collapsed: 56px;
    --segment-track: var(--surface-inset); --segment-active: var(--surface-plane);
    --segment-active-shadow: var(--elevation-plane);
    /* the inline banner's plane and start edge (p-public [AF-215]): surfaceless under Public, blocks.css sets both transparent there */
    --banner-inline-surface: transparent; --banner-inline-edge: var(--border-strong);
    /* the 1 px edge every plane draws (d-ops-detail, row 101; [AF-254]): NONE in light — the plane's face is its shadow
       (p-shell-faces, row 189; [AF-372]); the border default in dark, where a theme sets its hairline (Harbor: #2b3639)
       because its shadow alone does not separate a plane from a near-black canvas. The 1 px box stays: no reflow between schemes */
    --plane-edge: transparent;
    /* AF-2026 ([AF-2056]): the app's mark on the canvas, one background layer the shell draws behind every plane
       (blocks.css .af-appshell::before) — the package draws nothing; a theme writes it in both schemes */
    --canvas-image: none;
    /* the section card's content inset (Q363 / Q389: one inset app-wide; the rail column's deeper one) */
    --section-card-inset: var(--space-3) var(--space-4); --section-card-inset-rail: var(--space-3) var(--space-6);
    /* the accent's 3 px edit ring (a shadow, never a border — zero reflow) and the selection wash */
    --accent-ring: 0 0 0 3px var(--accent-muted);
    --selection-wash: var(--accent-muted);
    /* the document reader's search hit and the hold banner (Synergy's amber family under the warning role) */
    --hit-wash: var(--state-warning-tint); --hold-tint: var(--state-warning-tint); --hold-seam: var(--state-warning);
    /* the modal backdrop and the lightbox scrim, which is dark in both schemes, and the ink that reads on it */
    --scrim-spread: 0 0 0 100vmax var(--surface-scrim);   /* d-clinical-compact (row 232): a bottom sheet's scrim, as its own shadow, so nothing but the sheet need be drawn */
    --surface-scrim: rgb(23 23 23 / 0.45); --surface-scrim-deep: rgb(23 23 23 / 0.78); --surface-scrim-band: rgb(23 23 23 / 0.55);
    --scrim-ink: #c9c6bf; --scrim-ink-strong: #f2f0ec; --scrim-ink-muted: rgb(242 240 236 / 0.45); --scrim-ink-inverse: #1b1a18;
    --scrim-line-faint: rgb(242 240 236 / 0.14); --scrim-line-soft: rgb(242 240 236 / 0.22); --scrim-line: rgb(242 240 236 / 0.25);
    --scrim-line-strong: rgb(242 240 236 / 0.38); --scrim-thumb: rgb(242 240 236 / 0.35);
    --scrim-well: rgb(255 255 255 / 0.12); --scrim-well-hover: rgb(255 255 255 / 0.1); --scrim-track: rgb(255 255 255 / 0.08);
    /* the org logo box: a white ground in both schemes (a logo is drawn for white) and its caption strip */
    --logo-ground: #ffffff; --logo-strip: rgb(255 255 255 / 0.92);
    /* color-mix's light base for the chip and role tints */
    --mix-white: #ffffff;
    /* the metric strip's pre-token inks (Synergy's as computed today: undeclared --gray-* fell to these fallbacks); the row that
       re-points them to the state tokens is a look change and says so */
    --metric-label: #666; --metric-value: #111; --metric-warn: #a35200; --metric-danger: #c31562; --metric-good: #0f7b3d;
    /* the knobs the grammar's sheets and the lifted controls need (AF-TOKENS.md §1: one component, one prefix); today's values */
    --focus-ring-width: 2px; --focus-ring-offset-width: 1px; --accent-ring-soft: var(--accent-ring);
    --page-max-width: 1280px; --scrollbar-size: 8px; --splash-size: 8rem; --splash-top: 20vh; --splash-text-drop: 3.25rem; --splash-text-nudge: 0.2rem;
    --block-edge: 3px; --block-edge-thin: 2px; --block-mark-size: 10px; --block-mark-gap: 2px; --tab-underline: 2px; --badge-inset: 1px 6px;
    --toolbar-search-min: 160px; --ladder-step-min: 7.5rem; --panel-width: 280px; --panel-width-narrow: 240px; --panel-width-wide: 320px; --panel-width-side-narrow: 320px; --panel-width-side-narrow-medium: 256px; --panel-sheet-max: 70dvh; --empty-text-max: 40ch; --timeline-at-min: 5ch; --timeline-history-at: 7.5rem; --act-row-height: 2.5rem; --act-row-glyph: 1.125rem;
    --board-column-min: 48px; --board-column-min-width: 220px; --board-column-max: calc(100dvh - 4rem); --cal-day-min: 88px; --cal-day-min-medium: 64px; --cal-date-min: 22px; --stepper-num-size: 20px; --stepper-mark-size: 12px; --stepper-mark-current: 18px; --stepper-mark-column: 24px; --card-fact-glyph: 20px; --meter-width: 360px;
    --metric-strip-inset: 6px; --metric-strip-gap: 6px;
    --metric-tile-min: 7rem;   /* AF-2038: Harbor's filter tile is fixed at its content, never under 7 rem (the preview's `.metric`) */
    /* AF-2071 ([AF-1042] (4)): every scroller shows its bar — the thumb's length is the content's, its place the reader's; a Harbor-toned
       track where the OS would overlay-hide it (app.css's `*` rule) */
    --scrollbar-thumb: var(--border-strong); --scrollbar-track: var(--surface-inset);
    --listgrid-resizer-size: 15px; --listgrid-resizer-hit: 3px; --listgrid-cell-min: 40px; --listgrid-cell-x: 14px; --listgrid-scent-size: 12px;
    --listgrid-row-y: 11px; --listgrid-row-y-dense: 3px; --listgrid-empty-height: 171px; --listgrid-empty-inset: 28px; --listgrid-card-y: 10px;
    --card-lead: 9rem; --repeat-name: 13rem; --card-label: 7rem; --card-acts: 12.5rem; --card-label-compact: 6rem; --measure-clinical: 61rem;   /* d-anatomy ([AF-186]): the card's lead column, its label column and its acts column — fixed, so every card keeps one geometry */
    --q-meter-min: 160px; --q-test-inset: 3px 10px; --q-gap: 6px; --q-choice-x: 14px; --q-choice-min: 36px; --q-radio-gap: 10px; --q-radio-size: 14px; --q-number-width: 9em; --q-select-max: 280px;
    --q-card-radio-size: 20px; --q-card-radio-ring: 5px;   /* d-nits (row 202, the review's #20; J1b exam-dbq-id-opinion): an answer card's radio, J1b's 20 px with its 5 px chosen ring */
    --jane-seat-height: 29px; --jane-pulse: 1.2s; --jane-shimmer: 2.3s; --jane-breathe: 2.4s; --jane-pulse-easing: ease-in-out; --jane-shimmer-easing: linear;
    --doc-heading-cap: 1.08em; --doc-heading-cap-low: 1em; --doc-heading-above: 0.9em; --doc-heading-below: 0.35em; --doc-rule-space: 0.8em; --doc-para-space: 0.3em;
    --doc-list-indent: 1.6em; --doc-list-space: 0.15em; --doc-list-space-below: 0.2em;
    --docv-height: 70vh; --docv-gap: 10px; --docv-bar-min: 38px; --docv-act-inset: 3px 8px; --docv-search-basis: 180px; --docv-lane-width: 224px; --docv-lane-width-compact: 184px;
    --docv-pill-gap: 5px; --docv-outline-indent: 28px; --docv-outline-indent-2: 36px; --docv-page-gap: 18px; --docv-page-max: 920px; --docv-indicator-x: 14px; --docv-indicator-inset: 9px;
    --docv-text-max: 760px; --docv-text-inset: 22px 28px 40px; --docv-current-offset: 3px; --docv-h1-size: 15px; --docv-h3-size: 13px;
    --cite-ring: 0 0 0 4px var(--accent-muted); --mark-ring: 0 0 0 4px var(--hit-wash); --radio-dot-inset: inset 0 0 0 3px var(--surface-plane);
    --focus-inset-ring: inset 0 0 0 2px var(--accent-action); --statusdot-ring: 0 0 0 1px var(--border-default); --chip-inset-ring: inset 0 0 0 1px var(--border-emphasis);
    --row-halo: 0 0 0 4px var(--surface-hover); --row-halo-wide: 0 0 0 8px var(--surface-hover); --stop-current-ring: 0 0 0 2px var(--surface-plane), 0 0 0 3.5px var(--border-strong);
    --ladder-stop: 18px; --ladder-check-size: 11px;   /* [AF-1037] (CWD-4, Compass CP-395): Harbor's CaseLadder stop, 18 px */
    --ladder-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");   /* [AF-1041] (2): the done stop's check, Lucide `check` as a mask */
    --pill-armed-ring: inset 0 0 0 1.5px var(--border-strong); --row-current-edge: inset 3px 0 0 var(--accent-action); --hit-ring: 0 0 0 1.5px var(--hold-seam);
    --cell-edit-underline: inset 0 -1px 0 0 transparent; --chip-seat-ring: inset 0 0 0 .5px var(--text-ink); --solr-gutter-wash: calc(-1 * var(--solr-gutter, 56px)) 0 0 0 var(--surface-hover);
    --choice-ink-ring: inset 0 0 0 1px var(--text-ink);   /* AF-2308 (CWD-9's request 2): a chosen option's edge, ink, never the accent */
    --spinner-turn: 0.7s; --spinner-easing: linear; --notice-fade: 600ms; --notice-linger: 6s; --notice-fade-easing: ease-in;
    /* p-shell-words (row 178): the reconnect modal's two lines — the framework's geometry and wave, drawn in the action token */
    --reconnect-lines-size: 56px; --reconnect-line-width: 3px; --reconnect-wave: 1.5s; --reconnect-wave-easing: cubic-bezier(0, 0.2, 0.8, 1);
    --reconnect-width: 320px;
    /* d-dark-tokens (row 221, [AF-449]): the seats the light face and the dark comps draw differently, each today's light value; .dark below sets the comps' */
    --rule-page: var(--border-default); --rule-column: var(--border-strong); --track-rest: var(--border-strong); --ladder-rest: var(--border-hairline); --radio-rest: var(--border-emphasis);
    --act-disabled-edge: var(--border-hairline); --act-disabled-edge-plane: var(--act-disabled-edge); --act-disabled-canvas: var(--surface-plane); --meter-rest: var(--surface-inset);
    --card-act-size: calc(var(--type-control-size) * 1.0625);   /* d-act-confirm (row 236, [AF-484]): J1a draws a card's acts a step over the control rung, ink 17 against 16 */
}

/* ===================== LEGACY — Synergy's names mapped onto the closed set (AF-TOKENS.md §6) ======================== */
:root {
    /* surfaces and text */
    --bg-secondary: var(--surface-inset); --tinted-inset: var(--surface-hover);
    --text-tertiary: var(--text-muted); --text-rider: var(--text-faint); --text-on-accent-dark: var(--text-on-ink);
    --gridline: var(--border-hairline); --glyph-faint: var(--text-faint); --tag-border: var(--border-default);
    --hairline-accent: var(--border-strong); --paper: var(--surface-plane); --paper-seam: var(--border-hairline); --paper-edge: var(--border-default);
    --event-bar-text: var(--text-on-accent);
    /* d-harbor (1): the primary seat — accent.action by the law; Synergy re-pins ink under its legacy block (AF-TOKENS.md §6) */
    --primary-fill: var(--accent-action); --primary-ink: var(--text-on-accent);
    /* d-harbor (2), (4): the names the host's own sheets read (Synergy's vocabulary, re-pinned in its theme), so they resolve under any theme */
    --font-sans: var(--type-family); --font-mono: var(--type-family-mono); --text-primary: var(--text-ink); --text-secondary: var(--text-muted); --text-disabled: var(--text-faint);
    --bg-primary: var(--surface-canvas); --bg-hover: var(--surface-hover); --bg-rail: var(--surface-rail); --surface: var(--surface-plane); --radius-md: var(--shape-radius-control);
    --warning: var(--state-warning); --success: var(--state-success); --info: var(--state-info);
    /* the urgency and review families */
    --due-warn: var(--text-body); --due-far: var(--text-muted);
    --attention-tint: var(--state-attention-tint); --attention-seam: var(--state-attention); --attention-mark: var(--state-attention);   /* p-shell-faces (row 189; from row 186): Attention is state.attention on every density, never Synergy's amber ([AF-374]) */
    --warning-tint: var(--state-warning-tint); --review-text: var(--state-warning-text); --review-tint: var(--state-warning-tint); --review-border: var(--state-warning);
    --severity-error-tint: var(--state-attention-tint); --destructive-border: var(--state-attention);
    --pwin-strong: var(--state-success-text); --pwin-weak: var(--state-warning-text);
    --jane-border-muted: var(--accent-ai-border); --jane-dashed: var(--accent-ai-border);
    --stage-pink-team: var(--category-4);
    /* type: Synergy's role codes (TYPE-RAMP.md) onto the ladder; the faces and weights */
    --type-r1: var(--type-title); --type-r2: var(--type-caption); --type-r3-work: var(--type-heading); --type-r3-form: var(--type-heading); --type-r3-confirm: var(--type-heading);
    --type-r4: var(--type-heading); --type-r5: var(--type-body); --type-r6: var(--type-body); --type-r6e: var(--type-body); --type-r7: var(--type-caption);
    --type-c1: var(--type-label); --type-c1-mono: var(--type-label); --type-c2: var(--type-label); --type-c3: var(--type-caption); --type-c4: var(--type-control); --type-c4b: var(--type-control); --type-c4b-dense: var(--type-control); --type-c5: var(--type-caption);
    --type-f1: var(--type-figure); --type-f2: var(--type-figure); --type-f2-mono: var(--type-figure); --type-f3: var(--type-figure); --type-f3-mono: var(--type-figure); --type-f4: var(--type-control); --type-f5: var(--type-body);
    --type-f6: var(--type-figure); --type-f6-phrase: var(--type-heading); --type-f6-input: var(--type-figure);
    --type-t1: var(--type-title); --type-t1-d2: var(--type-heading); --type-t1-file: var(--type-heading); --type-t2: var(--type-heading); --type-t3: var(--type-heading);
    --type-title-tracking: 0;
    --font-regular: 400; --font-medium: 500; --font-semibold: 600;
    --leading-tight: 1.25; --leading-normal: 1.5; --tracking-tight: -0.01em; --tracking-normal: 0;
    --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 2rem;
    --read-xs: 0.75rem; --read-sm: 0.8125rem; --read-base: 0.875rem; --read-md: 1rem; --read-lg: 1.25rem; --read-xl: 1.5rem; --read-2xl: 2rem;
    /* shape: Synergy's drawn radii onto the scale */
    --radius-sm: var(--shape-radius-control); --radius-nav: var(--shape-radius-control); --radius-xs: var(--shape-radius-control); --radius-xs-plus: var(--shape-radius-control);
    --radius-md-plus: var(--shape-radius-control); --radius-2xs: var(--shape-radius-control); --radius-3xs: var(--shape-radius-control); --radius-edge: 0; --radius-edge-soft: 0;
    --shadow-sm: var(--elevation-plane);
    --shadow-dropdown: var(--elevation-overlay); --shadow-menu: var(--elevation-overlay); --shadow-panel: var(--elevation-overlay); --shadow-lightbox: var(--elevation-overlay);
    --shadow-tip: var(--elevation-raised); --shadow-tip-deep: var(--elevation-overlay); --shadow-drag: var(--elevation-raised); --shadow-receipt: var(--elevation-raised);
    --shadow-button: var(--elevation-plane); --shadow-ink-button: var(--elevation-plane); --shadow-sticky-edge: var(--elevation-raised);
    /* motion */
    --motion-duration-slow: var(--motion-duration-base);
    /* density */
    --space-12: var(--space-8); --space-16: var(--space-8);
    --card-inset: var(--section-card-inset); --card-inset-rail: var(--section-card-inset-rail);
}

/* d-dark-tokens (row 221, [AF-449]): THE PACKAGE'S DARK PAIRS, after every :root block they answer (same specificity, so the later wins; a theme, linked later, still wins).
   A theme's border.default is a control's 3:1 edge, far brighter in dark than the rules the comps draw on a near-black canvas: the page's rules take the hairline (J1a's bar #272f32), a
   column's rule a softer default (J3a #5b6a6e), a track at rest the plane's edge (J3a #2b3639). The metric strip's pre-token inks and color-mix's white base were light literals ([AF-254]'s
   edge sat above :root, which overwrote it: it stands here now). A disabled act on the canvas is a shade above it (J3a #131b1d), never a plane. */
.dark {
    --plane-edge: var(--border-default);
    --rule-page: var(--border-hairline); --rule-column: color-mix(in srgb, var(--border-default) 55%, var(--surface-plane)); --track-rest: var(--plane-edge); --ladder-rest: var(--plane-edge); --radio-rest: var(--border-default);
    --act-disabled-edge: var(--plane-edge); --act-disabled-edge-plane: color-mix(in srgb, var(--border-default) 20%, var(--surface-plane)); --act-disabled-canvas: color-mix(in srgb, var(--surface-plane) 40%, var(--surface-canvas)); --meter-rest: var(--segment-track);
    --metric-label: var(--text-muted); --metric-value: var(--text-ink); --metric-warn: var(--state-warning-text); --metric-danger: var(--state-attention-text); --metric-good: var(--state-success-text);
    --mix-white: var(--surface-plane); --paper-edge: var(--border-hairline);
}