/*
 * Rawat design tokens — the `three-tiger` theme (docs/spec/03-ui-library.md §3, 05-domain.md §10,
 * T061). It redefines every name `tokens/default.css` declares, block for block, with the Three Tiger
 * design system (`@three-tiger/design-system` 0.1.0): "dark, calm, solid, with one sharp point of
 * red". Nothing outside `src/tokens/` changes when the shell links this file instead of the default
 * one, which is the acceptance of 03-ui-library.md §5.
 *
 * Three-state dark rule, as in the default theme: bare `:root` carries the light values — the design
 * system's cream paper — and the dark values — its 黒橡 ground — are declared twice: once behind
 * `prefers-color-scheme: dark` guarded by `:root:not([data-theme="light"])` so an explicit light
 * choice always wins, and once on `:root[data-theme="dark"]` for an explicit dark choice.
 *
 * Palette, as the design system names it: 黒橡 KUROTSURUBAMI #0B1013 (ink on light, ground on dark),
 * 薄卵色 USUTAMAGO #FDE8D0 (ink on dark), 紅緋 BENIHI #D3381C (the one primary action only; the rail
 * sits on a warm grey, and selection and focus are the brand green — T062),
 * 藍海松茶 AIMIRUCHA #0F4C3A (brand green: ok, brand panels), 深茶 FUKACHA #A48255 (warn), 薄緑
 * USUMIDORI #294023 (info).
 *
 * One value deviates from the letter of the design system, for contrast: `--rw-accent-ink` is white
 * rather than 薄卵色. Primary buttons set a 15px label on 紅緋; cream on it is 4.1:1, white 4.8:1.
 *
 * Type is IBM Plex Sans, served from the shell's brand directory; Japanese falls back to Hiragino and
 * Noto Sans JP. Corners are the design system's tight ones: 4px on controls, 8px on cards and
 * dialogs. Sizes, spacing, density and layout are the default theme's: the brand changes the colour,
 * the type and the corner radius, not the grid.
 */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 300;
  font-display: optional;
  src: url("/brand/three-tiger/fonts/IBMPlexSans-Light.ttf") format("truetype");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("/brand/three-tiger/fonts/IBMPlexSans-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url("/brand/three-tiger/fonts/IBMPlexSans-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url("/brand/three-tiger/fonts/IBMPlexSans-SemiBold.ttf") format("truetype");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url("/brand/three-tiger/fonts/IBMPlexSans-Bold.ttf") format("truetype");
}

