/* Design tokens — THE BOARD, brightened: panels lifted out of near-black so they float, one petrol-teal accent for the agent's own doing, colour reserved for STATE (not category). Named by ROLE, not appearance (--stop, never --red), so light mode inverts cleanly. The board is the unconditional default now; light mode (dq47) is a deferred variable block at the foot, NOT a rewrite. Components reference tokens only — no literal colour in a component. */ /* Build 29c: native controls (checkboxes, date pickers, scrollbars) drawn for the dark board — no white squares. */ :root { color-scheme: dark; } :root { /* BUILD 29 — the redesign's palette (design/dashboard-redesign/README.md), retuned IN PLACE so every screen moves with it. Named by ROLE. */ /* Structure — grounds, darkest to lightest. */ --ground: #0E1A21; /* the page */ --ground-2: #101E27; /* header + nav */ --strip: #101E27; --card: #16242E; /* cards */ --card-2: #182A35; /* card headers, hover */ --inset: #13212A; /* wells and tiles inside a card */ --raised: #1F3A49; /* tooltips, flyouts, step badges */ --active: #1B3443; /* the current nav item, the pressed segment */ --line: #22394A; /* borders */ --line-2: #2E4654; /* stronger border / control outline */ --line-3: #3A5566; /* secondary-button outline */ /* Ink — text tiers. */ --ink: #E8F1F5; --ink-body: #D5E4EA; --ink-2: #B9CDD6; --ink-3: #8FA7B3; /* SEMANTIC COLOUR CARRIES MEANING. Each has a -bg wash for chips/pills. */ --fcw-blue: #48B8D0; /* THE LOGO'S OWN BLUE — the lockup sub wears it */ --teal: #48B8D0; /* THE ACCENT — primary buttons, the agent's own doing */ --teal-2: #7FD3E6; /* links */ --teal-deep: #2B8FB0; --glow: rgba(72, 184, 208, .22); --stop: #FF8F7A; --stop-bg: #4A2420; /* on a clock, blocking, errors */ --hold: #F0B44C; --hold-bg: #3A2E12; /* waiting on a person — Alex paused, old */ --hold-line: #5A4A22; /* an amber card border */ --go: #A7E3BF; --go-bg: #173A2C; /* done / started / with a person */ --with-bg: #233A2F; --quiet: #C9D3DA; --quiet-bg: #2A2F36; /* gone quiet, off the journey */ --dnc: #FFB59E; --dnc-bg: #4A2420; /* do not contact */ /* DIRECTOR APPROVAL ONLY — violet appears nowhere else (README). */ --director: #9D8CFF; --director-ink: #C9BFFF; --director-tile: #221D3D; --director-card: #1C1934; --director-head: #2A2450; --director-icon: #3A3170; --on-director: #140F2E; /* An EMAIL PREVIEW is a light card (how the email looks in an inbox). */ --email-ground: #F4F7F8; --email-ink: #1B2A33; --email-ink-2: #4A5B65; /* ink on the violet Approve button */ /* THE FIELD (build 21) — ONE token pair every input/textarea/select wears. A recessed well, darker than the board, so a field reads as "type here" on a card or the ground alike. Build 16 set form controls' INK to inherit the board's near-white but left their BACKGROUND to the browser — white: the reply box typed white on white. The pair is pinned AA (ink 15.7:1, placeholder 5.5:1) by fieldContrast.test.ts over every control rule. */ --field: #0F1A22; --field-ink: var(--ink); --field-placeholder: var(--ink-3); /* Text on ANY bright semantic fill (teal / stop / hold / go). Dark ink, because every fill above is light — white on --stop is ~2.6:1, dark ink is >7:1. One token so a filled button never borrows "ink on accent" and silently takes the wrong colour when a fill shifts. */ --on-fill: #0B1A21; /* Softer than a light-ground shadow: on the deep board a heavy drop reads as grime, not lift. */ --shadow: 0 1px 2px rgba(0, 0, 0, .22), 0 8px 20px -10px rgba(0, 0, 0, .42); --scrim: rgba(6, 14, 18, .5); /* modal / dialog backdrop — a tint, not black mud over a dark board */ --radius: 10px; /* buttons; cards are 14-16px, pills fully round */ --target: 44px; /* the smallest thing a finger presses */ --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ---- BRIDGE, TEMPORARY — how it dies ------------------------------------------------ The screens built before this pass reference the OLD generic token names (--surface, --accent, --blocking, --border...). These aliases map them onto the board so those screens render correctly on the board WITHOUT being restyled in this commit. This block is NOT permanent: as each screen is restyled in its own later commit it swaps its legacy names for the canonical ones above, and the corresponding alias is deleted here. When the last screen migrates, this block is empty and goes. Do NOT add new usages of these names. */ --bg: var(--ground); --surface: var(--card); --surface-2: var(--card-2); --surface-3: var(--raised); --border: var(--line); --border-2: var(--line-2); --accent: var(--teal); --accent-ink: var(--on-fill); /* legacy name for "ink on the teal fill" — now --on-fill */ --accent-soft: color-mix(in srgb, var(--teal) 14%, var(--card)); --blocking: var(--stop); --blocking-soft: var(--stop-bg); --advisory: var(--hold); --advisory-soft: var(--hold-bg); --good: var(--go); /* ---- end bridge --------------------------------------------------------------------- */ } /* LIGHT MODE — dq47, deferred. Structured as a single variable block so the second theme is a fill-in, not a rewrite: override the canonical tokens here (and let the bridge inherit). Left intentionally empty until dq47; the board is the default for everyone now. :root[data-theme="light"] { --ground: ...; --card: ...; --ink: ...; --teal: ...; --stop: ...; --hold: ...; --go: ...; ... } */ * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* THE UA-BLACK FIX (build 16): form controls do NOT inherit color — a