/* ============================================================================ ScreenRoll design tokens — the single source of truth for the dashboard AND the marketing site. This file is a copy of `frontend/src/tokens.css`; if you change a value here, change it there, or the two surfaces drift apart again. THE ORGANIZING RULE ------------------- **Dark is reserved for screen surfaces. Light is the interface.** Anything representing an actual display — a bezel frame, a live preview, the daypart rail — uses the `--screen-*` tokens. Everything representing the software that manages those displays uses the `--surface-*` tokens. Dark is never atmosphere and never decoration; it always means "this is a screen." That rule is why there is no dark-mode variant here. The palette is not a theme, it is a semantic: inverting it would make the interface look like a display and the display look like an interface. ============================================================================ */ :root { /* --- Ground and surfaces ------------------------------------------------- Neutrals are biased toward the brand indigo rather than being pure grey. A pure #F5F5F5 reads as unconsidered next to a #1428A0 accent; a few points of blue in the neutral makes the whole page look like one decision. */ --ground: #FAFAFC; /* page background */ --surface: #FFFFFF; /* panels, table bodies, inputs */ --surface-sunken: #F4F5F9; /* table headers, inset wells, disabled fields */ --surface-hover: #F7F8FC; /* --- Ink ----------------------------------------------------------------- Never pure black. #0B0F1C is near-black carrying the same indigo bias, so text sits in the same family as the accent instead of fighting it. */ --ink: #0B0F1C; /* headings, primary text */ --ink-secondary: #414A63; /* body copy, table cells */ /* Must clear AA against the *sunken* surface, not just white — that is where it is used most (table headers, mono labels, form hints). At #6B7488 it measured 4.30:1 there, so 36 labels across the marketing page failed by a fraction. Judged against the darkest ground it lands on, not the lightest. */ --ink-muted: #636B80; /* labels, captions, placeholders */ /* Passes AA (4.7:1) on both the paper ground and white. The original #9AA1B4 measured 2.48:1 — it was chosen to look de-emphasised on a dark surface, and on light it made real text like the "BY ADMIXER" lockup effectively unreadable. De-emphasis has to come from size and weight here, not from fading text out of legibility. */ --ink-faint: #68708A; /* captions, timestamps, disabled */ /* --- Lines --------------------------------------------------------------- Hairlines do the work that borders-around-everything used to do. Two weights only: `--line` separates, `--line-strong` encloses. */ --line: #E6E8F0; --line-strong: #D5D9E6; /* --- Brand (BRAND_GUIDELINES.md §2 — do not redefine) --------------------- Used as INFORMATION: active, selected, live, primary action. Never as decoration, never as a gradient wash. */ --brand: #1428A0; --brand-bright: #0057FF; --brand-hover: #0D1F8A; --brand-tint: #EEF1FD; /* selected rows, active nav, subtle fills */ --brand-tint-line: #C9D2F5; /* --- Screen surfaces ----------------------------------------------------- The only dark in the system. `--screen` is the panel itself, `--bezel` the housing around it, `--screen-line` the pixel grid seen up close. */ --screen: #0B0F1C; --screen-raised: #151A2E; --screen-line: #232A45; --screen-ink: #F2F4F9; --screen-ink-mute: #8A93AD; /* --- Semantic (status only — never a decorative accent) ------------------- */ /* Two greens, because a fill and a label have different jobs. --ok is the dot, the bar, the pip: saturated and readable as a shape. --ok-text is for words, where #16A34A only reached 3.0:1 on the light ground and 3.0:1 on its own tint. Never set text in --ok. */ --ok: #16A34A; --ok-text: #107536; --ok-tint: #E7F7EC; --warn: #D97706; --warn-tint: #FDF3E3; --danger: #DC2626; --danger-tint: #FDECEC; --info: #0057FF; --info-tint: #EEF1FD; /* --- Type ---------------------------------------------------------------- Three roles, each doing something the others cannot. display — Archivo. A wide grotesque from the transit/wayfinding lineage, which is literally what this product puts on walls. ui — Inter. Mandated by BRAND_GUIDELINES.md §3 and shared with the marketing site, so both read as one company. mono — IBM Plex Mono. Not a style choice: resolutions, dayparts, IDs and prices are tabular data, and digits that line up are digits you can compare down a column. */ --font-display: 'Archivo', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Type scale. Deliberately short — every size that exists will get used, and a scale with twelve steps is a scale with no hierarchy. */ --text-2xs: 10.5px; --text-xs: 11.5px; --text-sm: 12.5px; --text-base:13.5px; --text-md: 15px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 36px; /* --- Shape --------------------------------------------------------------- Small radii. Large ones read as consumer software; this is an operations tool that happens to be well made. */ --radius-sm: 4px; --radius: 6px; --radius-lg: 10px; --radius-screen: 8px; /* bezel corners — matches real panel housings */ /* --- Elevation ----------------------------------------------------------- Shadows are for things that genuinely float (modals, menus). Panels sit on the page and get a hairline instead — that is the whole difference between this and the card-everything look. */ --shadow-pop: 0 1px 2px rgba(11, 15, 28, 0.06), 0 4px 12px rgba(11, 15, 28, 0.06); --shadow-modal: 0 24px 64px rgba(11, 15, 28, 0.24); /* --- Motion -------------------------------------------------------------- One duration, one curve. Anything slower feels broken on a dense UI. */ --ease: cubic-bezier(0.2, 0, 0, 1); --dur: 140ms; /* --- Legacy aliases ------------------------------------------------------ The dashboard was built against these names. Keeping them mapped onto the new tokens means the whole app re-skins from this file with no JSX edits, and lets components migrate to the semantic names gradually instead of in one risky sweep. Do not use these in new code. */ --content-bg: var(--ground); --card-bg: var(--surface); --topbar-bg: var(--surface); --border: var(--line); --text-primary: var(--ink); --text-secondary: var(--ink-secondary); --text-muted: var(--ink-muted); --accent: var(--brand); --accent-light: var(--brand-bright); --accent-hover: var(--brand-hover); --success: var(--ok); --danger-legacy: var(--danger); --warning: var(--warn); /* The sidebar is now part of the interface, not a screen, so it is light. See the organizing rule at the top: dark here would claim the navigation is a display, which is exactly the confusion the rule exists to prevent. */ --sidebar-bg: var(--surface); --sidebar-hover: var(--surface-hover); --sidebar-active: var(--brand-tint); --sidebar-border: var(--line); } @media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; } }