/* * harbour admin dashboard — dark control-room tokens * * Loaded after the client dashboard's tokens.css when both surfaces * share infrastructure. The structure is identical (same variable * names, same scale, same motion); only the hex values flip. * * §7.1 register: "soft dark grey background (not black), off-white * text, accent colours desaturated so they do not burn." Operators * stare at this surface; nothing aggressive, nothing pulsing * fluorescent. Control room, not gaming UI. * * Inheritance discipline (per the build doc + the operator-brief * decision): tokens are infrastructure and stay consistent across * surfaces; components are decisions and may differ. The size, * spacing, radius, shadow, motion, typography scales all hold; the * colour layer is the only override. */ :root { /* ---- colour, dark register ---- */ /* Background: soft dark slate, never pure black. The texture hint on body inherits from the client surface as a subtle paper-grain; same SVG noise, lower opacity so it reads as surface grain rather than visual noise. */ --colour-bg: #1a1d22; /* Surface: cards lift one step from background — same lift ratio as the warm surface, dark side. */ --colour-surface: #23272d; --colour-surface-soft: #1f2229; /* Ink: off-white, never #fff (that burns in the control room). */ --colour-ink: #e8e9ec; --colour-ink-strong: #f3f4f6; --colour-ink-soft: #a0a4ab; --colour-ink-muted: #6b7079; /* Lines: hairline, dark. */ --colour-line: #2e333a; --colour-line-soft: #272b32; /* Accent desaturated. The client's #3fb4d7 is too saturated for a dark surface; a muted teal-blue carries the same hue family without burning. */ --accent: #5e9fb8; --accent-strong: #82bed4; --accent-tint: #2a3a44; --accent-ink: #0d1014; /* Status pills — same names as the client surface so template class names work across both, dark-mode hex values. Quieter, still legible. */ --pill-neutral-bg: #2b2f36; --pill-neutral-ink: #a0a4ab; --pill-active-bg: #1e2f46; --pill-active-ink: #82a8d4; --pill-success-bg: #1f3322; --pill-success-ink: #8fbf95; --pill-awaiting-bg: #3a2e15; --pill-awaiting-ink: #d4b876; --pill-failure-bg: #3a1f1c; --pill-failure-ink: #df8678; --pill-holding-bg: #28253a; --pill-holding-ink: #9d95c4; /* ---- typography (forensic instrument register) ---- Inter holds the labels; JetBrains Mono carries the data cells. The mono choice is deliberate: slashed zero, unambiguous I / l / 1, tabular-numeric figures at every weight. An operator reading IDs, hex hashes, costs, and timings benefits from a typeface designed for that reading. The display + body kept on Inter so the labels stay sans-serif. */ --brand-display-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --brand-body-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Slightly tighter scale than the client surface — operator density is higher; comfortable still, but more rows per viewport. */ --size-xs: 0.6875rem; --size-sm: 0.78125rem; --size-base: 0.875rem; --size-md: 1rem; --size-lg: 1.1875rem; --size-xl: 1.5rem; --size-2xl: 1.875rem; --size-3xl: 2.375rem; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.2; --leading-snug: 1.35; --leading-base: 1.5; --leading-relaxed: 1.65; --tracking-tight: -0.015em; --tracking-base: 0; --tracking-wide: 0.04em; /* ---- spacing (4px scale, identical to client) ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.75rem; --space-8: 3.5rem; --space-9: 4.5rem; /* ---- radius (identical to client) ---- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; /* ---- shadow, dark-register ---- */ /* Shadows under dark cards must be DARKER than the surface they sit on (the warm-light version uses lighter shadow on lighter surface). */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45); /* ---- motion (identical to client) ---- */ --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 400ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ---- layout (slightly tighter than client) ---- */ --rail-width: 224px; --header-height: 56px; --content-max-width: 1680px; /* ---- admin-specific status colours ---- Three operational signals: live (normal flow), waiting (something blocked, awaiting a human or external), failed (manual_intervention, the DLQ-equivalent). Distinct from the client surface's Won/Lost/Sent vocabulary because the operator's questions are different. */ --signal-live-fill: #5e9fb8; --signal-live-track: #1e2f3a; --signal-waiting-fill: #c89456; --signal-waiting-track: #2e2418; --signal-failure-fill: #c66a5a; --signal-failure-track: #2e1816; --signal-idle-fill: #4a4f57; --signal-idle-track: #1d2025; /* ---- cost meter ---- Per-tenant cap visualisation. Bar fills accent at <60%, amber at 60-90%, red at >90%. Per §13.4 the architectural 429 stops runaway by construction; the meter is operator visibility, not an alarm. */ --meter-ok-fill: #5e9fb8; --meter-warn-fill: #c89456; --meter-danger-fill: #c66a5a; --meter-track: #15181d; /* ---- instrument-panel detail tokens ---- Subtle 1px highlights and inset shadows that give cards and meters the "physical instrument" feel without ever reading as skeuomorphism. Each one is a single hairline. */ --edge-highlight: rgba(255, 255, 255, 0.03); --edge-shadow: rgba(0, 0, 0, 0.4); --inset-trough: inset 0 1px 2px rgba(0, 0, 0, 0.55); --inset-card-top: inset 0 1px 0 rgba(255, 255, 255, 0.025); /* LED ring colour for the machine boxes' status indicator. */ --led-glow-live: rgba(94, 159, 184, 0.45); --led-glow-waiting: rgba(200, 148, 86, 0.45); --led-glow-failure: rgba(198, 106, 90, 0.5); } /* Body texture: same paper-grain SVG noise as the client surface, lower opacity so it reads as subtle grain on dark rather than visible noise. Same workshop-character cue, dark register. */ body { background-color: var(--colour-bg); background-image: url("data:image/svg+xml;utf8,"); }