:root {
  color-scheme: light;

  /* Ink and surfaces: 黒橡 on light gray ground */
  --rw-ink: #0b1013;
  --rw-ink-2: #4a4540;
  --rw-ink-3: #6c665f;
  --rw-line: #e2e6ea;
  --rw-line-2: #edf0f3;
  --rw-ground: #f4f6f8;
  --rw-card: #ffffff;
  --rw-surface-2: #edf0f2;

  /* Accent. 紅緋, for the one primary action of a view; the label on it is white (see the header). */
  --rw-accent: #d3381c;
  --rw-accent-ink: #ffffff;
  --rw-accent-bg: #f8e5da;

  /* Semantic tones, the design system's status pairs. Status colours are never accent colours (§2 rule 5). */
  --rw-neutral: #4a4540;
  --rw-neutral-bg: #edf0f3;
  --rw-info: #294023;
  --rw-info-bg: #e1ead9;
  --rw-ok: #0f4c3a;
  --rw-ok-bg: #dcebe3;
  --rw-warn: #6e5230;
  --rw-warn-bg: #f4e6d0;
  /* A picture answer that is chosen (T316): the field reports' amber. */
  --rw-chosen: #8a5a00;
  --rw-chosen-bg: #fff4dc;
  --rw-critical: #a42a14;
  --rw-critical-bg: #fbe0d8;
  --rw-critical-ink: #ffffff;

  --rw-focus: #0f4c3a;
  --rw-overlay: rgb(11 16 19 / 48%);

  /* The rail sits back in a calm light grey, and selection is the brand green: 紅緋 stays for the one
     primary action (T062). The literal pairs switch with the colour scheme through `light-dark()`,
     the rest with the tones. */
  --rw-rail-bg: light-dark(#e6e9ec, #15191b);
  --rw-selected: var(--rw-ok);
  --rw-selected-bg: var(--rw-ok-bg);
  --rw-selected-ink: light-dark(#fde8d0, #0b1013);
  /* A submitted field report, waiting to be resolved: the one blue of the Reports page (T074). */
  --rw-rep-submitted-ink: light-dark(#1f4f7a, #9fc3e6);
  --rw-rep-submitted-bg: light-dark(#dde8f3, #15263a);
  /* What a model wrote (T221): a violet no status uses — a gradient for the mark, a tint behind its words. */
  --rw-ai: light-dark(#6d28d9, #c4b5fd);
  --rw-ai-ink: #ffffff;
  --rw-ai-line: light-dark(#e2d6fb, #4c3a78);
  --rw-ai-soft: light-dark(#f6f1ff, #221a33);
  --rw-ai-grad: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #6366f1 100%);
  /* The two posts (D-0010 §12, T363): the radio desk's slate and the store counter's brown, with
     white ink on both. A zone's colour is the same in light and dark and in every theme — it says
     WHICH DESK you are at, and a desk does not change colour when the room's lights go off, nor
     when the suite is dressed in another brand. */
  --rw-zone-dispatch: #2c4a63;
  --rw-zone-store: #5b4228;
  --rw-zone-ink: #ffffff;
  /* Warehouse IoT (T317): one colour per device kind, the "went out" tint, and the camera viewer — a
     black stage with white handles and captions over the picture, whatever the theme. */
  --rw-iot-gate: light-dark(#0f4c3a, #8fd0b2);
  --rw-iot-cam: light-dark(#6d28d9, #c4b5fd);
  --rw-iot-scale: light-dark(#8a5a00, #e2bd78);
  --rw-iot-out: light-dark(#1a5fb4, #8cb8ff);
  --rw-iot-out-bg: light-dark(#e5eefb, #172235);
  --rw-iot-sunk: light-dark(#f7f8f9, #111416);
  --rw-iot-line-2: light-dark(#cfd5db, #3a3d3d);
  --rw-iot-icon-ink: #ffffff;
  --rw-iot-stage: #000000;
  --rw-iot-stage-ink: #ffffff;
  --rw-iot-stage-hint: #111111;
  --rw-iot-stage-tag: rgb(0 0 0 / 60%);
  --rw-iot-stage-edge: rgb(0 0 0 / 40%);
  /* The Analytics page's own charts (T221): one series and its tint, a second measure, and the six
     booking sources in the order their bars stack, checked for colour-blind separation. */
  --rw-viz-bar: light-dark(#2f855a, #48bb78);
  --rw-viz-soft: light-dark(#cfe3d8, #24503a);
  --rw-viz-alt: light-dark(#3182ce, #63b3ed);
  --rw-viz-report: light-dark(#2f855a, #48bb78);
  --rw-viz-maintenance: light-dark(#3182ce, #63b3ed);
  --rw-viz-scan-qr: light-dark(#c05621, #ed8936);
  --rw-viz-scan-rfid: light-dark(#2c7a7b, #4fd1c5);
  --rw-viz-iot: light-dark(#805ad5, #b794f4);
  --rw-viz-manual: light-dark(#b7791f, #ecc94b);
  /* Comparisons (T222): one meaning per colour — attention for what is worse, fine for the rest. */
  --rw-viz-attn: light-dark(#c2410c, #fb923c);
  --rw-viz-fine: light-dark(#aab4bd, #6b7680);
  --rw-viz-fine-soft: light-dark(#e3e7eb, #313a41);
  /* Categorical slots in the validated order (dataviz reference palette), for a part-of-whole chart. */
  --rw-viz-cat-1: light-dark(#2a78d6, #3987e5);
  --rw-viz-cat-2: light-dark(#eb6834, #d95926);
  --rw-viz-cat-3: light-dark(#1baf7a, #199e70);
  --rw-viz-cat-4: light-dark(#eda100, #c98500);
  --rw-viz-cat-5: light-dark(#e87ba4, #d55181);
  --rw-viz-cat-6: light-dark(#008300, #008300);
  --rw-viz-cat-7: light-dark(#4a3aa7, #9085e9);
  /* Where you are, at a glance: the current application is a solid brand-green bar with cream ink,
     the current tab green ink over its green line. */
  --rw-nav-active-bg: var(--rw-ok);
  --rw-nav-active-ink: var(--rw-selected-ink);
  --rw-tab-active-ink: var(--rw-ok);

  /* Type */
  --rw-font-sans: "IBM Plex Sans", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
  --rw-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --rw-text-1: 13px;
  --rw-text-2: 15px;
  --rw-text-3: 17px;
  --rw-text-4: 20px;
  --rw-text-5: 26px;
  --rw-text-base: var(--rw-text-2);
  --rw-leading-tight: 1.25;
  --rw-leading-base: 1.5;
  --rw-weight-regular: 400;
  --rw-weight-medium: 600;
  --rw-weight-bold: 700;
  --rw-tracking-caps: 0.08em;

  /* Space, on a 4px grid */
  --rw-space-1: 4px;
  --rw-space-2: 8px;
  --rw-space-3: 12px;
  --rw-space-4: 16px;
  --rw-space-5: 20px;
  --rw-space-6: 24px;
  --rw-space-7: 32px;
  --rw-space-8: 40px;

  /* Radius: 4px on controls, 8px on cards and dialogs; pills only for tags and avatars */
  --rw-radius-1: 4px;
  --rw-radius-2: 8px;
  --rw-radius-3: 8px;
  --rw-radius-pill: 999px;
  /* The field bar, at the take-screen prototype's sizes (T305). */
  --rw-field-bar-pad: 12px 10px;
  --rw-field-bar-pad-top: 12px;
  --rw-field-bar-gap: 8px;
  --rw-field-bar-control: 40px;
  --rw-field-bar-icon: 20px;
  --rw-field-bar-title: 16px;
  /* The floor the screen's name keeps however full the bar gets (T357). */
  --rw-field-bar-title-min: 6rem;
  /* The post bar of `/dispatch` and `/store` (01-architecture.md §4.6, §4.7), at the approved
     prototype's sizes (docs/prototypes/dispatch-and-store.html, T363). */
  --rw-post-bar-gap: 10px;
  --rw-post-bar-pad: 8px 16px;
  --rw-post-bar-mark: 28px;
  --rw-post-bar-tab-pad: 12px;
  --rw-post-bar-underline: 3px;
  --rw-post-bar-control: 40px;
  --rw-post-bar-dim: 0.72;

  /* Shadow, tinted with 黒橡 */
  --rw-shadow-1: 0 1px 2px rgb(11 16 19 / 8%);
  --rw-shadow-2: 0 16px 48px rgb(11 16 19 / 16%);

  /* Motion */
  --rw-motion-fast: 120ms;
  --rw-motion-base: 200ms;
  --rw-motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --rw-motion-spin: 700ms;

  /* Borders */
  --rw-border: 1px;
  --rw-border-strong: 2px;

  /* Density — manager is the default (03-ui-library.md §2 rule 4) */
  --rw-touch-min: 44px;
  --rw-control-sm: 32px;
  --rw-control-md: 36px;
  --rw-control-lg: 44px;

  /* Component sizes */
  --rw-icon-1: 16px;
  --rw-icon-2: 20px;
  --rw-icon-3: 24px;
  --rw-spinner-1: 16px;
  --rw-spinner-2: 24px;
  --rw-spinner-3: 32px;
  --rw-switch-w: 44px;
  --rw-switch-h: 26px;
  --rw-switch-knob: 20px;
  --rw-drawer-w: 380px;
  --rw-dialog-w: 480px;
  --rw-toast-w: 340px;
  --rw-textarea-h: 120px;
  --rw-progress-h: 8px;

  /* Layout (composites) */
  --rw-avatar: 36px;
  --rw-rail-w: 232px;
  --rw-rail-w-collapsed: 64px;
  --rw-bar-h: 56px;
  --rw-bottom-bar-h: 64px;
  --rw-pane-left-w: 360px;
  --rw-pane-left-max: 40%;
  --rw-content-max-w: 1440px;
  --rw-field-home-columns: 3;
  --rw-widget-h-1: 180px;
  --rw-widget-h-2: 380px;
  --rw-tile-h: 120px;
  --rw-search-w: 280px;
  --rw-layer-popup: 90;
  --rw-layer-toast: 95;

  /* The admin console (T339): the scope bar, its rail, the picker dialog and the unsaved guard,
     at the approved prototype's sizes (docs/prototypes/admin-console.html). Sizes only — every
     colour of the console comes from the tokens already declared above, so the console follows
     whichever theme the shell links. */
  --rw-console-bar-h: 54px;
  --rw-console-head-h: 62px;
  --rw-console-head-pad: 0 22px;
  --rw-console-rail-w: 236px;
  --rw-console-rail-pad: 12px 10px 18px;
  --rw-console-gap: 14px;
  --rw-console-gap-sm: 10px;
  --rw-console-gap-row: 11px;
  --rw-console-scope-pad: 0 10px 0 12px;
  --rw-console-group-pad: 0 9px;
  --rw-console-row-pad: 7px 9px;
  --rw-console-sub-pad: 5px 9px;
  --rw-console-chip-pad: 4px 7px;
  --rw-console-kbd-pad: 5px 6px;
  --rw-console-picker-w: 560px;
  --rw-console-picker-h: 356px;
  --rw-console-search-pad: 14px 16px;
  --rw-console-pick-pad: 9px 16px;
  --rw-console-pick-code-w: 46px;
  --rw-console-pick-group-pad: 11px 16px 5px;
  --rw-console-pick-foot-pad: 11px 16px;
  --rw-console-guard-w: 460px;
  --rw-console-guard-pad: 22px 24px 20px;
  --rw-console-guard-what-pad: 10px 13px;
  --rw-console-phone-pad: 11px 13px;
  --rw-console-sheet-pad: 8px 8px 12px;
  --rw-console-sheet-row-pad: 9px 13px;
  --rw-console-text-caps: 10.5px;
  --rw-console-text-caps-sm: 9.5px;
  --rw-console-text-mono: 11px;
  --rw-console-text-note: 12.5px;
  --rw-console-text-row: 14px;
  --rw-console-text-pick: 14.5px;
  --rw-console-text-name: 15.5px;
  --rw-console-text-title: 19px;
  --rw-console-tracking-caps: 0.14em;
  --rw-console-tracking-group: 0.13em;
  --rw-console-tracking-code: 0.07em;

  /* The console's two bars carry their own ground and ink, in BOTH colour schemes (T339 review).
     The bar is chrome, not content: when `--rw-ink` and `--rw-ok` invert for dark they turn the
     console's frame into the brightest slab on the dark ground, and the two scopes stop being easy
     to tell apart. So each bar keeps a dark ground and a light ink whichever scheme is on, and each
     ground carries its OWN muted ink — one opacity over two different grounds is what failed
     WCAG 1.4.3 on the green bar, where the small mono lines land at 10.5-11px. */
  --rw-console-bar-system-bg: #0b1013;
  --rw-console-bar-system-ink: #fde8d0;
  --rw-console-bar-system-muted: #9c9284;
  --rw-console-bar-org-bg: #0f4c3a;
  --rw-console-bar-org-ink: #fde8d0;
  --rw-console-bar-org-muted: #a9c9ba;
  /* The phone menu lies OVER the page, so it needs a ceiling of its own rather than the page's. */
  --rw-console-sheet-max-h: 72dvh;

  /* Calendar — the Schedule screen of tiger-vhs maint-hub (T040); measurements are the default
     theme's. */
  --rw-cal-rail-w: 190px;
  --rw-cal-lane-w: 150px;
  --rw-cal-day-min: 96px;
  --rw-cal-grid-min: 700px;
  --rw-cal-head-h: 40px;
  --rw-cal-cell-min-h: 38px;
  --rw-cal-hit-min-h: 26px;
  --rw-cal-swatch: 11px;
  --rw-cal-check: 14px;
  --rw-cal-radio: 15px;
  --rw-cal-nav: 30px;
  --rw-cal-daynum: 20px;
  --rw-cal-week-min: 112px;
  --rw-cal-month-row: 100px;
  --rw-cal-pop-w: 232px;
  --rw-cal-pop-h: 300px;
  --rw-cal-wrap-min-h: 320px;
  --rw-cal-shade-h: 14px;
  --rw-cal-chip-edge: 3px;
  /* The coloured left edge of an owed card on the field home: how urgent it is, at a glance (T429). */
  --rw-field-owed-edge: 4px;
  --rw-cal-dash: 1.5px;
  --rw-cal-drawer-w: clamp(560px, 48vw, 760px);
  --rw-cal-dialog-w: 480px;
  --rw-cal-field-max: 520px;
  --rw-cal-control-h: 36px;
  --rw-cal-control-h-table: 34px;
  --rw-cal-number-w: 120px;
  --rw-cal-qty-w: 96px;
  --rw-cal-lh-12: 12px;
  --rw-cal-lh-17: 17px;
  --rw-cal-tracking: 0.07em;
  --rw-cal-tracking-tag: 0.05em;
  --rw-cal-weight-heavy: 800;
  --rw-cal-fs-8: 8px;
  --rw-cal-fs-8h: 8.5px;
  --rw-cal-fs-9: 9px;
  --rw-cal-fs-9h: 9.5px;
  --rw-cal-fs-10: 10px;
  --rw-cal-fs-10h: 10.5px;
  --rw-cal-fs-11: 11px;
  --rw-cal-fs-11h: 11.5px;
  --rw-cal-fs-12: 12px;
  --rw-cal-fs-12h: 12.5px;
  --rw-cal-fs-13: 13px;
  --rw-cal-fs-14: 14px;
  --rw-cal-fs-16: 16px;
  --rw-cal-fs-16h: 16.5px;
  --rw-cal-fs-18: 18px;
  --rw-cal-fs-20: 20px;
  --rw-cal-sp-3: 3px;
  --rw-cal-sp-5: 5px;
  --rw-cal-sp-6: 6px;
  --rw-cal-sp-7: 7px;
  --rw-cal-sp-9: 9px;
  --rw-cal-sp-10: 10px;
  --rw-cal-sp-11: 11px;
  --rw-cal-sp-14: 14px;
  --rw-cal-sp-18: 18px;
  --rw-cal-sp-22: 22px;
  --rw-cal-radius-chip: 4px;
  --rw-cal-radius-input: 4px;
  --rw-cal-radius-control: 4px;
  --rw-cal-radius-pill: 9px;
  --rw-cal-radius-switch: 10px;
  --rw-cal-radius-popover: 8px;
  --rw-cal-radius-frame: 8px;
  --rw-cal-radius-dialog: 8px;

  /* Calendar surfaces, in clean light gray tints, and the mechanic palette (T040). The
     first two mechanics are a blue and the brand green, so no two neighbours read alike. */
  --rw-cal-subtle: #f4f6f8;
  --rw-cal-hover: #f7f9fb;
  --rw-cal-today: #eef3f8;
  --rw-cal-today-hover: #e5edf5;
  --rw-cal-off: #fafbfc;
  --rw-cal-switch: #e2e6ea;
  --rw-cal-col-hover: #c6ced4;
  --rw-cal-perm: #f7f9fa;
  --rw-cal-chip-bg: var(--rw-line-2);
  --rw-cal-hit-hover: rgb(11 16 19 / 4%);
  --rw-cal-shade: rgb(11 16 19 / 12%);
  --rw-cal-shade-clear: rgb(11 16 19 / 0%);
  --rw-cal-backdrop: rgb(11 16 19 / 18%);
  --rw-cal-dialog-backdrop: rgb(11 16 19 / 32%);
  --rw-cal-shadow-switch: 0 1px 4px rgb(11 16 19 / 16%);
  --rw-cal-shadow-drawer: -14px 0 40px rgb(11 16 19 / 22%);
  --rw-cal-shadow-dialog: 0 24px 60px rgb(11 16 19 / 30%);
  --rw-cal-shadow-popover: 0 16px 38px rgb(11 16 19 / 24%);
  --rw-mech-1: light-dark(#1d5fa8, #7ab3ec);
  --rw-mech-1-bg: light-dark(#e8f0f9, #12263a);
  --rw-mech-2: var(--rw-ok);
  --rw-mech-2-bg: var(--rw-ok-bg);
  --rw-mech-3: #7c3fc4;
  --rw-mech-3-bg: #f1e8fb;
  --rw-mech-4: #b8457b;
  --rw-mech-4-bg: #fbe8f1;
  --rw-mech-5: #0e7490;
  --rw-mech-5-bg: #e0f2f6;
  --rw-mech-6: #a15c07;
  --rw-mech-6-bg: #fbeedd;
  --rw-mech-7: #4f5bd5;
  --rw-mech-7-bg: #eaecfb;
  --rw-mech-8: #5f7a1f;
  --rw-mech-8-bg: #eef3e0;

  /* Chart. The brand's green and black lead, then 深茶, a slate and 薄緑; 紅緋 is kept for the one
     primary action (T062). The literal hues switch with `light-dark()`, because a theme may only
     redefine names the default declares. */
  --rw-chart-h: 240px;
  --rw-chart-1: var(--rw-ok);
  --rw-chart-2: var(--rw-ink);
  --rw-chart-3: light-dark(#a48255, #d9bc8e);
  --rw-chart-4: light-dark(#4f6b7a, #9fb6c3);
  --rw-chart-5: light-dark(#294023, #a9c79c);

  /* Scanner */
  --rw-viewfinder-h: 240px;

  /* Stock screens (T041): sizes are the default theme's; the tiles sit on the cream paper's tints. */
  --rw-stock-text-caps: 10.5px;
  --rw-stock-text-xs: 11px;
  --rw-stock-text-sm: 11.5px;
  --rw-stock-text-switch: 12px;
  --rw-stock-text-meta: 12.5px;
  --rw-stock-text-body: 13px;
  --rw-stock-text-card: 14.5px;
  --rw-stock-text-month: 16px;
  --rw-stock-text-title: 19px;
  --rw-stock-text-kpi: 24px;
  --rw-stock-text-hero: 30px;
  --rw-stock-weight-heavy: 800;
  --rw-stock-tracking-tight: -0.01em;
  --rw-stock-tracking-tighter: -0.02em;
  --rw-stock-tracking-tightest: -0.03em;
  --rw-stock-pad-th: 6px 8px;
  --rw-stock-pad-td: 7px 8px;
  --rw-stock-pad-pill: 2px 8px;
  --rw-stock-pad-notice: 12px 14px;
  --rw-stock-pad-tile: 10px 12px;
  --rw-stock-pad-tile-hero: 13px 15px;
  --rw-stock-pad-kpi: 13px 16px;
  --rw-stock-pad-card: 11px 13px;
  --rw-stock-pad-switch: 3px;
  --rw-stock-pad-switch-option: 6px 11px;
  --rw-stock-pad-day: 6px 8px;
  --rw-stock-pad-count: 1px 6px;
  --rw-stock-pad-ledger: 9px 0;
  --rw-stock-gap-tiles: 9px;
  --rw-stock-gap-row: 10px;
  --rw-stock-gap-day: 6px;
  --rw-stock-pane-w: 360px;
  --rw-stock-pane-gap: 20px;
  --rw-stock-day-h: 64px;
  --rw-stock-month-w: 130px;
  --rw-stock-ledger-date-w: 52px;
  --rw-stock-ledger-qty-w: 64px;
  --rw-stock-ledger-balance-w: 56px;
  --rw-stock-radius-pill: 9px;
  --rw-stock-radius-tile: 8px;
  --rw-stock-radius-card: 8px;
  --rw-stock-radius-option: 4px;
  --rw-stock-radius-count: 8px;
  --rw-stock-tile-bg: #f4f6f8;
  --rw-stock-tile-hero-bg: #e8ecf0;
  --rw-stock-switch-bg: #e2e6ea;
  --rw-stock-switch-on: #ffffff;
  --rw-stock-switch-shadow: 0 1px 4px rgb(11 16 19 / 16%);
  --rw-stock-warn-line: #e5cfae;
  --rw-stock-warn-ink: #6e5230;
  --rw-stock-warn-strong: #4f3a20;
  --rw-stock-ok-line: #b9d6c7;
  --rw-stock-ok-ink: #0f4c3a;
  --rw-stock-critical-line: #f0b8a8;
  --rw-stock-critical-ink: #a42a14;
  --rw-stock-critical-strong: #7a1f0e;
  --rw-stock-day-hover: #c6ced4;
  --rw-stock-day-off: #fafbfc;
  --rw-stock-day-on-line: #0f4c3a;
  --rw-stock-count-bg: #edf0f3;

  /* The field take screen (T041): always dark, whatever the page theme — here on 黒橡, with the
     brand green pulse and 紅緋 for "done". */
  /*
   * The scan screen is LIGHT (T305), like every other surface of this application. It used to be
   * dark whatever the theme, because work-log's is.
   *
   * `--rw-scan-cam-*` is the exception and the only one: those are drawn on the PICTURE, and a
   * near-black outline over a dark store cannot be seen. Everything else is a surface this
   * application paints and takes the ordinary light values.
   */
  --rw-scan-bg: #f4f6f8;
  --rw-scan-cam-bg: #14181b;
  --rw-scan-cam-ink: #fde8d0;
  --rw-scan-cam-ok: #3ecf96;
  --rw-scan-cam-warn: #e4a951;
  --rw-scan-cam-note-bg: rgb(0 0 0 / 55%);
  --rw-scan-ink: #0b1013;
  --rw-scan-ink-2: #6c665f;
  --rw-scan-tray-bg: #ffffff;
  --rw-scan-item-bg: #f4f6f8;
  --rw-scan-item-pulse: #dcebe3;
  --rw-scan-unknown-line: #e3d2b4;
  --rw-scan-unknown-ink: #6e5230;
  --rw-scan-done-bg: #d3381c;
  --rw-scan-done-ink: #ffffff;
  --rw-scan-pill-bg: #f4f6f8;
  --rw-scan-pill-line: #e2e6ea;
  --rw-scan-control-bg: #f4f6f8;
  --rw-scan-control-line: #e2e6ea;
  --rw-scan-flash-ok: rgb(143 208 178 / 55%);
  --rw-scan-flash-warn: rgb(217 188 142 / 60%);
  --rw-scan-ok-ink: #0f4c3a;
  --rw-scan-cam-h: 46dvh;
  --rw-scan-cam-min-h: 260px;
  --rw-scan-box: 340px;
  --rw-scan-fallback-icon: 36px;
  --rw-scan-corner: 38px;
  --rw-scan-corner-w: 3px;
  --rw-scan-radius-corner: 4px;
  --rw-scan-radius-box: 20px;
  /* The take screen's sheet and rows, at the approved prototype's sizes (T305). */
  --rw-scan-sheet-max: 48%;
  --rw-scan-finder-inset: 16px;
  --rw-scan-radius-sheet: 22px;
  --rw-scan-grab-w: 40px;
  --rw-scan-grab-top: 9px;
  --rw-scan-pad-flash: 9px 16px;
  --rw-scan-pad-head: 9px 16px 11px;
  --rw-scan-gap-head: 10px;
  --rw-scan-text-count: 15px;
  --rw-scan-chev: 18px;
  --rw-scan-pad-list: 12px;
  --rw-scan-pad-empty: 22px 18px 26px;
  --rw-scan-text-small-body: 13px;
  --rw-scan-pad-row: 11px 6px;
  --rw-scan-gap-row: 11px;
  --rw-scan-gap-top: 7px;
  --rw-scan-mark: 30px;
  --rw-scan-mark-icon: 16px;
  --rw-scan-radius-mark: 9px;
  --rw-scan-remove: 28px;
  --rw-scan-remove-icon: 14px;
  --rw-scan-radius-remove: 8px;
  --rw-scan-pad-foot: 10px 16px 0;
  --rw-scan-pad-foot-bottom: 12px;
  --rw-scan-done-h: 54px;
  --rw-scan-grab-h: 4px;
  --rw-scan-warn-bg: #f4e6d0;
  --rw-scan-off-bg: #e7eaee;
  --rw-scan-off-ink: #9aa1a8;
  --rw-scan-grab: #cdd3d9;
  --rw-scan-sheet-shadow: 0 -18px 44px rgb(11 16 19 / 16%);
  --rw-scan-radius-tray: 8px;
  --rw-scan-radius-item: 8px;
  --rw-scan-radius-control: 4px;
  --rw-scan-radius-done: 14px;
  --rw-scan-radius-pill: 20px;
  --rw-scan-text-head: 13px;
  --rw-scan-text-item: 14px;
  --rw-scan-text-hint: 15px;
  --rw-scan-text-small: 11px;
  --rw-scan-text-qty: 15px;
  --rw-scan-text-done: 16px;
  --rw-scan-text-code: 18px;
  --rw-scan-text-pill: 13px;
  --rw-scan-pad-top: 10px 12px 8px;
  --rw-scan-pad-hint: 10px 20px 4px;
  --rw-scan-pad-tray: 12px 14px 14px;
  --rw-scan-pad-item: 8px 8px 8px 12px;
  --rw-scan-pad-pill: 8px 14px;
  --rw-scan-pad-control: 14px;
  --rw-scan-pad-done: 16px;
  --rw-scan-pad-fallback: 18px;
  --rw-scan-gap-list: 6px;
  --rw-scan-item-h: 52px;
  --rw-scan-hint-h: 38px;
  --rw-scan-done-h: 56px;
  --rw-scan-pulse: 500ms;

  /* Machines screen (T043): sizes are the default theme's, corners the brand's. */
  --rw-mach-list-w: 260px;
  --rw-mach-pad-note: 9px 12px;
  --rw-mach-text-meter: 28px;
  --rw-mach-text-unit: 15px;
  --rw-mach-gap-label: 3px;
  --rw-mach-gap-field: 6px;
  --rw-mach-gap-form: 14px;
  --rw-mach-meter-bottom: 6px;
  --rw-mach-entry-w: 120px;
  --rw-mach-entry-h: 36px;
  --rw-mach-pad-entry: 7px 10px;
  --rw-mach-radius-entry: 4px;
  --rw-mach-text-entry: 14px;
  --rw-mach-pad-button: 4px 9px;
  --rw-mach-radius-button: 4px;
  --rw-mach-pad-message: 10px 14px;
  --rw-mach-gap-filter: 3px;
  --rw-mach-radius-filter: 4px;
  --rw-mach-radius-option: 4px;
  --rw-mach-pad-option: 5px 11px;
  --rw-mach-pad-row: 7px 0;
  --rw-mach-date-w: 56px;
  --rw-mach-page-bottom: 22px;
  /* The machine pane (T064, prototype B). */
  --rw-unit-gap: 14px;
  --rw-unit-title: 24px;
  --rw-unit-title-gap: 10px;
  --rw-unit-text: 14px;
  --rw-unit-chip-gap: 6px;
  --rw-unit-chip-pad: 3px 10px 3px 8px;
  --rw-unit-icon-sm: 13px;
  --rw-unit-icon: 15px;
  --rw-unit-icon-md: 16px;
  --rw-unit-control-h: 32px;
  --rw-unit-input-pad: 10px;
  --rw-unit-input-w: 150px;
  --rw-unit-card-pad: 14px 16px;
  --rw-unit-card-gap: 10px;
  --rw-unit-group-head: 20px;
  --rw-unit-meter: 34px;
  --rw-unit-meter-unit: 18px;
  --rw-unit-note-pad: 8px 10px;
  --rw-unit-state-pad: 1px 8px 1px 6px;
  --rw-unit-plan-pad: 12px 14px;
  --rw-unit-legend-gap: 14px;
  --rw-unit-swatch: 10px;
  --rw-unit-line-swatch: 16px;
  --rw-unit-tip-pad: 6px 9px;
  --rw-unit-bars: color-mix(in oklab, var(--rw-ink-2) 50%, transparent);
  /* Report screens (T042): the primary family is 紅緋, the intake a brand-green head with cream ink,
     and the status pairs the design system's tones. */
  --rw-rep-text-2xs: 10px;
  --rw-rep-text-xs: 12px;
  --rw-rep-text-sm: 14px;
  --rw-rep-text-md: 16px;
  --rw-rep-text-title: 22px;
  --rw-rep-text-kpi: 28px;
  --rw-rep-badge-h-sm: 18px;
  --rw-rep-badge-h-md: 20px;
  --rw-rep-badge-text-md: 11px;
  --rw-rep-badge-tracking: 0.02em;
  --rw-rep-choice-h: 42px;
  --rw-rep-compact-h: 26px;
  --rw-rep-send: 42px;
  --rw-rep-avatar: 38px;
  --rw-rep-dot: 10px;
  --rw-rep-gap-6: 6px;
  --rw-rep-gap-10: 10px;
  --rw-rep-pad-button: 0 18px;
  --rw-rep-pad-compact: 0 10px;
  --rw-rep-pad-bubble: 6px 12px;
  --rw-rep-pad-replies: 10px 12px;
  --rw-rep-pad-head: 10px 16px;
  --rw-rep-pad-alert: 12px 16px;
  --rw-rep-pad-search: 34px;
  --rw-rep-bubble-max: 82%;
  --rw-rep-replies-max: 92%;
  --rw-rep-transcript-max: 85%;
  --rw-rep-input-max: 112px;
  --rw-rep-field-min: 120px;
  --rw-rep-kpi-min: 150px;
  --rw-rep-col-min: 360px;
  --rw-rep-dimmed: var(--rw-ink-3);
  --rw-rep-card: var(--rw-card);
  --rw-rep-line: var(--rw-line);
  --rw-rep-hover: var(--rw-surface-2);
  --rw-rep-primary: var(--rw-accent);
  --rw-rep-primary-hover: #b32e16;
  --rw-rep-primary-ink: var(--rw-accent-ink);
  --rw-rep-primary-light: var(--rw-accent-bg);
  --rw-rep-primary-light-ink: #a42a14;
  --rw-rep-gray-bg: #edf0f3;
  --rw-rep-gray-ink: #4a4540;
  --rw-rep-blue-bg: #e8f0f9;
  --rw-rep-blue-ink: #1d5fa8;
  --rw-rep-teal-bg: #dcebe3;
  --rw-rep-teal-ink: #0f4c3a;
  --rw-rep-green-bg: #e1ead9;
  --rw-rep-green-ink: #294023;
  --rw-rep-yellow-bg: #f4e6d0;
  --rw-rep-yellow-ink: #6e5230;
  --rw-rep-red-bg: #fbe0d8;
  --rw-rep-red-ink: #a42a14;
  --rw-rep-chart-indigo: var(--rw-chart-1);
  --rw-rep-chart-teal: var(--rw-chart-2);
  --rw-rep-chat-head: #0f4c3a;
  --rw-rep-chat-head-ink: #fde8d0;
  --rw-rep-chat-head-dim: #c3b4a3;
  --rw-rep-chat-avatar: #fde8d0;
  --rw-rep-chat-avatar-ink: #0f4c3a;
  --rw-rep-chat-wall: #edf0f3;
  --rw-rep-bubble-in: #ffffff;
  --rw-rep-bubble-out: #dcebe3;
  --rw-rep-bubble-ink: #0b1013;
  --rw-rep-bubble-time: #6c665f;
  --rw-rep-chat-bar: #f4f6f8;
  --rw-rep-chat-send: var(--rw-accent);
  --rw-rep-chat-send-ink: var(--rw-accent-ink);
  --rw-rep-choice-bg: #dcebe3;
  --rw-rep-choice-hover: #c9e0d4;
  --rw-rep-choice-ink: #0f4c3a;
  --rw-rep-choice-on: #0f4c3a;
  --rw-rep-choice-on-ink: #fde8d0;
  --rw-rep-shadow-bubble: 0 1px 3px rgb(11 16 19 / 5%), 0 1px 2px rgb(11 16 19 / 10%);
}

/* Density is set by DensityProvider on a wrapper element; the values inherit from there. */
[data-density="manager"] {
  --rw-touch-min: 44px;
  --rw-control-sm: 32px;
  --rw-control-md: 36px;
  --rw-control-lg: 44px;
  --rw-text-base: var(--rw-text-2);
}

[data-density="field"] {
  --rw-touch-min: 48px;
  --rw-control-sm: 44px;
  --rw-control-md: 48px;
  --rw-control-lg: 56px;
  --rw-text-base: 16px;
  --rw-leading-base: 1.5;
  --rw-icon-2: 24px;
  --rw-switch-w: 52px;
  --rw-switch-h: 32px;
  --rw-switch-knob: 26px;
  --rw-bar-h: 64px;
  --rw-bottom-bar-h: 72px;
  --rw-tile-h: 140px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --rw-ink: #fde8d0;
    --rw-ink-2: #c3b4a3;
    --rw-ink-3: #9c9284;
    --rw-line: #282a2a;
    --rw-line-2: #1e2122;
    --rw-ground: #0b1013;
    --rw-card: #15191b;
    --rw-surface-2: #1e2122;

    --rw-accent: #d3381c;
    --rw-accent-ink: #ffffff;
    --rw-accent-bg: #3a1810;

    --rw-neutral: #c3b4a3;
    --rw-neutral-bg: #1e2122;
    --rw-info: #a9c79c;
    --rw-info-bg: #1b2717;
    --rw-ok: #8fd0b2;
    --rw-ok-bg: #10271f;
    --rw-warn: #d9bc8e;
    --rw-warn-bg: #2a241a;
    /* A chosen picture answer (T316). */
    --rw-chosen: #d9bc8e;
    --rw-chosen-bg: #2a2317;
    --rw-critical: #f08a73;
    --rw-critical-bg: #3a1810;
    --rw-critical-ink: #0b1013;

    --rw-focus: #8fd0b2;
    --rw-overlay: rgb(4 6 7 / 72%);

    --rw-shadow-1: 0 1px 2px rgb(0 0 0 / 40%);
    --rw-shadow-2: 0 16px 48px rgb(0 0 0 / 55%);

    --rw-stock-tile-bg: #1e2122;
    --rw-stock-tile-hero-bg: #26292a;
    --rw-stock-switch-bg: #080b0d;
    --rw-stock-switch-on: #26292a;
    --rw-stock-switch-shadow: 0 1px 4px rgb(0 0 0 / 45%);
    --rw-stock-warn-line: #4e412c;
    --rw-stock-warn-ink: #d9bc8e;
    --rw-stock-warn-strong: #ead3ae;
    --rw-stock-ok-line: #1f4a3a;
    --rw-stock-ok-ink: #8fd0b2;
    --rw-stock-critical-line: #5c2a1e;
    --rw-stock-critical-ink: #f08a73;
    --rw-stock-critical-strong: #f5a896;
    --rw-stock-day-hover: #454440;
    --rw-stock-day-off: #080b0d;
    --rw-stock-day-on-line: #2e7a5e;
    --rw-stock-count-bg: #1e2122;
    --rw-cal-subtle: #15191b;
    --rw-cal-hover: #1a1e20;
    --rw-cal-today: #2a241a;
    --rw-cal-today-hover: #332c20;
    --rw-cal-off: #080b0d;
    --rw-cal-switch: #1e2122;
    --rw-cal-col-hover: #454440;
    --rw-cal-perm: #121618;
    --rw-cal-hit-hover: rgb(253 232 208 / 5%);
    --rw-cal-shade: rgb(0 0 0 / 40%);
    --rw-cal-shade-clear: rgb(0 0 0 / 0%);
    --rw-cal-backdrop: rgb(0 0 0 / 45%);
    --rw-cal-dialog-backdrop: rgb(0 0 0 / 60%);
    --rw-cal-shadow-switch: 0 1px 4px rgb(0 0 0 / 45%);
    --rw-cal-shadow-drawer: -14px 0 40px rgb(0 0 0 / 60%);
    --rw-cal-shadow-dialog: 0 24px 60px rgb(0 0 0 / 65%);
    --rw-cal-shadow-popover: 0 16px 38px rgb(0 0 0 / 60%);
    --rw-mech-3: #b58cf0;
    --rw-mech-3-bg: #2a1f3d;
    --rw-mech-4: #ea8ab6;
    --rw-mech-4-bg: #3a1d2b;
    --rw-mech-5: #5cc3d8;
    --rw-mech-5-bg: #10303a;
    --rw-mech-6: #e0a355;
    --rw-mech-6-bg: #33260f;
    --rw-mech-7: #9aa3f5;
    --rw-mech-7-bg: #1f2346;
    --rw-mech-8: #a9c46a;
    --rw-mech-8-bg: #252d15;

    /* Report screens (T042). */
    --rw-rep-dimmed: var(--rw-ink-3);
    --rw-rep-card: var(--rw-card);
    --rw-rep-line: var(--rw-line);
    --rw-rep-hover: var(--rw-surface-2);
    --rw-rep-primary: var(--rw-accent);
    --rw-rep-primary-hover: #e04a2e;
    --rw-rep-primary-ink: var(--rw-accent-ink);
    --rw-rep-primary-light: var(--rw-accent-bg);
    --rw-rep-primary-light-ink: #f08a73;
    --rw-rep-gray-bg: #1e2122;
    --rw-rep-gray-ink: #c3b4a3;
    --rw-rep-blue-bg: #12263a;
    --rw-rep-blue-ink: #7ab3ec;
    --rw-rep-teal-bg: #10271f;
    --rw-rep-teal-ink: #8fd0b2;
    --rw-rep-green-bg: #1b2717;
    --rw-rep-green-ink: #a9c79c;
    --rw-rep-yellow-bg: #2a241a;
    --rw-rep-yellow-ink: #d9bc8e;
    --rw-rep-red-bg: #3a1810;
    --rw-rep-red-ink: #f08a73;
    --rw-rep-chart-indigo: var(--rw-chart-1);
    --rw-rep-chart-teal: var(--rw-chart-2);
    --rw-rep-chat-head: #0f4c3a;
    --rw-rep-chat-head-ink: #fde8d0;
    --rw-rep-chat-head-dim: #c3b4a3;
    --rw-rep-chat-avatar: #fde8d0;
    --rw-rep-chat-avatar-ink: #0f4c3a;
    --rw-rep-chat-wall: #0b1013;
    --rw-rep-bubble-in: #1e2122;
    --rw-rep-bubble-out: #0f4c3a;
    --rw-rep-bubble-ink: #fde8d0;
    --rw-rep-bubble-time: #c3b4a3;
    --rw-rep-chat-bar: #15191b;
    --rw-rep-chat-send: var(--rw-accent);
    --rw-rep-chat-send-ink: var(--rw-accent-ink);
    --rw-rep-choice-bg: #10271f;
    --rw-rep-choice-hover: #163529;
    --rw-rep-choice-ink: #8fd0b2;
    --rw-rep-choice-on: #0f4c3a;
    --rw-rep-choice-on-ink: #fde8d0;
    --rw-rep-shadow-bubble: 0 1px 2px rgb(0 0 0 / 40%);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --rw-ink: #fde8d0;
  --rw-ink-2: #c3b4a3;
  --rw-ink-3: #9c9284;
  --rw-line: #282a2a;
  --rw-line-2: #1e2122;
  --rw-ground: #0b1013;
  --rw-card: #15191b;
  --rw-surface-2: #1e2122;

  --rw-accent: #d3381c;
  --rw-accent-ink: #ffffff;
  --rw-accent-bg: #3a1810;

  --rw-neutral: #c3b4a3;
  --rw-neutral-bg: #1e2122;
  --rw-info: #a9c79c;
  --rw-info-bg: #1b2717;
  --rw-ok: #8fd0b2;
  --rw-ok-bg: #10271f;
  --rw-warn: #d9bc8e;
  --rw-warn-bg: #2a241a;
  /* A chosen picture answer (T316). */
  --rw-chosen: #d9bc8e;
  --rw-chosen-bg: #2a2317;
  --rw-critical: #f08a73;
  --rw-critical-bg: #3a1810;
  --rw-critical-ink: #0b1013;

  --rw-focus: #8fd0b2;
  --rw-overlay: rgb(4 6 7 / 72%);

  --rw-shadow-1: 0 1px 2px rgb(0 0 0 / 40%);
  --rw-shadow-2: 0 16px 48px rgb(0 0 0 / 55%);

  --rw-stock-tile-bg: #1e2122;
  --rw-stock-tile-hero-bg: #26292a;
  --rw-stock-switch-bg: #080b0d;
  --rw-stock-switch-on: #26292a;
  --rw-stock-switch-shadow: 0 1px 4px rgb(0 0 0 / 45%);
  --rw-stock-warn-line: #4e412c;
  --rw-stock-warn-ink: #d9bc8e;
  --rw-stock-warn-strong: #ead3ae;
  --rw-stock-ok-line: #1f4a3a;
  --rw-stock-ok-ink: #8fd0b2;
  --rw-stock-critical-line: #5c2a1e;
  --rw-stock-critical-ink: #f08a73;
  --rw-stock-critical-strong: #f5a896;
  --rw-stock-day-hover: #454440;
  --rw-stock-day-off: #080b0d;
  --rw-stock-day-on-line: #2e7a5e;
  --rw-stock-count-bg: #1e2122;
  --rw-cal-subtle: #15191b;
  --rw-cal-hover: #1a1e20;
  --rw-cal-today: #2a241a;
  --rw-cal-today-hover: #332c20;
  --rw-cal-off: #080b0d;
  --rw-cal-switch: #1e2122;
  --rw-cal-col-hover: #454440;
  --rw-cal-perm: #121618;
  --rw-cal-hit-hover: rgb(253 232 208 / 5%);
  --rw-cal-shade: rgb(0 0 0 / 40%);
  --rw-cal-shade-clear: rgb(0 0 0 / 0%);
  --rw-cal-backdrop: rgb(0 0 0 / 45%);
  --rw-cal-dialog-backdrop: rgb(0 0 0 / 60%);
  --rw-cal-shadow-switch: 0 1px 4px rgb(0 0 0 / 45%);
  --rw-cal-shadow-drawer: -14px 0 40px rgb(0 0 0 / 60%);
  --rw-cal-shadow-dialog: 0 24px 60px rgb(0 0 0 / 65%);
  --rw-cal-shadow-popover: 0 16px 38px rgb(0 0 0 / 60%);
  --rw-mech-3: #b58cf0;
  --rw-mech-3-bg: #2a1f3d;
  --rw-mech-4: #ea8ab6;
  --rw-mech-4-bg: #3a1d2b;
  --rw-mech-5: #5cc3d8;
  --rw-mech-5-bg: #10303a;
  --rw-mech-6: #e0a355;
  --rw-mech-6-bg: #33260f;
  --rw-mech-7: #9aa3f5;
  --rw-mech-7-bg: #1f2346;
  --rw-mech-8: #a9c46a;
  --rw-mech-8-bg: #252d15;

  /* Report screens (T042). */
  --rw-rep-dimmed: var(--rw-ink-3);
  --rw-rep-card: var(--rw-card);
  --rw-rep-line: var(--rw-line);
  --rw-rep-hover: var(--rw-surface-2);
  --rw-rep-primary: var(--rw-accent);
  --rw-rep-primary-hover: #e04a2e;
  --rw-rep-primary-ink: var(--rw-accent-ink);
  --rw-rep-primary-light: var(--rw-accent-bg);
  --rw-rep-primary-light-ink: #f08a73;
  --rw-rep-gray-bg: #1e2122;
  --rw-rep-gray-ink: #c3b4a3;
  --rw-rep-blue-bg: #12263a;
  --rw-rep-blue-ink: #7ab3ec;
  --rw-rep-teal-bg: #10271f;
  --rw-rep-teal-ink: #8fd0b2;
  --rw-rep-green-bg: #1b2717;
  --rw-rep-green-ink: #a9c79c;
  --rw-rep-yellow-bg: #2a241a;
  --rw-rep-yellow-ink: #d9bc8e;
  --rw-rep-red-bg: #3a1810;
  --rw-rep-red-ink: #f08a73;
  --rw-rep-chart-indigo: var(--rw-chart-1);
  --rw-rep-chart-teal: var(--rw-chart-2);
  --rw-rep-chat-head: #0f4c3a;
  --rw-rep-chat-head-ink: #fde8d0;
  --rw-rep-chat-head-dim: #c3b4a3;
  --rw-rep-chat-avatar: #fde8d0;
  --rw-rep-chat-avatar-ink: #0f4c3a;
  --rw-rep-chat-wall: #0b1013;
  --rw-rep-bubble-in: #1e2122;
  --rw-rep-bubble-out: #0f4c3a;
  --rw-rep-bubble-ink: #fde8d0;
  --rw-rep-bubble-time: #c3b4a3;
  --rw-rep-chat-bar: #15191b;
  --rw-rep-chat-send: var(--rw-accent);
  --rw-rep-chat-send-ink: var(--rw-accent-ink);
  --rw-rep-choice-bg: #10271f;
  --rw-rep-choice-hover: #163529;
  --rw-rep-choice-ink: #8fd0b2;
  --rw-rep-choice-on: #0f4c3a;
  --rw-rep-choice-on-ink: #fde8d0;
  --rw-rep-shadow-bubble: 0 1px 2px rgb(0 0 0 / 40%);
}

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

/*
 * The field home's tiles: one column on a phone, three above it (T369).
 *
 * The count is a token and the breakpoint is here, which is the way round that works: a component
 * stylesheet may carry no literal, and `@media` cannot read a custom property — but it can SET one.
 * `src/lib/media.ts` answers the same question in JavaScript for the composites that need it in
 * their markup, and it cannot answer before the page is on screen: the server renders the wide
 * answer, so the home used to open with its tiles in a row and shuffle them into a column on the
 * first client render. A phone saw the shuffle every time it opened the app.
 */
@media (max-width: 699px) {
  :root {
    --rw-field-home-columns: 1;
  }
}