/* StatVault Design Tokens — shared across all pages Light is the default. Dark is opt-in via :root[data-theme="dark"]. Legacy --sv-* names are kept as aliases at the bottom so unmigrated pages continue to render until they're migrated to the role layer. Pre-paint contract: pages must set [data-theme] on BEFORE the stylesheet loads to avoid a flash-of-wrong-theme. See views/shell.html and views/coverage.html for the pre-paint script. */ /* ============================================================ LIGHT — default (warm paper + navy chrome + readable seafoam) ============================================================ */ :root { /* Surfaces — warm paper, not sterile white */ --sv-surface-page: #FBFBF8; --sv-surface-panel: #FFFFFF; --sv-surface-raised: #F5F5F2; --sv-surface-input: #FFFFFF; --sv-surface-overlay: rgba(20, 24, 36, 0.55); /* Chrome — navy borrowed from the Sword theme; ties operator+portal */ --sv-surface-chrome: #1B3A6B; /* On-chrome text gradient — calibrated so primary stays max, secondary lifts out of "ashy" without collapsing into primary, muted stays subordinate but visible. Used by rail items, dispatch board rows, chat conv preview, column headers, etc. */ --sv-on-chrome-fg: #FFFFFF; /* primary — headlines, key cell values */ --sv-on-chrome-fg-secondary: #E2E8F0; /* secondary — body text, column headers, comments/caller — lifted from #CBD5E1 */ --sv-on-chrome-fg-muted: #A8B4C2; /* muted — small chrome labels, placeholders, key-chips — lifted from #94A3B8 */ --sv-on-chrome-accent: #48bb78; /* bright seafoam for active items */ --sv-on-chrome-accent-bg: rgba(72, 187, 120, 0.18); --sv-on-chrome-danger: #fc8181; /* logout */ --sv-on-chrome-info: #90cdf4; /* HUD active */ --sv-on-chrome-info-bg: rgba(99, 179, 237, 0.18); --sv-on-chrome-border: rgba(255, 255, 255, 0.10); --sv-on-chrome-border-strong: rgba(255, 255, 255, 0.22); --sv-on-chrome-hover-bg: rgba(255, 255, 255, 0.06); /* Text — cool dark on warm paper. DOCTRINE: light-theme text hierarchy must stay confident. Older eyes in normal office light skip text that drifts into faded gray. Even "muted" must remain readable; muted is reserved for genuinely low- priority hints (placeholders, supplementary notes, empty-states), NOT for operational labels/timestamps/metadata. Operational labels should use --sv-text-secondary. Contrast on warm paper #FBFBF8: primary #1A202C → 14.6:1 (AAA strong) secondary #334155 → 11.4:1 (AAA confident — was 8:1 at #475569) muted #52606D → 7.4:1 (AAA — was AA-only 5:1 at #64748B) */ --sv-text: #1A202C; --sv-text-secondary: #334155; --sv-text-muted: #52606D; --sv-text-inverse: #FFFFFF; --sv-text-link: #2F855A; /* Borders — visible, not 0.04-alpha invisibility */ --sv-border-subtle: #E5E7EB; --sv-border: #D4D8DD; --sv-border-strong: #94A3B8; --sv-border-focus: #2F855A; /* Accent — operator brand (seafoam family) */ --sv-accent: #2F855A; /* readable on white for text use */ --sv-accent-hover: #276749; --sv-accent-bright: #48bb78; /* same brand, for fills/dots/dark contexts */ --sv-accent-subtle-bg: #E6F4EA; --sv-accent-subtle-border:#B7E0CB; /* Status — calmed for light; each role has fg/bg/border triple. Names map to semantic role, not to color. */ --sv-status-success-fg: #276749; --sv-status-success-bg: #E6F4EA; --sv-status-success-border: #B7E0CB; --sv-status-warning-fg: #B45309; --sv-status-warning-bg: #FEF3C7; --sv-status-warning-border: #FDE68A; --sv-status-danger-fg: #B91C1C; --sv-status-danger-bg: #FAD9D9; /* normalized to match success/warning/info weight envelope */ --sv-status-danger-border: #F4B5B5; --sv-status-info-fg: #1E40AF; --sv-status-info-bg: #DBEAFE; --sv-status-info-border: #BFDBFE; /* Semantic IDs — same role across themes, native vocabulary per theme. Light: stamped record number on tinted pill. Dark: matrix-green neon (defined in dark block below). */ --sv-id-order: #1E5D3F; --sv-id-order-bg: #ECF4EE; --sv-id-driver: #1E40AF; --sv-id-route: #1B3A6B; /* Legs — pickup/drop tension preserved across themes. Each gets fg/bg/border so chip-style pills theme correctly. */ --sv-leg-pickup: #C2410C; --sv-leg-pickup-bg: #FFEDD5; --sv-leg-pickup-border: #FED7AA; --sv-leg-drop: #1E40AF; --sv-leg-drop-bg: #DBEAFE; --sv-leg-drop-border: #BFDBFE; /* Special — Zippy / today / mark; deliberately rare */ --sv-special: #6D28D9; --sv-special-bg: #F3E8FF; --sv-special-border: #DDD6FE; /* STAT urgency — civic flag red, available everywhere */ --sv-stat-urgent: #C0392B; --sv-stat-urgent-bg: #FCEAE8; --sv-stat-urgent-border: #F4B5B5; /* Coverage page chips — anti-Christmas: each role differs by SHAPE (via ::before icon) plus calmed hue. */ --sv-cov-out-fg: #FFFFFF; --sv-cov-out-bg: #A03030; /* calmed brick red, not crimson */ --sv-cov-out-border: #7C1F1F; --sv-cov-covering-fg: #FFFFFF; --sv-cov-covering-bg: #2F7050; /* calmed forest, not lime */ --sv-cov-covering-border: #1F4F36; --sv-cov-oncall-fg: #FFFFFF; --sv-cov-oncall-bg: #1E5288; /* calmed steel blue */ --sv-cov-oncall-border: #0F3A66; --sv-cov-today-fg: #FFFFFF; --sv-cov-today-bg: #5B47B7; /* deeper purple, less neon */ /* Dimensions */ --sv-rail-collapsed: 52px; --sv-rail-expanded: 210px; --sv-topbar-height: 48px; /* Breakpoints — reference values; CSS @media uses literals */ --sv-bp-phone: 640px; --sv-bp-tablet: 1024px; /* ── Legacy aliases — keep old token names working until pages migrate ── */ --sv-bg-rail: var(--sv-surface-chrome); --sv-bg-content: var(--sv-surface-page); --sv-bg-card: var(--sv-surface-raised); --sv-bg-input: var(--sv-surface-input); --sv-border-light: var(--sv-border-strong); --sv-text-primary: var(--sv-text); --sv-accent-subtle: var(--sv-accent-subtle-bg); --sv-red: var(--sv-status-danger-fg); --sv-orange: var(--sv-leg-pickup); --sv-yellow: var(--sv-status-warning-fg); --sv-blue: var(--sv-status-info-fg); --sv-purple: var(--sv-special); } /* ============================================================ DARK — opt-in. Preserves the existing operator-console identity: matrix-green order IDs, neon accents, charcoal chrome. ============================================================ */ :root[data-theme="dark"] { /* Surfaces */ --sv-surface-page: #374151; --sv-surface-panel: #2d3748; --sv-surface-raised: #4a5568; --sv-surface-input: #2d3748; --sv-surface-overlay: rgba(0, 0, 0, 0.6); /* Chrome — keep the dolphin charcoal that defined the rail */ --sv-surface-chrome: #2d3748; --sv-on-chrome-fg: #e2e8f0; --sv-on-chrome-fg-secondary: #a0aec0; --sv-on-chrome-fg-muted: #718096; /* (--sv-on-chrome-* accent/danger/info/border/hover values are reused from the light root because both themes have dark chrome — no need to redefine.) */ /* Text — DOCTRINE (mirrors the light block): even "muted" must stay readable. Dark muted #718096 on panel #2d3748 was ~2.9:1 (illegible — the buildings dossier flagged it); secondary #a0aec0 ~5:1 (marginal). Both lifted so muted clears AA on panels while text > secondary > muted stays a clear hierarchy. */ --sv-text: #e2e8f0; --sv-text-secondary: #c1cad7; /* ~7.3:1 on #2d3748 (lifted again Jun 14 for readability) */ --sv-text-muted: #a8b4c6; /* ~5.8:1 on #2d3748 (lifted again Jun 14 for readability) */ --sv-text-inverse: #1A202C; --sv-text-link: #48bb78; /* Borders */ --sv-border-subtle: rgba(255, 255, 255, 0.06); --sv-border: #4a5568; --sv-border-strong: #718096; --sv-border-focus: #48bb78; /* Accent */ --sv-accent: #48bb78; --sv-accent-hover: #38a169; --sv-accent-bright: #48bb78; --sv-accent-subtle-bg: rgba(72, 187, 120, 0.15); --sv-accent-subtle-border:rgba(72, 187, 120, 0.35); /* Status — saturated fg on tinted bg, native to dark */ --sv-status-success-fg: #68d391; --sv-status-success-bg: rgba(72, 187, 120, 0.15); --sv-status-success-border: rgba(72, 187, 120, 0.35); --sv-status-warning-fg: #ecc94b; --sv-status-warning-bg: rgba(236, 201, 75, 0.15); --sv-status-warning-border: rgba(236, 201, 75, 0.35); --sv-status-danger-fg: #fc8181; --sv-status-danger-bg: rgba(245, 101, 101, 0.15); --sv-status-danger-border: rgba(245, 101, 101, 0.35); --sv-status-info-fg: #63b3ed; --sv-status-info-bg: rgba(99, 179, 237, 0.15); --sv-status-info-border: rgba(99, 179, 237, 0.35); /* Semantic IDs — matrix neon survives only in dark */ --sv-id-order: #00ff41; --sv-id-order-bg: rgba(0, 255, 65, 0.10); --sv-id-driver: #63b3ed; --sv-id-route: #b794f4; /* Legs */ --sv-leg-pickup: #ed8936; --sv-leg-pickup-bg: rgba(237, 137, 54, 0.15); --sv-leg-pickup-border: rgba(237, 137, 54, 0.35); --sv-leg-drop: #4299e1; --sv-leg-drop-bg: rgba(66, 153, 225, 0.15); --sv-leg-drop-border: rgba(66, 153, 225, 0.35); /* Special */ --sv-special: #b794f4; --sv-special-bg: rgba(183, 148, 244, 0.15); --sv-special-border: rgba(183, 148, 244, 0.35); /* STAT urgency in dark */ --sv-stat-urgent: #fc8181; --sv-stat-urgent-bg: rgba(245, 101, 101, 0.15); --sv-stat-urgent-border: rgba(245, 101, 101, 0.35); /* Coverage chips — calmed even in dark, with shape differentiation */ --sv-cov-out-fg: #FFFFFF; --sv-cov-out-bg: #A53030; --sv-cov-out-border: #fc8181; --sv-cov-covering-fg: #FFFFFF; --sv-cov-covering-bg: #2F7050; --sv-cov-covering-border: #68d391; --sv-cov-oncall-fg: #FFFFFF; --sv-cov-oncall-bg: #2A5C8F; --sv-cov-oncall-border: #63b3ed; --sv-cov-today-fg: #1a202c; --sv-cov-today-bg: #b794f4; /* Legacy aliases — re-resolved against dark values */ --sv-bg-rail: var(--sv-surface-chrome); --sv-bg-content: var(--sv-surface-page); --sv-bg-card: var(--sv-surface-raised); --sv-bg-input: var(--sv-surface-input); --sv-border-light: var(--sv-border-strong); --sv-text-primary: var(--sv-text); --sv-accent-subtle: var(--sv-accent-subtle-bg); --sv-red: var(--sv-status-danger-fg); --sv-orange: var(--sv-leg-pickup); --sv-yellow: var(--sv-status-warning-fg); --sv-blue: var(--sv-status-info-fg); --sv-purple: var(--sv-special); } /* ============================================================ Theme-flip discipline — disable all transitions during the flip so toggling feels instant, not laggy. Class is added by the toggleTheme() handler, removed on next frame. ============================================================ */ html.sv-theme-flipping, html.sv-theme-flipping *, html.sv-theme-flipping *::before, html.sv-theme-flipping *::after { transition: none !important; animation-duration: 0s !important; } /* ============================================================ Minimized-ticket taskbar — bottom-left, themed, scrolls if many. Sits below the modal overlay (z:9999) but above page chrome. ============================================================ */ .sv-ticket-bar { position: fixed; left: 0; bottom: 0; z-index: 998; display: none; gap: 4px; padding: 4px 8px; max-width: calc(100vw - 380px); overflow-x: auto; background: var(--sv-surface-chrome, #1a2332); border-top: 1px solid var(--sv-border, #2d3748); border-right: 1px solid var(--sv-border, #2d3748); border-top-right-radius: 6px; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3); font-family: inherit; } .sv-ticket-tile { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--sv-surface-raised, #2d3748); border: 1px solid var(--sv-border, #4a5568); border-radius: 4px; font-size: 0.85em; color: var(--sv-text, #e2e8f0); cursor: pointer; user-select: none; white-space: nowrap; transition: background 0.15s, border-color 0.15s; } .sv-ticket-tile:hover { background: var(--sv-surface-input, #4a5568); border-color: var(--sv-text-muted, #718096); } .sv-ticket-label { font-weight: 600; } .sv-ticket-close { color: var(--sv-text-muted, #718096); font-size: 1.1em; line-height: 1; padding: 0 3px; border-radius: 2px; } .sv-ticket-close:hover { color: var(--sv-text, #e2e8f0); background: rgba(255, 255, 255, 0.12); }