/* ──────────────────────────────────────────────────────────────────────────
   PrepTrax theme aliases

   Product-local semantic overrides belong here. They are intentionally scoped
   to the landing shell because the rest of PrepTrax remains outside the
   approved Phase 1 migration. The values preserve the prior light-mode
   rendering while removing them from landing.html's inline stylesheet.
   ────────────────────────────────────────────────────────────────────────── */

:root[data-theme="light"] body.dashboard-body:is(.landing-shell-body, .client-body).prep-teal-theme {
  color-scheme: light !important;
  --ptx-base: #f0eee6 !important;
  --ptx-deep: #e4e5da !important;
  --ptx-violet: #a75c49 !important;
  --ptx-violet-soft: rgba(167, 92, 73, 0.16) !important;
  --ptx-neon-blue: #536a82 !important;
  --ptx-neon-soft: rgba(83, 106, 130, 0.16) !important;
  --ptx-gold: #a65d00 !important;
  --ptx-white: #2d2924 !important;
  --ptx-text: #2d2924 !important;
  --ptx-text-muted: #5d6258 !important;
  --ptx-text-dim: #7a7d72 !important;
  --ptx-glass-bg: #fbfaf5 !important;
  --ptx-glass-bg-hi: #f4f1e8 !important;
  --ptx-glass-border: #d8d6ca !important;
  --ptx-glass-shadow: 0 10px 24px rgba(75, 69, 55, 0.07) !important;
  --ptx-active-grad: linear-gradient(90deg, #a75c49, #d9ad69) !important;
  --ptx-canvas-grad: radial-gradient(circle at 88% 0%, rgba(217, 173, 105, 0.10), transparent 24%), linear-gradient(180deg, #f5f3ec 0%, #f0efe7 100%) !important;
  --bg: #f0efe7 !important;
  --bg-2: #f5f3ec !important;
  --bg-3: #fbfaf5 !important;
  --bg-4: #e9e8df !important;
  --bg-panel: #fbfaf5 !important;
  --bg-surface: #fbfaf5 !important;
  --bg-card: #fbfaf5 !important;
  --bg-primary: #f0efe7 !important;
  --bg-panel-2: #f4f1e8 !important;
  --glass: #fbfaf5 !important;
  --glass-hover: #f4f1e8 !important;
  --glass-strong: #fffdf8 !important;
  --text: #2d2924 !important;
  --text-primary: #2d2924 !important;
  --text-2: #5d6258 !important;
  --text-secondary: #5d6258 !important;
  --text-3: #7a7d72 !important;
  --text-muted: #7a7d72 !important;
  --text-4: #85887d !important;
  --text-label: #3c6044 !important;
  --text-inverted: #fffdf8 !important;
  --border: #d8d6ca !important;
  --border-hover: #b8aa8f !important;
  --border-mid: #cfd3c6 !important;
  --border-bright: #a75c49 !important;
  --border-glow: rgba(167, 92, 73, 0.24) !important;
  --tx-canvas: #f0efe7 !important;
  --tx-text: #2d2924 !important;
  --tx-text-secondary: #5d6258 !important;
  --tx-text-muted: #7a7d72 !important;
  --tx-border: #d8d6ca !important;
  --tx-surface: #fbfaf5 !important;
  --tx-surface-bottom: #f4f1e8 !important;
  background: var(--ptx-canvas-grad) !important;
  color: #2d2924 !important;
}

/* Warehouse Overview light-mode aliases. Page layout and component rules
   remain in index.html; this file owns the product-level semantic mapping. */
:root[data-theme="light"] body.dashboard-body.overview-page-shell.prep-teal-theme {
  color-scheme: light;
  --overview-primary: #20372d;
  --overview-structural: #d8d6ca;
  --overview-highlight: #a8b2cc;
  --overview-critical: #a65343;
  --overview-severe: #894d41;
  --overview-accent-mint: #55734e;
  --overview-accent-lime: #5e805c;
  --overview-accent-gold: #9a6b2e;
  --overview-accent-lavender: #536a82;
  --overview-white: #2d2924;
  --text: #2d2924;
  --text-primary: #2d2924;
  --text-secondary: #5d6258;
  --text-muted: #7a7d72;
  --tx-text: #2d2924;
  --tx-text-secondary: #5d6258;
  --tx-text-muted: #7a7d72;
  --ptx-base: #f5f3ec;
  --ptx-deep: #f0efe7;
  --ptx-violet: #a8b2cc;
  --ptx-neon-blue: #7c8c71;
  --ptx-gold: #d9ad69;
  --ptx-white: #2d2924;
  --ptx-text: #2d2924;
  --ptx-text-muted: #5d6258;
  --ptx-text-dim: #7a7d72;
  --ptx-glass-bg: #fbfaf5;
  --ptx-glass-bg-hi: #fffdf8;
  --ptx-glass-border: #d8d6ca;
  --ptx-glass-shadow: 0 10px 24px rgba(75, 69, 55, 0.07);
  --tx-color-accent-primary: #c96f58;
  --tx-color-accent-primary-soft: rgba(201, 111, 88, 0.12);
  --tx-color-accent-primary-strong: #a95443;
  --tx-color-accent-secondary: #8b9a80;
  --tx-color-accent-info: #a8b2cc;
  --tx-color-accent-danger: #a65343;
  --tx-color-border: #d8d6ca;
  --tx-color-border-blue: rgba(168, 178, 204, 0.58);
  --tx-color-border-cyan: rgba(139, 154, 128, 0.52);
}

/* Canonical warehouse shell aliases. The shared shell stylesheet owns layout
   and component rules; this token block owns the Changelog reference palette. */
:root[data-theme="light"] body#ptx-warehouse-shell {
  --ptx-shell-canvas-start: #f5f3ec;
  --ptx-shell-canvas-end: #f0efe7;
  --ptx-shell-ink: #2d2924;
  --ptx-shell-sidebar: #20372d;
  --ptx-shell-sidebar-border: #456052;
  --ptx-shell-sidebar-text: #eff1e9;
  --ptx-shell-header-border: #d8d6ca;
  --ptx-shell-header-copy: #455548;
  --ptx-shell-nav-text: #d9ded2;
  --ptx-shell-nav-muted: #9fb5a5;
  --ptx-shell-nav-icon: #dbe3d5;
  --ptx-shell-nav-hover-text: #fffaf0;
  --ptx-shell-nav-active: #2c493a;
  --ptx-shell-gold: #d9ad69;
  --ptx-shell-gold-light: #e8c386;
  --ptx-shell-control: #fffdf8;
  --ptx-shell-control-icon: #536a82;
  --ptx-shell-panel: #fbfaf5;
  --ptx-shell-copy: #5d6258;
  --ptx-shell-canvas-glow: rgba(217, 173, 105, 0.10);
  --ptx-shell-sidebar-shadow: rgba(24, 40, 31, 0.16);
  --ptx-shell-header-shadow: rgba(54, 58, 48, 0.04);
  --ptx-shell-nav-hover: rgba(245, 243, 236, 0.09);
  --ptx-shell-nav-hover-border: rgba(217, 173, 105, 0.28);
  --ptx-shell-nav-active-shadow: rgba(14, 28, 21, 0.20);
  --ptx-shell-sidebar-icon: rgba(226, 233, 218, 0.13);
  --ptx-shell-sidebar-icon-border: rgba(226, 233, 218, 0.18);
  --ptx-shell-panel-shadow: rgba(75, 69, 55, 0.18);
}

/* Station Hub semantic aliases. Shared station layout remains in the active
   station-hub stylesheet; these page-specific values are intentionally scoped
   so the other station workflows do not inherit them. */
body.dashboard-body.prep-teal-theme:is(.station-hub-page, .station-prep-page, .station-boxing-page, .station-sorting-page, .station-qc-page, .station-picking-page, .station-shipping-page)[data-category="stations"] {
  --sh-surface: linear-gradient(160deg, rgba(7,84,102,.56), rgba(3,36,52,.72));
  --sh-soft: rgba(3,39,54,.58);
  --sh-surface-muted: var(--sh-soft);
  --sh-surface-soft: rgba(3,39,54,.48);
  --sh-text: #fff;
  --sh-ink: var(--sh-text);
  --sh-muted: rgba(255,255,255,.72);
  --sh-copy: var(--sh-muted);
  --sh-dim: rgba(255,255,255,.54);
  --sh-border: rgba(40,215,232,.38);
  --sh-border-strong: rgba(168,241,229,.52);
  --sh-focus: rgba(168,241,229,.52);
  --sh-green: #6ee7b7;
  --sh-blue: #a8f1e5;
  --sh-gold: #f6c664;
  --sh-danger: #f1948a;
  --sh-shadow: 0 18px 40px rgba(0,25,31,.30), inset 0 1px 0 rgba(255,255,255,.12);
}

:root[data-theme="light"] body.dashboard-body.prep-teal-theme:is(.station-hub-page, .station-prep-page, .station-boxing-page, .station-sorting-page, .station-qc-page, .station-picking-page, .station-shipping-page)[data-category="stations"] {
  color-scheme: light;
  --sh-surface: #fbfaf5;
  --sh-soft: #eef0e8;
  --sh-surface-muted: #f0efe7;
  --sh-surface-soft: #f6f5ef;
  --sh-text: #2d2924;
  --sh-ink: #2d2924;
  --sh-muted: #5d6258;
  --sh-copy: #5d6258;
  --sh-dim: #7a7d72;
  --sh-border: #d8d6ca;
  --sh-border-strong: #c5c8ba;
  --sh-focus: rgba(167,92,73,.16);
  --sh-green: #55734e;
  --sh-blue: #536a82;
  --sh-gold: #9a6b2e;
  --sh-danger: #a65343;
  --sh-shadow: 0 10px 24px rgba(75,69,55,.07);
}

/* Lower-risk warehouse workflow aliases. Existing page layouts retain their
   scoped compatibility rules; repeated semantic values have one owner here. */
:root[data-theme="light"] body.label-printing-page {
  color-scheme: light;
  --ptx-label-surface: #fbfaf5;
  --ptx-label-muted: #f0efe7;
  --ptx-label-soft: #f6f5ef;
  --ptx-label-border: #d8d6ca;
  --ptx-label-border-strong: #c5c8ba;
  --ptx-label-ink: #2d2924;
  --ptx-label-copy: #5d6258;
  --ptx-label-muted-copy: #7a7d72;
  --ptx-label-green: #55734e;
  --ptx-label-blue: #536a82;
  --ptx-label-danger: #a65343;
}

:root[data-theme="light"] body.inbound-expected-inventory-page,
:root[data-theme="light"] body.inbound-bol-capture-page {
  color-scheme: light;
  --ptx-workflow-surface: #fbfaf5;
  --ptx-workflow-surface-muted: #f0efe7;
  --ptx-workflow-border: #d8d6ca;
  --ptx-workflow-border-strong: #c5c8ba;
  --ptx-workflow-ink: #2d2924;
  --ptx-workflow-copy: #5d6258;
  --ptx-workflow-muted: #7a7d72;
  --ptx-workflow-forest: #20372d;
  --ptx-workflow-green: #55734e;
  --ptx-workflow-blue: #536a82;
  --ptx-workflow-gold: #9a6b2e;
  --ptx-workflow-danger: #a65343;
}

body.prep-work-orders-page {
  --ptx-work-order-surface: linear-gradient(160deg, rgba(7, 84, 102, 0.56), rgba(3, 36, 52, 0.72));
  --ptx-work-order-soft: rgba(3, 39, 54, 0.58);
  --ptx-work-order-text: #ffffff;
  --ptx-work-order-text-muted: rgba(255, 255, 255, 0.72);
  --ptx-work-order-border: rgba(40, 215, 232, 0.38);
  --ptx-work-order-shadow: 0 18px 40px rgba(0, 25, 31, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --ptx-work-order-focus: rgba(168, 241, 229, 0.52);
}

:root[data-theme="light"] body.prep-work-orders-page {
  color-scheme: light;
  --ptx-work-order-surface: #fbfaf5;
  --ptx-work-order-soft: #eef0e8;
  --ptx-work-order-text: #2d2924;
  --ptx-work-order-text-muted: #5d6258;
  --ptx-work-order-border: #d8d6ca;
  --ptx-work-order-shadow: 0 10px 24px rgba(75, 69, 55, 0.07);
  --ptx-work-order-focus: rgba(167, 92, 73, 0.16);
}

body.fba-prep-requests-page {
  --ptx-fba-surface: linear-gradient(160deg, rgba(7, 84, 102, 0.56), rgba(3, 36, 52, 0.72));
  --ptx-fba-surface-muted: rgba(3, 45, 61, 0.62);
  --ptx-fba-surface-soft: rgba(3, 39, 54, 0.58);
  --ptx-fba-text-primary: #ffffff;
  --ptx-fba-text-secondary: rgba(255, 255, 255, 0.72);
  --ptx-fba-text-muted: rgba(255, 255, 255, 0.55);
  --ptx-fba-border: rgba(40, 215, 232, 0.38);
  --ptx-fba-border-strong: rgba(40, 215, 232, 0.60);
  --ptx-fba-shadow: 0 18px 40px rgba(0, 25, 31, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --ptx-fba-focus: rgba(168, 241, 229, 0.52);
}

:root[data-theme="light"] body.fba-prep-requests-page {
  color-scheme: light;
  --ptx-fba-surface: #fbfaf5;
  --ptx-fba-surface-muted: #f0efe7;
  --ptx-fba-surface-soft: #eef0e8;
  --ptx-fba-text-primary: #2d2924;
  --ptx-fba-text-secondary: #5d6258;
  --ptx-fba-text-muted: #7a7d72;
  --ptx-fba-border: #d8d6ca;
  --ptx-fba-border-strong: #c5c8ba;
  --ptx-fba-shadow: 0 10px 24px rgba(75, 69, 55, 0.07);
  --ptx-fba-focus: rgba(167, 92, 73, 0.16);
}

/* Labor roles. The scoped Labor page layer owns structure; this canonical
   theme layer owns every dark/light value consumed by Admin and the kiosk. */
body.labor-admin-page,
body.labor-trax-kiosk {
  --labor-cyan: #00d4ff;
  --labor-violet: #7c3aed;
  --labor-emerald: #34d399;
  --labor-surface: rgba(13, 22, 54, 0.76);
  --labor-surface-strong: rgba(13, 22, 54, 0.94);
  --labor-border: rgba(125, 211, 252, 0.18);
  --labor-text: #f0f4ff;
  --labor-muted: rgba(196, 208, 220, 0.72);
  --labor-dim: rgba(196, 208, 220, 0.55);
  --labor-header-background: linear-gradient(180deg, rgba(13, 22, 54, 0.93), rgba(8, 15, 35, 0.88));
  --labor-header-shadow: 0 12px 36px rgba(2, 8, 23, 0.24);
  --labor-hero-background: radial-gradient(circle at 100% 0%, rgba(124, 58, 237, 0.22), transparent 30%), radial-gradient(circle at 0% 100%, rgba(0, 212, 255, 0.15), transparent 36%), var(--labor-surface-strong);
  --labor-hero-shadow: 0 24px 64px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --labor-title-gradient: linear-gradient(to bottom, #ffffff 42%, rgba(226, 232, 240, 0.72));
  --labor-kicker: rgba(125, 211, 252, 0.9);
  --labor-mark-border: rgba(125, 211, 252, 0.26);
  --labor-mark-background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(124, 58, 237, 0.24));
  --labor-mark-shadow: 0 12px 30px rgba(0, 212, 255, 0.14);
  --labor-panel-background: linear-gradient(180deg, rgba(13, 22, 54, 0.72), rgba(8, 15, 35, 0.7));
  --labor-panel-shadow: 0 20px 48px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --labor-control-surface: rgba(255, 255, 255, 0.05);
  --labor-control-hover: rgba(0, 212, 255, 0.1);
  --labor-control-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --labor-on-accent: #ffffff;
  --labor-primary-shadow: 0 10px 30px rgba(0, 212, 255, 0.22);
  --labor-primary-hover-shadow: 0 14px 38px rgba(0, 212, 255, 0.30);
  --labor-secondary-text: rgba(226, 232, 240, 0.90);
  --labor-secondary-hover-border: rgba(0, 212, 255, 0.45);
  --labor-placeholder: rgba(196, 208, 220, 0.55);
  --labor-focus-border: rgba(0, 212, 255, 0.72);
  --labor-focus-ring: 0 0 0 3px rgba(0, 212, 255, 0.13);
  --labor-table-surface: rgba(8, 15, 35, 0.48);
  --labor-table-head: rgba(255, 255, 255, 0.045);
  --labor-table-head-text: rgba(196, 208, 220, 0.78);
  --labor-row-hover: rgba(0, 212, 255, 0.07);
  --labor-avatar-background: linear-gradient(135deg, rgba(0, 212, 255, 0.16), rgba(124, 58, 237, 0.18));
  --labor-avatar-border: rgba(125, 211, 252, 0.3);
  --labor-status-out-surface: rgba(148, 163, 184, 0.1);
  --labor-status-out-border: rgba(148, 163, 184, 0.24);
  --labor-status-out-text: rgba(196, 208, 220, 0.74);
  --labor-status-in-surface: rgba(52, 211, 153, 0.12);
  --labor-status-in-border: rgba(52, 211, 153, 0.34);
  --labor-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --labor-card-hover-border: rgba(0, 212, 255, 0.38);
  --labor-card-hover-shadow: 0 16px 34px rgba(0, 0, 0, 0.26), 0 0 0 1px rgba(0, 212, 255, 0.08);
  --labor-danger: #fda4af;
  --labor-danger-border: rgba(251, 113, 133, 0.3);
  --labor-danger-hover: rgba(251, 113, 133, 0.12);
  --labor-danger-hover-border: rgba(251, 113, 133, 0.5);
  --labor-chart-surface: rgba(8, 15, 35, 0.46);
  --labor-modal-overlay: rgba(2, 8, 23, 0.82);
  --labor-modal-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --labor-modal-detail-surface: rgba(255, 255, 255, 0.045);
  --labor-modal-detail-border: rgba(125, 211, 252, 0.1);
  --labor-chart-bar: rgba(0, 212, 255, 0.6);
  --labor-chart-border: rgba(0, 212, 255, 1);
  --labor-chart-text: #ffffff;
  --labor-chart-grid: rgba(196, 208, 220, 0.16);
  --labor-kiosk-canvas: #080d24;
  --labor-kiosk-surface: var(--labor-surface-strong);
  --labor-kiosk-surface-soft: var(--labor-control-surface);
  --labor-kiosk-text: var(--labor-text);
  --labor-kiosk-muted: var(--labor-muted);
  --labor-kiosk-border: var(--labor-border);
  --labor-kiosk-border-strong: var(--labor-focus-border);
  --labor-kiosk-accent: var(--labor-cyan);
  --labor-kiosk-accent-soft: var(--labor-control-hover);
  --labor-kiosk-accent-secondary: var(--labor-violet);
  --labor-kiosk-accent-secondary-soft: rgba(124, 58, 237, 0.12);
  --labor-kiosk-success: var(--labor-emerald);
  --labor-kiosk-success-surface: var(--labor-status-in-surface);
  --labor-kiosk-danger: var(--labor-danger);
  --labor-kiosk-danger-surface: var(--labor-danger-hover);
  --labor-kiosk-focus: var(--labor-focus-ring);
  --labor-kiosk-history-surface: var(--labor-panel-background);
  --labor-kiosk-history-card: var(--labor-modal-detail-surface);
  --labor-kiosk-shadow: var(--labor-panel-shadow);
}

:root[data-theme="light"] body.labor-admin-page,
:root[data-theme="light"] body.labor-trax-kiosk {
  color-scheme: light;
  --labor-cyan: #536a82;
  --labor-violet: #a75c49;
  --labor-emerald: #55734e;
  --labor-surface: #fbfaf5;
  --labor-surface-strong: #fffdf8;
  --labor-border: #d8d6ca;
  --labor-text: #2d2924;
  --labor-muted: #5d6258;
  --labor-dim: #7a7d72;
  --labor-header-background: linear-gradient(180deg, #fbfaf5, #f0efe7);
  --labor-header-shadow: 0 12px 28px rgba(75, 69, 55, 0.10);
  --labor-hero-background: radial-gradient(circle at 100% 0%, rgba(167, 92, 73, 0.12), transparent 30%), radial-gradient(circle at 0% 100%, rgba(83, 106, 130, 0.10), transparent 36%), var(--labor-surface-strong);
  --labor-hero-shadow: 0 18px 40px rgba(75, 69, 55, 0.12), inset 0 1px 0 #ffffff;
  --labor-title-gradient: linear-gradient(to bottom, #2d2924 42%, #536a82);
  --labor-kicker: #536a82;
  --labor-mark-border: #c5c8ba;
  --labor-mark-background: linear-gradient(135deg, rgba(83, 106, 130, 0.14), rgba(167, 92, 73, 0.14));
  --labor-mark-shadow: 0 10px 24px rgba(75, 69, 55, 0.10);
  --labor-panel-background: linear-gradient(180deg, #fbfaf5, #f4f1e8);
  --labor-panel-shadow: 0 14px 32px rgba(75, 69, 55, 0.10), inset 0 1px 0 #ffffff;
  --labor-control-surface: #fffdf8;
  --labor-control-hover: #f4f1e8;
  --labor-control-shadow: inset 0 1px 0 #ffffff;
  --labor-on-accent: #fffdf8;
  --labor-primary-shadow: 0 10px 24px rgba(83, 106, 130, 0.18);
  --labor-primary-hover-shadow: 0 14px 30px rgba(167, 92, 73, 0.20);
  --labor-secondary-text: #536a82;
  --labor-secondary-hover-border: #b8aa8f;
  --labor-placeholder: #7a7d72;
  --labor-focus-border: #a75c49;
  --labor-focus-ring: 0 0 0 3px rgba(167, 92, 73, 0.16);
  --labor-table-surface: #fbfaf5;
  --labor-table-head: #eef0e8;
  --labor-table-head-text: #536a82;
  --labor-row-hover: rgba(83, 106, 130, 0.08);
  --labor-avatar-background: linear-gradient(135deg, rgba(83, 106, 130, 0.14), rgba(167, 92, 73, 0.14));
  --labor-avatar-border: #c5c8ba;
  --labor-status-out-surface: #f0efe7;
  --labor-status-out-border: #d8d6ca;
  --labor-status-out-text: #5d6258;
  --labor-status-in-surface: rgba(85, 115, 78, 0.12);
  --labor-status-in-border: #bfd1ba;
  --labor-card-shadow: inset 0 1px 0 #ffffff;
  --labor-card-hover-border: #b8aa8f;
  --labor-card-hover-shadow: 0 14px 30px rgba(75, 69, 55, 0.12), 0 0 0 1px rgba(167, 92, 73, 0.08);
  --labor-danger: #a65343;
  --labor-danger-border: #e0bdb4;
  --labor-danger-hover: #f1ddd8;
  --labor-danger-hover-border: #c98171;
  --labor-chart-surface: #fffdf8;
  --labor-modal-overlay: rgba(45, 41, 36, 0.38);
  --labor-modal-shadow: 0 18px 40px rgba(75, 69, 55, 0.18), inset 0 1px 0 #ffffff;
  --labor-modal-detail-surface: #f4f1e8;
  --labor-modal-detail-border: #d8d6ca;
  --labor-chart-bar: rgba(83, 106, 130, 0.62);
  --labor-chart-border: #536a82;
  --labor-chart-text: #2d2924;
  --labor-chart-grid: rgba(93, 98, 88, 0.18);
  --labor-kiosk-canvas: #f0efe7;
  --labor-kiosk-accent-secondary-soft: rgba(167, 92, 73, 0.12);
}

/* Warehouse Hub roles. Hub components consume these aliases in their
   page stylesheet; this layer remains their single dark/light value owner. */
body.operations-hub-page {
  --ops-canvas: #080d24;
  --ops-ambient-primary: rgba(0, 212, 255, 0.055);
  --ops-ambient-secondary: rgba(168, 85, 247, 0.055);
  --ops-surface: rgba(11, 17, 40, 0.60);
  --ops-surface-raised: rgba(8, 13, 36, 0.96);
  --ops-ink: #f0f4ff;
  --ops-copy: #8892aa;
  --ops-muted: #4a5568;
  --ops-rule: rgba(255, 255, 255, 0.05);
  --ops-rule-strong: rgba(255, 255, 255, 0.10);
  --ops-hover: rgba(255, 255, 255, 0.02);
  --ops-accent: #00d4ff;
  --ops-accent-violet: #a855f7;
  --ops-accent-ink: #080d24;
  --ops-idle: rgba(255, 255, 255, 0.30);
  --ops-idle-border: rgba(255, 255, 255, 0.08);
  --ops-success: #34d399;
  --ops-success-surface: rgba(16, 185, 129, 0.10);
  --ops-success-border: rgba(16, 185, 129, 0.22);
  --ops-warning: #fcd34d;
  --ops-warning-surface: rgba(245, 158, 11, 0.10);
  --ops-warning-border: rgba(245, 158, 11, 0.22);
  --ops-danger: #f87171;
  --ops-danger-surface: rgba(239, 68, 68, 0.10);
  --ops-danger-border: rgba(239, 68, 68, 0.22);
  --ops-shadow: -8px 0 40px rgba(0, 0, 0, 0.60);
}

:root[data-theme="light"] body.operations-hub-page {
  color-scheme: light;
  --ops-canvas: #f0efe7;
  --ops-ambient-primary: rgba(83, 106, 130, 0.10);
  --ops-ambient-secondary: rgba(167, 92, 73, 0.08);
  --ops-surface: #fbfaf5;
  --ops-surface-raised: #fffdf8;
  --ops-ink: #2d2924;
  --ops-copy: #5d6258;
  --ops-muted: #7a7d72;
  --ops-rule: #d8d6ca;
  --ops-rule-strong: #c5c8ba;
  --ops-hover: #f4f1e8;
  --ops-accent: #536a82;
  --ops-accent-violet: #a75c49;
  --ops-accent-ink: #fffdf8;
  --ops-idle: #7a7d72;
  --ops-idle-border: #cfd3c6;
  --ops-success: #55734e;
  --ops-success-surface: rgba(85, 115, 78, 0.12);
  --ops-success-border: #bfd1ba;
  --ops-warning: #805b25;
  --ops-warning-surface: rgba(217, 173, 105, 0.14);
  --ops-warning-border: #dfc28e;
  --ops-danger: #a65343;
  --ops-danger-surface: #f1ddd8;
  --ops-danger-border: #e0bdb4;
  --ops-shadow: -8px 0 32px rgba(75, 69, 55, 0.16);
}

/* Feedback roles. The existing page CSS consumes the temporary --trx-* aliases
   below while its visual values remain owned by this canonical PrepTrax layer. */
body.feedback-page {
  --ptx-feedback-canvas: #050b1f;
  --ptx-feedback-canvas-soft: #0a1430;
  --ptx-feedback-canvas-glow: rgba(61, 123, 255, 0.10);
  --ptx-feedback-surface: #0a1430;
  --ptx-feedback-surface-muted: #0f1b40;
  --ptx-feedback-border: rgba(255, 255, 255, 0.07);
  --ptx-feedback-border-subtle: rgba(255, 255, 255, 0.12);
  --ptx-feedback-text: #f0f4ff;
  --ptx-feedback-copy: #c4d0dc;
  --ptx-feedback-muted: #7b90a4;
  --ptx-feedback-primary: #3d7bff;
  --ptx-feedback-success: #34d399;
  --ptx-feedback-success-surface: rgba(16, 185, 129, 0.22);
  --ptx-feedback-success-border: rgba(16, 185, 129, 0.35);
  --ptx-feedback-success-icon-surface: linear-gradient(135deg, rgba(16, 185, 129, 0.22), rgba(56, 189, 248, 0.18));
  --ptx-feedback-accent: #3d7bff;
  --ptx-feedback-accent-strong: #00d4ff;
  --ptx-feedback-accent-muted: #8a5bff;
  --ptx-feedback-accent-shadow: 0 5px 12px rgba(61, 123, 255, 0.30);
  --ptx-feedback-accent-hover-shadow: 0 7px 15px rgba(61, 123, 255, 0.40);
  --ptx-feedback-on-accent: #ffffff;
  --ptx-feedback-danger: #fca5a5;
  --ptx-feedback-danger-surface: rgba(255, 61, 61, 0.08);
  --ptx-feedback-danger-border: rgba(255, 99, 99, 0.25);
  --ptx-feedback-danger-hover-surface: rgba(255, 61, 61, 0.12);
  --ptx-feedback-danger-hover-border: rgba(255, 99, 99, 0.35);
  --ptx-feedback-danger-text: #fca5a5;
  --ptx-feedback-border-strong: rgba(255, 255, 255, 0.16);
  --ptx-feedback-muted-border: #7b90a4;
  --ptx-feedback-sidebar: #0a1430;
  --ptx-feedback-sidebar-border: rgba(255, 255, 255, 0.07);
  --ptx-feedback-sidebar-text: #f0f4ff;
  --ptx-feedback-sidebar-copy: #c4d0dc;
  --ptx-feedback-sidebar-heading: #7b90a4;
  --ptx-feedback-sidebar-control: rgba(255, 255, 255, 0.08);
  --ptx-feedback-sidebar-control-border: rgba(255, 255, 255, 0.12);
  --ptx-feedback-sidebar-active: #0f1b40;
  --ptx-feedback-sidebar-active-border: #3d7bff;
  --ptx-feedback-sidebar-active-text: #ffffff;
  --ptx-feedback-sidebar-shadow: 4px 0 18px rgba(0, 0, 0, 0.24);
  --ptx-feedback-sidebar-hover: rgba(255, 255, 255, 0.08);
  --ptx-feedback-sidebar-hover-border: rgba(61, 123, 255, 0.28);
  --ptx-feedback-sidebar-active-shadow: 0 6px 14px rgba(0, 0, 0, 0.20);
  --ptx-feedback-header-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
  --ptx-feedback-focus: #38e1ff;
  --ptx-feedback-focus-ring: 0 0 0 3px rgba(56, 225, 255, 0.18);
  --ptx-feedback-shadow: 0 4px 28px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.3);
  --trx-panel: var(--ptx-feedback-surface);
  --trx-panel-2: var(--ptx-feedback-surface-muted);
  --trx-surface: var(--ptx-feedback-canvas);
  --trx-bg: var(--ptx-feedback-canvas);
  --trx-bg-2: var(--ptx-feedback-canvas-soft);
  --trx-border: var(--ptx-feedback-border);
  --trx-muted: var(--ptx-feedback-muted);
  --trx-text-1: var(--ptx-feedback-text);
  --trx-text-2: var(--ptx-feedback-copy);
  --trx-blue: var(--ptx-feedback-primary);
  --trx-cyan: var(--ptx-feedback-focus);
  --trx-shadow: var(--ptx-feedback-shadow);
  --trx-border-mid: var(--ptx-feedback-border);
  --trx-text: var(--ptx-feedback-text);
  --ptx-glass-bg: var(--ptx-feedback-surface) !important;
  --ptx-glass-border: var(--ptx-feedback-border) !important;
  --ptx-white: var(--ptx-feedback-text) !important;
}

:root[data-theme="light"] body.feedback-page {
  color-scheme: light;
  --ptx-feedback-canvas: #f5f3ec;
  --ptx-feedback-canvas-soft: #f0efe7;
  --ptx-feedback-canvas-glow: rgba(217, 173, 105, 0.10);
  --ptx-feedback-surface: #fbfaf5;
  --ptx-feedback-surface-muted: #f0efe7;
  --ptx-feedback-border: #d8d6ca;
  --ptx-feedback-border-subtle: #deddd3;
  --ptx-feedback-text: #2d2924;
  --ptx-feedback-copy: #5d6258;
  --ptx-feedback-muted: #7a7d72;
  --ptx-feedback-primary: #536a82;
  --ptx-feedback-success: #55734e;
  --ptx-feedback-success-surface: rgba(85, 115, 78, 0.12);
  --ptx-feedback-success-border: #bfd1ba;
  --ptx-feedback-success-icon-surface: rgba(85, 115, 78, 0.12);
  --ptx-feedback-accent: #c96f58;
  --ptx-feedback-accent-strong: #a95443;
  --ptx-feedback-accent-muted: #8b9a80;
  --ptx-feedback-accent-shadow: 0 5px 12px rgba(169, 84, 67, 0.20);
  --ptx-feedback-accent-hover-shadow: 0 7px 15px rgba(169, 84, 67, 0.24);
  --ptx-feedback-on-accent: #fffaf3;
  --ptx-feedback-danger: #a65343;
  --ptx-feedback-danger-surface: #f1ddd8;
  --ptx-feedback-danger-border: #e0bdb4;
  --ptx-feedback-danger-hover-surface: #f1ddd8;
  --ptx-feedback-danger-hover-border: #e0bdb4;
  --ptx-feedback-danger-text: #985040;
  --ptx-feedback-border-strong: #c5c8ba;
  --ptx-feedback-muted-border: #9ca396;
  --ptx-feedback-sidebar: #20372d;
  --ptx-feedback-sidebar-border: #456052;
  --ptx-feedback-sidebar-text: #eff1e9;
  --ptx-feedback-sidebar-copy: #d9ded2;
  --ptx-feedback-sidebar-heading: #9fb5a5;
  --ptx-feedback-sidebar-control: rgba(226, 233, 218, 0.13);
  --ptx-feedback-sidebar-control-border: rgba(226, 233, 218, 0.12);
  --ptx-feedback-sidebar-active: #2c493a;
  --ptx-feedback-sidebar-active-border: #d9ad69;
  --ptx-feedback-sidebar-active-text: #fffaf0;
  --ptx-feedback-sidebar-shadow: 4px 0 18px rgba(24, 40, 31, 0.16);
  --ptx-feedback-sidebar-hover: rgba(245, 243, 236, 0.09);
  --ptx-feedback-sidebar-hover-border: rgba(217, 173, 105, 0.28);
  --ptx-feedback-sidebar-active-shadow: 0 6px 14px rgba(14, 28, 21, 0.20);
  --ptx-feedback-header-shadow: 0 1px 0 rgba(54, 58, 48, 0.04);
  --ptx-feedback-focus: #a75c49;
  --ptx-feedback-focus-ring: 0 0 0 3px rgba(167, 92, 73, 0.16);
  --ptx-feedback-shadow: 0 10px 24px rgba(75, 69, 55, 0.07);
}