/* The only file where a colour literal may appear. Everything else uses these tokens.
   The identity they carry is DESIGN.md; data hues (module, state, status, stage...) keep the classic values. */
:root {
  /* type and sizes */
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --font-size-base: 14px;
  --line-height-base: 1.45;
  --topbar-height: 56px;
  --gutter: 20px;
  --radius-badge: 4px;
  --radius-chip: 4px;
  --control-height: 36px;
  --form-panel-width: 1060px;

  /* type scale: at most seven of these on a page; --text-dense only in planner bars and grid cells */
  --text-dense: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 26px;
  --text-display-1: 32px;
  --text-display-2: 40px;
  --text-display-3: 56px;
  --leading-tight: 1.2;
  --leading-snug: 1.3;
  --tracking-tight: -0.01em;
  --tracking-display: -0.02em;
  --tracking-th: 0.04em;
  --tracking-label: 0.06em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* spacing (4px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* shape */
  --radius-menu: 6px;
  --radius-round: 999px;     /* avatars and status dots; 0 in the six square themes */
  --control-height-sm: 28px;
  --bar-width: 3px;          /* row state bars, card bars, PO/invoice/search tone bars */

  /* focus and motion */
  --focus-width: 2px;
  --focus-offset: 2px;
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 240ms;
  --dur-flash: 600ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* surfaces */
  --color-page-bg: #f5f6f8;
  --color-surface: #ffffff;
  --color-surface-alt: #f5f6f8;
  --color-surface-sunken: #e7eaee;
  --color-border: #e2e5e9;
  --color-border-strong: #c3c9d0;

  /* text */
  --color-text: #23272c;
  --color-text-muted: #636a72;
  --color-text-inverse: #ffffff;
  --color-label: #4a5058;
  --color-text-input: #23272c;
  --color-text-faint: #b4bac2;

  /* links and primary action */
  --color-link: var(--color-primary-strong);
  --color-link-hover: #005da4;
  --color-primary: #0088f0;
  --color-primary-hover: #0071c7;
  --color-on-primary: #ffffff;
  --color-danger: #cc001e;
  --color-danger-hover: #a30018;
  --color-on-danger: #ffffff;
  --color-focus: #0088f0;
  --color-focus-ring: rgba(0, 136, 240, 0.35);

  /* the rest of the button grammar */
  --color-create: #81bc00;
  --color-create-hover: #659300;
  --color-warning: #ef7d00;
  --color-warning-hover: #c66800;
  --color-cancel: #b3b3b3;
  --color-cancel-hover: #9f9f9f;
  --color-on-button: #ffffff;

  /* top bar and main nav: one ink bar */
  --color-topbar-bg: #1c2026;
  --color-topbar-text: #ffffff;
  --color-topbar-muted: #b3bac2;
  --color-nav-bg: #1c2026;
  --color-nav-text: #b3bac2;
  --color-nav-hover-bg: #2b3038;
  --color-nav-active-bg: #0088f0;
  --color-nav-text-shadow: rgba(0, 0, 0, 0.45);
  --color-store-link: var(--color-topbar-muted);
  --color-avatar-bg: var(--color-primary-strong);
  --color-menu-bg: #ffffff;
  --color-menu-hover-bg: var(--color-row-hover);
  --color-menu-hover-text: var(--color-text);
  /* The featured nav entry's resting tint and edge bar; both follow each theme's primary and menu colours. */
  --color-nav-featured-bg: color-mix(in srgb, var(--color-primary) 14%, var(--color-menu-bg));
  --color-nav-featured-bar: var(--color-primary);
  --color-menu-border: #e6e6e6;

  /* tables */
  --color-th-bg: var(--color-surface);
  --color-th-text: var(--color-label);
  --color-th-border: var(--color-border-strong);
  --color-th-bar: #999999;
  --color-row-stripe: #ffffff;
  --color-row-hover: #f2f4f7;
  --color-date-band-bar: #e6e6e6;
  --color-shortage-bg: #f1c0c7;

  /* inputs */
  --color-input-bg: #ffffff;
  --color-input-border: #c3c9d0;
  --color-input-shadow: rgba(0, 0, 0, 0.075);
  --color-addon-bg: #f0f2f5;
  --color-toggle-off: #b3b3b3;
  --color-toggle-off-text: #eeeeee;

  /* icons, tiles, overlays */
  --color-pictogram: #cccccc;
  --color-icon-btn: #606060;
  --color-icon-btn-ring: var(--color-border-strong);
  --color-tile: #0088f0;
  --color-tile-hover: #0071c7;
  --color-dash-panel: var(--color-surface-alt);
  --color-dash-track: var(--color-border);
  --color-section-count: #f2a700;
  --color-tag-border: #dddddd;
  --color-shadow: rgba(0, 0, 0, 0.175);
  --color-modal-shadow: rgba(0, 0, 0, 0.5);
  --color-backdrop: rgba(0, 0, 0, 0.5);
  --color-state-seg-on: #999999;
  --color-state-seg-off: #dddddd;
  --color-state-seg-on-inverse: #ffffff;
  --color-state-seg-off-inverse: rgba(255, 255, 255, 0.45);
  --mask-opaque: #000000;

  /* solid status fills with white text (module readers such as the RFID console's toasts; flash bars use the trios) */
  --color-flash-success: #4f7300;
  --color-flash-error: #cc001e;
  --color-flash-info: #0071c7;

  /* semantic trios: background, ink, border (inline notices, not badges) */
  --color-success-bg: #eef6dc;
  --color-success-ink: #3f5c00;
  --color-success-border: #c5e08a;
  --color-error-bg: #f2dede;
  --color-error-ink: #a94442;
  --color-error-border: #ebccd1;
  --color-info-bg: #d9edf7;
  --color-info-ink: #31708f;
  --color-info-border: #bce8f1;
  --color-warn-bg: #fcf8e3;
  --color-warn-ink: #8a6d3b;
  --color-warn-border: #faebcc;
  --color-neutral-bg: #f8f8f8;
  --color-neutral-ink: #666666;
  --color-neutral-border: #dddddd;
  --color-dark-bg: #23272c;
  --color-dark-ink: #ffffff;

  /* module colours: the main-nav dot and active underline */
  --module-dashboard: #a30094;
  --module-people: #cc001e;
  --module-opportunities: #ef7d00;
  --module-resources: #00bdff;
  --module-activities: #81bc00;
  --module-reports: #f2a700;
  --module-rfid: var(--module-activities);
  --module-admin: var(--module-reports);

  /* busy heat scale: job planner count row, calendar month heatmap (legacy 6 steps) */
  --heat-1: #fff39c;
  --heat-2: #ffdb2c;
  --heat-3: #ffbc00;
  --heat-4: #ffa300;
  --heat-5: #ff8500;
  --heat-6: #ff3c00;

  /* opportunity state: row bar, state icon (spec 2.3) */
  --state-enquiry: #00bdff;
  --state-draft: #00a0a0;
  --state-quotation: #ef7d00;
  --state-order: #cc001e;

  /* opportunity status badges (spec 2.4) */
  --status-open: #5bc0de;
  --status-provisional: #0088f0;
  --status-reserved: #a30094;
  --status-active: #cc001e;
  --status-invoiced: #81bc00;
  --status-inactive: #999999;

  /* item status badges (spec 2.5) */
  --item-open: #999999;
  --item-reserved: #5bc0de;
  --item-allocated: #ef7d00;
  --item-prepared: #81bc00;
  --item-booked-out: #cc001e;
  --item-part-checked-in: #a30094;
  --item-checked-in: #81bc00;
  --item-completed: #333333;
  --item-deal-price: #cc001e;
  /* each job's thin line on the compact planner calendar, in its state colour: at least 3:1 on the
     calendar's cells (surface, surface-alt, info-bg), so a theme retunes any that fall short */
  --pl-line-enquiry: #078dc0;
  --pl-line-draft: #019393;
  --pl-line-quotation: #cb6a04;
  --pl-line-provisional: var(--status-provisional);
  --pl-line-reserved: var(--status-reserved);
  --pl-line-order: var(--state-order);
  --pl-line-completed: var(--item-completed);
  --pl-line-inactive: #848484;

  /* purchase order states and statuses: badges and row bars (classic: draft teal, open orange,
     authorized green, sent blue, completed dark, cancelled grey). Each follows the token it names,
     so every theme's retuned colour carries over. */
  --po-status-draft: var(--state-draft);
  --po-status-open: var(--color-warning);
  --po-status-authorized: var(--color-create);
  --po-status-sent: var(--color-primary);
  --po-status-completed: var(--item-completed);
  --po-status-cancelled: var(--status-inactive);

  /* item transaction type badges */
  --type-rental: #0050ef;
  --type-sale: #a30094;
  --type-service: #cc001e;

  /* accessory inclusion tags */
  --incl-optional: #5bc0de;
  --incl-default: #81bc00;
  --incl-mandatory: #cc001e;

  /* availability (spec 2.6) */
  --avail-ok: #81bc00;
  --avail-warn: #ed4f00;
  --avail-short: #cc001e;
  --avail-booked: #00a0a0;
  --avail-ok-tint: #a1cd40;
  --avail-warn-tint: #f27b40;
  --avail-short-tint: #d94056;
  --avail-booked-tint: #40b8b8;
  --color-weekend: #e6e6e6;

  /* booking stages (job planner, availability key) */
  --stage-quoted: #00bdff;
  --stage-reserved: #a30094;
  --stage-prep: #a52a2a;
  --stage-load: #2d00d1;
  --stage-delivery: #00a57a;
  --stage-setup: #cc007e;
  --stage-in-use: #f2a700;
  --stage-take-down: #cc007e;
  --stage-pickup: #00a57a;
  --stage-unload: #2d00d1;
  --stage-de-prep: #a52a2a;
  --stage-post-rent: #0088f0;
  --stage-unknown: #999999;
  --stage-quarantine: #9e004f;

  /* dashboard tiles (spec 2.7) */
  --tile-green: #81bc00;
  --tile-orange: #ef7d00;
  --tile-blue: #0088f0;
  --tile-red: #cc001e;

  /* hooks the themes below retune; here they give the light look */
  --color-nav-active-text: var(--color-topbar-text);
  --color-nav-active-bg: var(--color-nav-hover-bg);
  --color-store-icon: var(--color-topbar-muted);
  --color-footer-text: var(--color-text-muted);
  --color-dash-muted: var(--color-text-muted);
  --color-dash-fill: var(--color-primary);
  --color-tab-active-bg: var(--color-text-muted);
  --radius-panel: 6px;
  --radius-control: 4px;
  --shadow-overlay: 0 12px 28px -8px var(--color-shadow), 0 2px 6px -2px var(--color-shadow);

  /* deep fills for filled controls, derived so every theme and the Appearance brand colour follow;
     their text is always the pair token: on-primary, on-button, on-danger */
  --color-primary-strong: color-mix(in srgb, var(--color-primary) 82%, black);
  --color-create-strong: color-mix(in srgb, var(--color-create) 62%, black);
  --color-warning-strong: color-mix(in srgb, var(--color-warning) 72%, black);
  --color-primary-strong-hover: color-mix(in srgb, var(--color-primary) 70%, black);
  --color-create-strong-hover: color-mix(in srgb, var(--color-create) 52%, black);
  --color-warning-strong-hover: color-mix(in srgb, var(--color-warning) 62%, black);
  /* text on a light data fill (the OK availability green); the data hues are the same in every theme */
  --color-chip-ink: #1c2026;
  --avail-warn-strong: color-mix(in srgb, var(--avail-warn) 85%, black);

  /* tints and new surfaces */
  --color-accent-tint: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
  --color-row-selected: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  --color-count-bubble-bg: color-mix(in srgb, black 22%, transparent);   /* a count inside a button, on any face */
  --color-btn-bg: var(--color-surface);
  --color-btn-text: var(--color-text);
  --color-btn-border: var(--color-border-strong);
  --color-dash-text: var(--color-text);
  --color-avatar-text: var(--color-text-inverse);
  --color-search-bg: color-mix(in srgb, var(--color-topbar-text) 10%, var(--color-topbar-bg));
  --color-search-border: color-mix(in srgb, var(--color-topbar-text) 18%, var(--color-topbar-bg));
  --color-search-placeholder: var(--color-topbar-muted);
  --search-kbd-display: block;   /* the header search's shortcut chip, and the room the field leaves it; */
  --search-kbd-room: 60px;       /* off where the UI font is monospace and the placeholder needs the room */

  /* scanning */
  --color-scan-ok: var(--color-create-strong);
  --color-scan-fail: var(--color-danger);
  --color-scan-ok-bg: color-mix(in srgb, var(--color-create) 16%, var(--color-surface));
  --color-scan-fail-bg: color-mix(in srgb, var(--color-danger) 14%, var(--color-surface));
  /* a line picked by RFID scan (docs/picked-case-spec.md): the number on the success tint with a soft
     green glow; the six square themes draw a solid ring instead */
  --pick-rfid-bg: var(--color-success-bg);
  --pick-rfid-ink: var(--color-success-ink);
  --pick-rfid-ring: var(--color-success-border);
  --pick-glow: 0 0 0 1px var(--pick-rfid-ring), 0 0 10px 1px color-mix(in srgb, var(--color-create) 55%, transparent);

  /* touch and compact layout (docs/ARCHITECTURE.md 5.4) */
  --touch-target: 44px;            /* minimum hit area on touch */
  --touch-control-height: 44px;    /* fields and buttons under the touch query */
  --font-size-input-touch: 16px;   /* one engine zooms into a focused field under 16px */
  --quickbar-height: 56px;         /* bottom bar, before the safe-area inset */
  --sheet-max-height: 85vh;        /* the dvh value is set beside it in app.css */
  --z-quickbar: 180;               /* above content, below the 200 top bar */
  --z-sheet-backdrop: 260;         /* above the 250 add window */
  --z-sheet: 270;                  /* below the 300 toasts and skip link, below the 400 drag ghost */

  /* compact-layout colours, as references so every theme inherits them */
  --color-sheet-bg: var(--color-surface);
  --color-sheet-backdrop: var(--color-backdrop);
  --color-quickbar-bg: var(--color-surface);
  --color-quickbar-border: var(--color-border-strong);
  --color-quickbar-text: var(--color-label);
  --color-active-bg: var(--color-row-hover);     /* :active feedback on touch */
  --color-scroll-cue: var(--color-shadow);       /* edge shadow on a sideways scroller */

  /* theme swatches: User Settings tiles and the secret theme menu */
  --swatch-light: linear-gradient(135deg, #ffffff 0 50%, #0088f0 50% 100%);
  --swatch-dim: linear-gradient(135deg, #33383d 0 50%, #74c0ff 50% 100%);
  --swatch-dark: linear-gradient(135deg, #121417 0 50%, #4fb0ff 50% 100%);
  --swatch-rainbow: linear-gradient(135deg, #b0003a, #b83a00, #c9a000, #1e7a1e, #0a5fb0, #6a1fb0);
  --swatch-retro: linear-gradient(135deg, #000080 0 34%, #c0c0c0 34% 67%, #008080 67% 100%);
  --swatch-hotdog: linear-gradient(135deg, #ff0000 0 50%, #ffff00 50% 100%);
  --swatch-luna: linear-gradient(135deg, #245edb 0 40%, #ece9d8 40% 70%, #2f7d10 70% 100%);
  --swatch-platinum: linear-gradient(135deg, #dddddd 0 50%, #6666cc 50% 100%);
  --swatch-amber: linear-gradient(135deg, #0a0700 0 50%, #ffb000 50% 100%);
  --swatch-phosphor: linear-gradient(135deg, #020a03 0 50%, #33ff66 50% 100%);
  --swatch-vaporwave: linear-gradient(135deg, #ff71ce, #b967ff 50%, #01cdfe);
  --swatch-synthwave: linear-gradient(135deg, #120524 0 45%, #ff2a6d 45% 72%, #05d9e8 72% 100%);
  --swatch-pocket: linear-gradient(135deg, #9bbc0f 0 25%, #8bac0f 25% 50%, #306230 50% 75%, #0f380f 75% 100%);
}

/* Engines without color-mix(): Light's deep fills as literals, tints fall back to no fill (every
   tinted state also has a border, weight, icon or word), the search field to the bar's hover colour.
   Only :root here; the themes that pair their own on-primary set their own primary-strong below. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --color-primary-strong: #0070c5;
    --color-create-strong: #507500;
    --color-warning-strong: #ac5a00;
    --color-primary-strong-hover: #005fa8;
    --color-create-strong-hover: #436200;
    --color-warning-strong-hover: #944e00;
    --avail-warn-strong: #c94300;
    --color-accent-tint: transparent;
    --color-row-selected: transparent;
    --color-count-bubble-bg: transparent;
    --color-scan-ok-bg: transparent;
    --color-scan-fail-bg: transparent;
    --pick-glow: 0 0 0 1px var(--pick-rfid-ring), 0 0 10px 1px var(--pick-rfid-ring);
    --color-search-bg: var(--color-nav-hover-bg);
    --color-search-border: var(--color-topbar-muted);
  }
}

/*
 * Alternate palettes: <html data-theme="<key>"> comes from users.theme (UI_THEMES in app/lib/ui.php).
 * Screen only, so printing any page uses the light palette above. Brand, state, status, stage and
 * module colours stay as they are in every theme; body text keeps at least 4.5:1 on its surfaces.
 */
@media screen {
  /* ---------------------------------------------------------- dark base: dark, dim and the dark fun themes */
  :root[data-theme="dark"], :root[data-theme="dim"], :root[data-theme="amber"],
  :root[data-theme="phosphor"], :root[data-theme="synthwave"] {
    color-scheme: dark;
    --color-text-inverse: #ffffff;
    --color-shadow: rgba(0, 0, 0, 0.5);
    --color-modal-shadow: rgba(0, 0, 0, 0.7);
    --color-backdrop: rgba(0, 0, 0, 0.65);
    --color-input-shadow: rgba(0, 0, 0, 0.3);
    --color-nav-text-shadow: rgba(0, 0, 0, 0.5);
    --color-success-bg: #1d2a12;
    --color-success-ink: #b6dd72;
    --color-success-border: #3b5418;
    --color-error-bg: #3a1a1f;
    --color-error-ink: #f2a7ae;
    --color-error-border: #6a2c36;
    --color-info-bg: #102538;
    --color-info-ink: #93cbf2;
    --color-info-border: #1f4768;
    --color-warn-bg: #332a12;
    --color-warn-ink: #ecc978;
    --color-warn-border: #5e4b1c;
    --color-shortage-bg: #5c1f2b;
    --color-cancel: #5d646c;
    --color-cancel-hover: #4a5057;
    --color-tab-active-bg: #5d646c;
    --item-completed: #5d646c;
    /* the dark grey above is under 3:1 as a 2 px line on these surfaces */
    --pl-line-completed: var(--color-text);
    --pl-line-enquiry: var(--state-enquiry);
    --pl-line-draft: var(--state-draft);
    --pl-line-quotation: var(--state-quotation);
    --pl-line-reserved: #be2ead;
    --pl-line-order: #da202b;
    --pl-line-inactive: var(--status-inactive);
    /* light text sits on the heat scale here, so it runs dark olive to deep red */
    --heat-1: #4a4318;
    --heat-2: #6b5712;
    --heat-3: #7d5a08;
    --heat-4: #975200;
    --heat-5: #a84000;
    --heat-6: #b82a00;
    --avail-ok-tint: #4f7300;
    --avail-warn-tint: #8f3000;
    --avail-short-tint: #7a0012;
    --avail-booked-tint: #006666;
    /* identity (DESIGN.md, per-theme rules) */
    --color-dash-text: var(--color-text-inverse);
  }

  /* ---------------------------------------------------------- Dark */
  :root[data-theme="dark"] {
    --color-page-bg: #121417;
    --color-surface: #1a1d21;
    --color-surface-alt: #212429;
    --color-surface-sunken: #2a2e34;
    --color-border: #2f3339;
    --color-border-strong: #454a52;
    --color-text: #e3e5e8;
    --color-text-muted: #9ba2aa;
    --color-label: #c2c7cd;
    --color-text-input: #e3e5e8;
    --color-text-faint: #5d636b;
    --color-link: #4fb0ff;
    --color-link-hover: #8accff;
    --color-focus: #4fb0ff;
    --color-focus-ring: rgba(79, 176, 255, 0.4);
    --color-topbar-bg: #0c0e10;
    --color-nav-bg: #0c0e10;
    --color-nav-hover-bg: #23272c;
    --color-menu-bg: #22262b;
    --color-menu-hover-bg: #3a4048;
    --color-menu-border: #383d44;
    --color-th-bg: #212429;
    --color-th-text: #a2a9b1;
    --color-th-border: #3a3f46;
    --color-th-bar: #6c737c;
    --color-row-stripe: #1a1d21;
    --color-row-hover: #24282d;
    --color-date-band-bar: #3a3f46;
    --color-input-bg: #121417;
    --color-input-border: #4a5058;
    --color-addon-bg: #2a2e34;
    --color-toggle-off: #454a52;
    --color-toggle-off-text: #c2c7cd;
    --color-pictogram: #3f444b;
    --color-icon-btn: #b6bcc3;
    --color-icon-btn-ring: #454a52;
    --color-dash-panel: #0c0e10;
    --color-dash-track: #3a3f46;
    --color-tag-border: #3a3f46;
    --color-state-seg-on: #9ba2aa;
    --color-state-seg-off: #3a3f46;
    --color-neutral-bg: #212429;
    --color-neutral-ink: #b6bcc3;
    --color-neutral-border: #3a3f46;
    --color-weekend: #262a2f;
    /* identity (DESIGN.md, per-theme rules) */
    --color-menu-hover-text: #ffffff;
  }

  /* ---------------------------------------------------------- Dim: halfway, a mid charcoal */
  :root[data-theme="dim"] {
    --color-page-bg: #2b2f33;
    --color-surface: #33383d;
    --color-surface-alt: #3b4046;
    --color-surface-sunken: #454a50;
    --color-border: #474d54;
    --color-border-strong: #5c636a;
    --color-text: #eef0f2;
    --color-text-muted: #b4bbc2;
    --color-label: #d4d8dc;
    --color-text-input: #eef0f2;
    --color-text-faint: #6f767e;
    --color-link: #74c0ff;
    --color-link-hover: #a6d7ff;
    --color-focus: #74c0ff;
    --color-focus-ring: rgba(116, 192, 255, 0.4);
    --color-topbar-bg: #212428;
    --color-nav-bg: #212428;
    --color-nav-hover-bg: #363a3f;
    --color-menu-bg: #3b4046;
    --color-menu-hover-bg: #52585f;
    --color-menu-border: #555b62;
    --color-th-bg: #3b4046;
    --color-th-text: #bfc5cb;
    --color-th-border: #555b62;
    --color-th-bar: #80878f;
    --color-row-stripe: #33383d;
    --color-row-hover: #3d4248;
    --color-date-band-bar: #555b62;
    --color-shortage-bg: #6e2835;
    --color-input-bg: #2b2f33;
    --color-input-border: #62696f;
    --color-addon-bg: #454a50;
    --color-toggle-off: #5c636a;
    --color-toggle-off-text: #e2e5e8;
    --color-pictogram: #5a6168;
    --color-icon-btn: #c9ced3;
    --color-icon-btn-ring: #5c636a;
    --color-dash-panel: #212428;
    --color-dash-track: #555b62;
    --color-tag-border: #555b62;
    --color-state-seg-on: #b4bbc2;
    --color-state-seg-off: #50565d;
    --color-success-bg: #2e3b20;
    --color-success-ink: #c6e58d;
    --color-success-border: #4c6329;
    --color-error-bg: #4b2a30;
    --color-error-ink: #f7bcc2;
    --color-error-border: #7c3f49;
    --color-info-bg: #20374a;
    --color-info-ink: #aad6f6;
    --color-info-border: #355d7d;
    --color-warn-bg: #463b22;
    --color-warn-ink: #f0d596;
    --color-warn-border: #6f5c2e;
    --color-neutral-bg: #3b4046;
    --color-neutral-ink: #cdd2d7;
    --color-neutral-border: #555b62;
    --color-cancel: #6a7178;
    --color-cancel-hover: #5a6168;
    --color-tab-active-bg: #6a7178;
    --color-weekend: #40454b;
    /* planner calendar lines: at least 3:1 on this theme's cells */
    --pl-line-provisional: #128ef7;
    --pl-line-reserved: #df52cd;
    --pl-line-order: #fd4949;
    /* identity (DESIGN.md, per-theme rules) */
    --color-menu-hover-text: #ffffff;
  }

  /* ---------------------------------------------------------- secret themes (Shift/Ctrl+click the theme button) */

  /* Rainbow: a slowly flowing rainbow bar (app.css animates it), lavender-tinted panels. */
  :root[data-theme="rainbow"] {
    --color-page-bg: #fbf6ff;
    --color-surface-alt: #f8f3ff;
    --color-surface-sunken: #ece4fb;
    --color-border: #ece4f5;
    --color-border-strong: #d4c6e8;
    --color-text-muted: #75688c;
    --color-label: #54476b;
    --color-link: #0a5fb0;
    --color-link-hover: #6a1fb0;
    --color-topbar-bg: #6a1fb0;
    --theme-topbar-image: linear-gradient(90deg, #b0003a, #b83a00, #7a5c00, #1e7a1e, #0a5fb0, #6a1fb0, #b0003a);
    --color-topbar-muted: #f4ecff;
    --color-nav-bg: #4b1d8f;
    --color-nav-text: #f4ecff;
    --color-nav-hover-bg: rgba(0, 0, 0, 0.22);
    --color-store-link: #ffffff;
    --color-menu-hover-bg: #6a1fb0;
    --color-th-bg: #f6f0ff;
    --color-th-text: #6b5a85;
    --color-th-border: #d4c6e8;
    --color-th-bar: #b07cff;
    --color-row-hover: #f6f1ff;
    --color-date-band-bar: #d4c6e8;
    --color-dash-panel: #2a1640;
    --theme-dash-image: linear-gradient(120deg, #3b0a57, #0a3d6b 50%, #0d4d2a);
    --color-dash-muted: #d9ccef;
    --color-tab-active-bg: #75688c;
    --color-weekend: #efe8fb;
    /* identity (DESIGN.md, per-theme rules) */
    --color-menu-hover-text: #ffffff;
    --color-dash-text: var(--color-text-inverse);
    --color-avatar-bg: #ffffff;
    --color-avatar-text: #6a1fb0;
  }

  /* Retro 3.1: teal desktop, silver window chrome, navy title bars, bevels (app.css). */
  :root[data-theme="retro"] {
    --color-page-bg: #008080;
    --color-surface: #ffffff;
    --color-surface-alt: #c0c0c0;
    --color-surface-sunken: #a0a0a0;
    --color-border: #a0a0a0;
    --color-border-strong: #000000;
    --color-text: #000000;
    --color-text-muted: #404040;
    --color-label: #000000;
    --color-text-input: #000000;
    --color-text-faint: #808080;
    --color-link: #000080;
    --color-link-hover: #0000ff;
    --color-primary: #000080;
    --color-primary-hover: #0000b0;
    --color-focus: #000000;
    --color-focus-ring: rgba(0, 0, 128, 0.35);
    --color-cancel: #808080;
    --color-cancel-hover: #606060;
    --color-topbar-bg: #000080;
    --color-topbar-muted: #c0c0c0;
    --color-nav-bg: #000080;
    --color-nav-text: #c0c0c0;
    --color-nav-hover-bg: #0000b0;
    --color-store-link: #00ffff;
    --color-menu-hover-bg: #000080;
    --color-menu-border: #000000;
    --color-th-bg: #c0c0c0;
    --color-th-text: #000000;
    --color-th-border: #808080;
    --color-th-bar: #000080;
    --color-row-hover: #e8e8e8;
    --color-date-band-bar: #808080;
    --color-input-border: #808080;
    --color-input-shadow: rgba(0, 0, 0, 0.35);
    --color-addon-bg: #c0c0c0;
    --color-toggle-off: #808080;
    --color-toggle-off-text: #ffffff;
    --color-pictogram: #808080;
    --color-icon-btn: #000000;
    --color-icon-btn-ring: #808080;
    --color-tile: #000080;
    --color-tile-hover: #0000b0;
    --color-dash-panel: #000080;
    --color-dash-track: #4040a0;
    --color-dash-muted: #c0c0c0;
    --color-dash-fill: #00ffff;
    --color-tag-border: #808080;
    --color-shadow: rgba(0, 0, 0, 0.4);
    --color-state-seg-on: #000080;
    --color-state-seg-off: #c0c0c0;
    --color-footer-text: #ffffff;
    --color-tab-active-bg: #000080;
    --color-weekend: #d8d8d8;
    --radius-badge: 0;
    --radius-chip: 0;
    --bevel-light: #ffffff;
    --bevel-shade: #808080;
    --bevel-dark: #000000;
    /* planner calendar lines: at least 3:1 on this theme's cells */
    --pl-line-enquiry: #046e97;
    --pl-line-draft: #047373;
    --pl-line-quotation: #a15202;
    --pl-line-provisional: #0368b9;
    --pl-line-inactive: #676767;
    /* identity (DESIGN.md, per-theme rules) */
    --radius-control: 0;
    --pick-glow: 0 0 0 2px var(--color-scan-ok);
    --radius-panel: 0;
    --radius-menu: 0;
    --radius-round: 0;
    --color-menu-hover-text: #ffffff;
    --color-dash-text: var(--color-text-inverse);
    --color-btn-bg: #c0c0c0;
    --color-avatar-bg: #008080;
    --color-error-ink: #800000;   /* field errors sit on the silver or green panels */
  }

  /* Hot Dog Stand: red and yellow, black ink. */
  :root[data-theme="hotdog"] {
    --color-page-bg: #ff0000;
    --color-surface: #ffff00;
    --color-surface-alt: #ffe900;
    --color-surface-sunken: #ffd000;
    --color-border: #ff0000;
    --color-border-strong: #000000;
    --color-text: #000000;
    --color-text-muted: #6b0000;
    --color-label: #000000;
    --color-text-input: #000000;
    --color-text-faint: #d00000;
    --color-link: #b00000;
    --color-link-hover: #000000;
    --color-primary: #000000;
    --color-primary-hover: #400000;
    --color-on-primary: #ffff00;
    --color-focus: #000000;
    --color-focus-ring: rgba(0, 0, 0, 0.35);
    --color-cancel: #b00000;
    --color-cancel-hover: #800000;
    --color-topbar-bg: #000000;
    --color-topbar-text: #ffff00;
    --color-topbar-muted: #ffff00;
    --color-nav-bg: #000000;
    --color-nav-text: #ffd400;
    --color-nav-hover-bg: #600000;
    --color-store-link: #ff5050;
    --color-menu-bg: #ffff00;
    --color-menu-hover-bg: #ff0000;
    --color-menu-hover-text: #000000;
    --color-menu-border: #000000;
    --color-th-bg: #ff0000;
    --color-th-text: #000000;
    --color-th-border: #000000;
    --color-th-bar: #000000;
    --color-row-hover: #ffe066;
    --color-date-band-bar: #ff0000;
    --color-shortage-bg: #ff9d9d;
    --color-input-border: #000000;
    --color-addon-bg: #ffe900;
    --color-toggle-off: #b00000;
    --color-toggle-off-text: #ffff00;
    --color-pictogram: #ff0000;
    --color-icon-btn: #000000;
    --color-icon-btn-ring: #ff0000;
    --color-tile: #b00000;
    --color-tile-hover: #800000;
    --color-dash-panel: #000000;
    --color-dash-track: #ffff00;
    --color-dash-muted: #ffff00;
    --color-dash-fill: #ff0000;
    --color-tag-border: #ff0000;
    --color-state-seg-on: #000000;
    --color-state-seg-off: #ff9d9d;
    --color-footer-text: #000000;
    --color-tab-active-bg: #000000;
    --color-weekend: #ffd000;
    /* planner calendar lines: at least 3:1 on this theme's cells */
    --pl-line-enquiry: #078bbc;
    --pl-line-draft: #069090;
    --pl-line-quotation: #c86804;
    --pl-line-provisional: #0383e7;
    --pl-line-inactive: #818181;
    /* identity (DESIGN.md, per-theme rules) */
    --radius-control: 0;
    --pick-glow: 0 0 0 2px var(--color-scan-ok);
    --radius-panel: 0;
    --radius-badge: 0;
    --radius-chip: 0;
    --radius-menu: 0;
    --radius-round: 0;
    --color-dash-text: var(--color-text-inverse);
    --color-primary-strong: var(--color-primary);
    --color-primary-strong-hover: var(--color-primary-hover);
    --color-avatar-bg: #ff0000;
    --color-avatar-text: #000000;
  }

  /* Luna Blue: blue bar, beige window faces, green go buttons, rounded corners. */
  :root[data-theme="luna"] {
    --color-page-bg: #3a6ea5;
    --color-surface: #ffffff;
    --color-surface-alt: #ece9d8;
    --color-surface-sunken: #d6d2c2;
    --color-border: #d6d2c2;
    --color-border-strong: #7f9db9;
    --color-text: #000000;
    --color-text-muted: #5c5c5c;
    --color-label: #1e1e1e;
    --color-text-input: #000000;
    --color-text-faint: #aca899;
    --color-link: #0046d5;
    --color-link-hover: #0033a0;
    --color-primary: #2f7d10;
    --color-primary-hover: #256a0b;
    --color-focus: #316ac5;
    --color-focus-ring: rgba(49, 106, 197, 0.35);
    --color-cancel: #5f739f;
    --color-cancel-hover: #4c5f8a;
    --color-topbar-bg: #245edb;
    --theme-topbar-image: linear-gradient(180deg, #2f6fe6 0%, #245edb 35%, #1d4fc0 100%);
    --color-topbar-muted: #e6efff;
    --color-nav-bg: #245edb;
    --color-nav-text: #e6efff;
    --color-nav-hover-bg: #1941a5;
    --color-store-link: #ffffff;
    --color-menu-hover-bg: #316ac5;
    --color-menu-border: #aca899;
    --color-th-bg: #ebeadb;
    --color-th-text: #4d4d4d;
    --color-th-border: #c7c5b2;
    --color-th-bar: #316ac5;
    --color-row-hover: #eef3fc;
    --color-date-band-bar: #c7c5b2;
    --color-input-border: #7f9db9;
    --color-addon-bg: #ece9d8;
    --color-pictogram: #8ba5d6;
    --color-icon-btn: #245edb;
    --color-icon-btn-ring: #7f9db9;
    --color-tile: #316ac5;
    --color-tile-hover: #245edb;
    --color-dash-panel: #1d4fc0;
    --theme-dash-image: linear-gradient(180deg, #2458d0, #16399a);
    --color-dash-track: #7f9db9;
    --color-dash-muted: #d2e2ff;
    --color-state-seg-on: #316ac5;
    --color-state-seg-off: #d6d2c2;
    --color-footer-text: #ffffff;
    --color-tab-active-bg: #316ac5;
    --radius-panel: 8px;
    --radius-control: 3px;
    --theme-btn-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.08));
    /* planner calendar lines: at least 3:1 on this theme's cells */
    --pl-line-enquiry: #028cbe;
    --pl-line-draft: #059292;
    --pl-line-quotation: #ca6901;
    --pl-line-provisional: #0185ea;
    --pl-line-inactive: #838383;
    /* identity (DESIGN.md, per-theme rules) */
    --radius-badge: 3px;
    --radius-chip: 3px;
    --radius-menu: 8px;
    --color-menu-hover-text: #ffffff;
    --color-dash-text: var(--color-text-inverse);
    --color-search-placeholder: var(--color-topbar-text);
    --color-avatar-bg: #ffffff;
    --color-avatar-text: #245edb;
  }

  /* Platinum: light grey pinstripes, blue-grey highlights, lavender selection. */
  :root[data-theme="platinum"] {
    --color-page-bg: #9c9cc6;
    --color-surface: #ffffff;
    --color-surface-alt: #dddddd;
    --color-surface-sunken: #cccccc;
    --color-border: #cccccc;
    --color-border-strong: #888888;
    --color-text: #000000;
    --color-text-muted: #555555;
    --color-label: #222222;
    --color-text-input: #000000;
    --color-text-faint: #999999;
    --color-link: #333399;
    --color-link-hover: #6666cc;
    --color-primary: #6666cc;
    --color-primary-hover: #5555bb;
    --color-focus: #6666cc;
    --color-focus-ring: rgba(102, 102, 204, 0.35);
    --color-cancel: #767676;
    --color-cancel-hover: #5f5f5f;
    --color-topbar-bg: #dddddd;
    --theme-topbar-image: repeating-linear-gradient(180deg, #e4e4e4 0 1px, #d6d6d6 1px 2px);
    --color-topbar-text: #000000;
    --color-topbar-muted: #222222;
    --color-nav-bg: #dddddd;
    --color-nav-text: #333333;
    --color-nav-hover-bg: #ccccff;
    --color-store-link: #333399;
    --color-store-icon: #333399;
    --color-menu-bg: #eeeeee;
    --color-menu-hover-bg: #ccccff;
    --color-menu-hover-text: #000000;
    --color-menu-border: #888888;
    --color-th-bg: #dddddd;
    --color-th-text: #222222;
    --color-th-border: #999999;
    --color-th-bar: #6666cc;
    --color-row-hover: #f0f0ff;
    --color-date-band-bar: #bbbbbb;
    --color-input-border: #888888;
    --color-addon-bg: #dddddd;
    --color-pictogram: #aaaaaa;
    --color-icon-btn: #333333;
    --color-icon-btn-ring: #aaaaaa;
    --color-tile: #6666cc;
    --color-tile-hover: #5555bb;
    --color-dash-panel: #444466;
    --color-dash-track: #8888aa;
    --color-dash-muted: #ccccff;
    --color-state-seg-on: #6666cc;
    --color-state-seg-off: #cccccc;
    --color-footer-text: #000000;
    --color-tab-active-bg: #6666cc;
    --color-weekend: #e8e8e8;
    --theme-pinstripe: repeating-linear-gradient(180deg, #e2e2e2 0 1px, #d8d8d8 1px 2px);
    --bevel-light: #ffffff;
    --bevel-shade: #999999;
    --bevel-dark: #555555;
    /* planner calendar lines: at least 3:1 on this theme's cells */
    --pl-line-enquiry: #0084b4;
    --pl-line-draft: #038989;
    --pl-line-quotation: #be6302;
    --pl-line-provisional: #007ddd;
    --pl-line-inactive: #7b7b7b;
    /* identity (DESIGN.md, per-theme rules) */
    --radius-control: 0;
    --pick-glow: 0 0 0 2px var(--color-scan-ok);
    --radius-panel: 0;
    --radius-menu: 0;
    --radius-round: 0;
    --color-dash-text: var(--color-text-inverse);
    --color-btn-bg: #dddddd;
  }

  /* Amber Terminal and Green Phosphor: glowing monospace on black. */
  :root[data-theme="amber"], :root[data-theme="phosphor"] {
    --font-sans: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
    --search-kbd-display: none;
    --search-kbd-room: 12px;
    --color-topbar-bg: #000000;
    --color-nav-bg: #000000;
    --color-input-bg: #000000;
    --color-dash-panel: #000000;
    /* identity (DESIGN.md, per-theme rules) */
    --radius-control: 0;
    --pick-glow: 0 0 0 2px var(--color-scan-ok);
    --radius-panel: 0;
    --radius-badge: 0;
    --radius-chip: 0;
    --radius-menu: 0;
    --radius-round: 0;
    --color-primary-strong: var(--color-primary);
    --color-primary-strong-hover: var(--color-primary-hover);
  }
  :root[data-theme="amber"] {
    --color-page-bg: #0a0700;
    --color-surface: #0f0b02;
    --color-surface-alt: #181104;
    --color-surface-sunken: #221806;
    --color-border: #3d2a00;
    --color-border-strong: #6b4a00;
    --color-text: #ffb000;
    --color-text-muted: #cc8c00;
    --color-label: #ffc445;
    --color-text-input: #ffc445;
    --color-text-faint: #6b4a00;
    --color-link: #ffd35c;
    --color-link-hover: #ffe9a8;
    --color-primary: #ffb000;
    --color-primary-hover: #e09a00;
    --color-on-primary: #0a0700;
    --color-focus: #ffd35c;
    --color-focus-ring: rgba(255, 176, 0, 0.35);
    --color-cancel: #6b4a00;
    --color-cancel-hover: #553b00;
    --color-topbar-text: #ffcc4d;
    --color-topbar-muted: #ffb000;
    --color-nav-text: #cc8c00;
    --color-nav-hover-bg: #221806;
    --color-store-link: #ffd35c;
    --color-store-icon: #ffb000;
    --color-avatar-bg: #8a5d00;
    --color-menu-bg: #140e02;
    --color-menu-hover-bg: #ffb000;
    --color-menu-hover-text: #0a0700;
    --color-menu-border: #6b4a00;
    --color-th-bg: #181104;
    --color-th-text: #e09a00;
    --color-th-border: #6b4a00;
    --color-th-bar: #ffb000;
    --color-row-stripe: #0f0b02;
    --color-row-hover: #1f1604;
    --color-date-band-bar: #3d2a00;
    --color-input-border: #6b4a00;
    --color-addon-bg: #221806;
    --color-toggle-off: #3d2a00;
    --color-toggle-off-text: #ffb000;
    --color-pictogram: #4d3500;
    --color-icon-btn: #ffb000;
    --color-icon-btn-ring: #6b4a00;
    --color-tile: #8a5d00;
    --color-tile-hover: #a36e00;
    --color-dash-track: #3d2a00;
    --color-dash-muted: #cc8c00;
    --color-tag-border: #6b4a00;
    --color-state-seg-on: #ffb000;
    --color-state-seg-off: #3d2a00;
    --color-neutral-bg: #181104;
    --color-neutral-ink: #e09a00;
    --color-neutral-border: #3d2a00;
    --color-tab-active-bg: #8a5d00;
    --item-completed: #6b4a00;
    --color-weekend: #1a1305;
    --heat-1: #2e2000;
    --heat-2: #3d2a00;
    --heat-3: #4d3500;
    --heat-4: #5c3f00;
    --heat-5: #7a3d00;
    --heat-6: #9e2a00;
    --theme-title-glow: 0 0 6px rgba(255, 176, 0, 0.55);
  }
  :root[data-theme="phosphor"] {
    --color-page-bg: #020a03;
    --color-surface: #041006;
    --color-surface-alt: #07180a;
    --color-surface-sunken: #0b220f;
    --color-border: #0f3d18;
    --color-border-strong: #1a6b2a;
    --color-text: #33ff66;
    --color-text-muted: #22c24a;
    --color-label: #7dff9c;
    --color-text-input: #7dff9c;
    --color-text-faint: #1a6b2a;
    --color-link: #9dffb5;
    --color-link-hover: #d4ffe0;
    --color-primary: #33ff66;
    --color-primary-hover: #22d94f;
    --color-on-primary: #021004;
    --color-focus: #9dffb5;
    --color-focus-ring: rgba(51, 255, 102, 0.35);
    --color-cancel: #1a6b2a;
    --color-cancel-hover: #145a22;
    --color-topbar-text: #7dff9c;
    --color-topbar-muted: #33ff66;
    --color-nav-text: #22c24a;
    --color-nav-hover-bg: #0b220f;
    --color-store-link: #9dffb5;
    --color-store-icon: #33ff66;
    --color-avatar-bg: #146b2e;
    --color-menu-bg: #041006;
    --color-menu-hover-bg: #33ff66;
    --color-menu-hover-text: #021004;
    --color-menu-border: #1a6b2a;
    --color-th-bg: #07180a;
    --color-th-text: #2ee05a;
    --color-th-border: #1a6b2a;
    --color-th-bar: #33ff66;
    --color-row-stripe: #041006;
    --color-row-hover: #0a1f0e;
    --color-date-band-bar: #0f3d18;
    --color-input-border: #1a6b2a;
    --color-addon-bg: #0b220f;
    --color-toggle-off: #0f3d18;
    --color-toggle-off-text: #33ff66;
    --color-pictogram: #145a22;
    --color-icon-btn: #33ff66;
    --color-icon-btn-ring: #1a6b2a;
    --color-tile: #146b2e;
    --color-tile-hover: #1a8038;
    --color-dash-track: #0f3d18;
    --color-dash-muted: #22c24a;
    --color-tag-border: #1a6b2a;
    --color-state-seg-on: #33ff66;
    --color-state-seg-off: #0f3d18;
    --color-neutral-bg: #07180a;
    --color-neutral-ink: #2ee05a;
    --color-neutral-border: #0f3d18;
    --color-tab-active-bg: #146b2e;
    --item-completed: #1a6b2a;
    --color-weekend: #08190b;
    --heat-1: #0f2e14;
    --heat-2: #143a1a;
    --heat-3: #194a21;
    --heat-4: #1d5a27;
    --heat-5: #7a4a00;
    --heat-6: #9e2a00;
    --theme-title-glow: 0 0 6px rgba(51, 255, 102, 0.55);
  }

  /* Vaporwave: pastel pink and lavender, a pink-to-teal gradient bar. */
  :root[data-theme="vaporwave"] {
    --color-page-bg: #ffd6f0;
    --color-surface: #fff8fd;
    --color-surface-alt: #f6ebff;
    --color-surface-sunken: #ecdcff;
    --color-border: #f0d6f5;
    --color-border-strong: #d9a8e8;
    --color-text: #2b0a3d;
    --color-text-muted: #6e3b86;
    --color-label: #4a1f63;
    --color-text-input: #2b0a3d;
    --color-text-faint: #d1a3e0;
    --color-link: #a3007c;
    --color-link-hover: #6a1fb0;
    --color-primary: #8a2be2;
    --color-primary-hover: #7420c4;
    --color-focus: #8a2be2;
    --color-focus-ring: rgba(138, 43, 226, 0.3);
    --color-cancel: #9a4fb3;
    --color-cancel-hover: #85409c;
    --color-topbar-bg: #6a1fb0;
    --theme-topbar-image: linear-gradient(90deg, #6a1fb0, #c2266e 50%, #096a7a);
    --color-topbar-muted: #ffe6f7;
    --color-nav-bg: #6a1fb0;
    --color-nav-text: #ffe6f7;
    --color-nav-hover-bg: rgba(0, 0, 0, 0.2);
    --color-store-link: #ffffff;
    --color-menu-bg: #fff0fb;
    --color-menu-hover-bg: #8a2be2;
    --color-menu-border: #d9a8e8;
    --color-th-bg: #ffe0f5;
    --color-th-text: #6e3b86;
    --color-th-border: #01cdfe;
    --color-th-bar: #ff71ce;
    --color-row-hover: #fbefff;
    --color-date-band-bar: #d9a8e8;
    --color-shortage-bg: #ffc2d6;
    --color-input-border: #d9a8e8;
    --color-addon-bg: #f6ebff;
    --color-pictogram: #e0a8ee;
    --color-icon-btn: #6e3b86;
    --color-icon-btn-ring: #d9a8e8;
    --color-tile: #8a2be2;
    --color-tile-hover: #7420c4;
    --color-dash-panel: #6a1fb0;
    --theme-dash-image: linear-gradient(120deg, #6a1fb0, #c2266e 55%, #096a7a);
    --color-dash-track: #d9a8e8;
    --color-dash-muted: #fff0fa;
    --color-dash-fill: #01cdfe;
    --color-tag-border: #d9a8e8;
    --color-state-seg-on: #8a2be2;
    --color-state-seg-off: #ecdcff;
    --color-footer-text: #4a1f63;
    --color-tab-active-bg: #8a2be2;
    --color-weekend: #f3e3fb;
    /* identity (DESIGN.md, per-theme rules) */
    --color-menu-hover-text: #ffffff;
    --color-dash-text: var(--color-text-inverse);
    --color-avatar-bg: #01cdfe;
    --color-avatar-text: #2b0a3d;
  }

  /* Synthwave: night purple with neon magenta and cyan. */
  :root[data-theme="synthwave"] {
    --color-page-bg: #120524;
    --color-surface: #1a0b33;
    --color-surface-alt: #22103f;
    --color-surface-sunken: #2c1650;
    --color-border: #3a1f66;
    --color-border-strong: #5a2f99;
    --color-text: #f4e9ff;
    --color-text-muted: #b9a3dd;
    --color-label: #dcc8ff;
    --color-text-input: #f4e9ff;
    --color-text-faint: #5a3f85;
    --color-link: #05d9e8;
    --color-link-hover: #7ff4fb;
    --color-primary: #ff2a6d;
    --color-primary-hover: #e0105a;
    --color-focus: #05d9e8;
    --color-focus-ring: rgba(5, 217, 232, 0.4);
    --color-cancel: #5a2f99;
    --color-cancel-hover: #4a2580;
    --color-topbar-bg: #0d0221;
    --theme-topbar-image: linear-gradient(90deg, #1b0536, #3d0b5c 50%, #0d2447);
    --color-topbar-muted: #e3ccff;
    --color-nav-bg: #0d0221;
    --color-nav-text: #d1b3ff;
    --color-nav-hover-bg: rgba(255, 42, 109, 0.3);
    --color-store-link: #05d9e8;
    --color-menu-bg: #22103f;
    --color-menu-hover-bg: #c4104f;
    --color-menu-border: #5a2f99;
    --color-th-bg: #22103f;
    --color-th-text: #d1b3ff;
    --color-th-border: #ff2a6d;
    --color-th-bar: #05d9e8;
    --color-row-stripe: #1a0b33;
    --color-row-hover: #28134a;
    --color-date-band-bar: #5a2f99;
    --color-shortage-bg: #5c0f33;
    --color-input-bg: #120524;
    --color-input-border: #5a2f99;
    --color-addon-bg: #2c1650;
    --color-toggle-off: #3a1f66;
    --color-toggle-off-text: #dcc8ff;
    --color-pictogram: #4a2a80;
    --color-icon-btn: #d1b3ff;
    --color-icon-btn-ring: #5a2f99;
    --color-tile: #7a1fa2;
    --color-tile-hover: #8f2bbd;
    --color-dash-panel: #0d0221;
    --theme-dash-image: linear-gradient(135deg, #1b0536 0%, #3d0b5c 60%, #0d2447 100%);
    --color-dash-track: #3a1f66;
    --color-dash-muted: #b9a3dd;
    --color-tag-border: #5a2f99;
    --color-state-seg-on: #05d9e8;
    --color-state-seg-off: #3a1f66;
    --color-neutral-bg: #22103f;
    --color-neutral-ink: #d1b3ff;
    --color-neutral-border: #3a1f66;
    --color-tab-active-bg: #5a2f99;
    --item-completed: #5a2f99;
    --color-weekend: #231245;
    --theme-title-glow: 0 0 10px rgba(255, 42, 109, 0.75), 0 0 2px rgba(5, 217, 232, 0.6);
    /* identity (DESIGN.md, per-theme rules) */
    --color-menu-hover-text: #ffffff;
  }

  /* Game Pocket: the four olive greens of an early handheld screen. */
  :root[data-theme="pocket"] {
    --color-page-bg: #0f380f;
    --color-surface: #9bbc0f;
    --color-surface-alt: #8bac0f;
    --color-surface-sunken: #7a9a0c;
    --color-border: #306230;
    --color-border-strong: #0f380f;
    --color-text: #0f380f;
    --color-text-muted: #183f18;
    --color-label: #0f380f;
    --color-text-input: #0f380f;
    --color-text-faint: #306230;
    --color-link: #0f380f;
    --color-link-hover: #306230;
    --color-primary: #0f380f;
    --color-primary-hover: #306230;
    --color-on-primary: #9bbc0f;
    --color-focus: #0f380f;
    --color-focus-ring: rgba(15, 56, 15, 0.35);
    --color-create: #306230;
    --color-create-hover: #0f380f;
    --color-cancel: #306230;
    --color-cancel-hover: #0f380f;
    --color-topbar-bg: #0f380f;
    --color-topbar-text: #9bbc0f;
    --color-topbar-muted: #8bac0f;
    --color-nav-bg: #0f380f;
    --color-nav-text: #8bac0f;
    --color-nav-hover-bg: #1a4a1a;
    --color-store-link: #9bbc0f;
    --color-store-icon: #9bbc0f;
    --color-avatar-bg: #8bac0f;
    --color-menu-bg: #9bbc0f;
    --color-menu-hover-bg: #0f380f;
    --color-menu-hover-text: #9bbc0f;
    --color-menu-border: #0f380f;
    --color-th-bg: #8bac0f;
    --color-th-text: #0f380f;
    --color-th-border: #0f380f;
    --color-th-bar: #306230;
    --color-row-stripe: #9bbc0f;
    --color-row-hover: #8bac0f;
    --color-date-band-bar: #306230;
    --color-input-bg: #b5cc3a;
    --color-input-border: #306230;
    --color-input-shadow: rgba(15, 56, 15, 0.2);
    --color-addon-bg: #8bac0f;
    --color-toggle-off: #306230;
    --color-toggle-off-text: #9bbc0f;
    --color-pictogram: #306230;
    --color-icon-btn: #0f380f;
    --color-icon-btn-ring: #306230;
    --color-tile: #306230;
    --color-tile-hover: #0f380f;
    --color-dash-panel: #0f380f;
    --color-dash-track: #306230;
    --color-dash-muted: #8bac0f;
    --color-dash-fill: #9bbc0f;
    --color-tag-border: #306230;
    --color-state-seg-on: #0f380f;
    --color-state-seg-off: #8bac0f;
    --color-footer-text: #9bbc0f;
    --color-tab-active-bg: #306230;
    --color-weekend: #8bac0f;
    /* planner calendar lines: at least 3:1 on this theme's cells */
    --pl-line-enquiry: #025575;
    --pl-line-draft: #035959;
    --pl-line-quotation: #7d3e00;
    --pl-line-provisional: #005092;
    --pl-line-reserved: #920285;
    --pl-line-order: #a20216;
    --pl-line-inactive: #4f4f4f;
    /* identity (DESIGN.md, per-theme rules) */
    --radius-control: 0;
    --pick-glow: 0 0 0 2px var(--color-scan-ok);
    --radius-panel: 0;
    --radius-badge: 0;
    --radius-chip: 0;
    --radius-menu: 0;
    --radius-round: 0;
    --color-dash-text: var(--color-text-inverse);
    --color-search-placeholder: var(--color-topbar-text);
    --color-primary-strong: var(--color-primary);
    --color-primary-strong-hover: #1a4a1a;
    --color-avatar-text: #0f380f;
    --color-error-ink: #0f380f;   /* field errors sit on the silver or green panels */
  }
}