/* ============================================================ Tokens Every design decision that repeats lives here as a custom property. Nothing in this file selects an element. Three layers, in order: 1. Primitives — the raw ramps. Never referenced outside this file. 2. Semantics — what a primitive means (surface, border, text). 3. Scales — type, space, radius, elevation, motion. Changing a value here changes both screens at once. That is the point: the console and the wizard hold no colours of their own. ============================================================ */ :root { /* ========================================================== 1. Primitives A single neutral ramp with a whisper of blue, so the UI reads as near-black rather than navy. Steps are perceptual, not arithmetic — 0-3 are grounds, 4-6 are lines, 7-10 are ink. ========================================================== */ --gray-0: #09090b; --gray-1: #0d0d10; --gray-2: #121215; --gray-3: #17171b; --gray-4: #1e1e23; --gray-5: #26262c; --gray-6: #33333b; --gray-7: #4b4b55; --gray-8: #71717c; --gray-9: #9c9ca6; --gray-10: #ededf1; /* Hues. Used sparingly and only where they carry meaning. */ --hue-teal: #14b8a6; --hue-teal-lt: #2dd4bf; --hue-teal-lt2: #5eead4; --hue-teal-deep: #0d9488; --hue-blue: #5e9df5; --hue-blue-lt: #84b6f8; --hue-red: #f26d6d; --hue-amber: #e0a458; /* ========================================================== 2. Semantics ========================================================== */ /* ---- Surfaces ---- */ --bg: var(--gray-0); /* page ground */ --bg-bar: var(--gray-0); /* side nav, top bar — same ground, split by a line */ --surface: var(--gray-1); /* cards, panels */ --surface-2: var(--gray-2); /* header/footer bands inside a card, menus */ --surface-3: var(--gray-3); /* raised chip, hovered menu row */ --field: var(--gray-2); /* text inputs */ --field-muted: var(--gray-1); /* ---- Lines ---- Three real weights. Anything that needed a fourth was really asking for one of these. */ --border: var(--gray-4); /* hairline: row rules, card edges */ --border-2: var(--gray-5); /* visible: header bands, chips */ --border-3: var(--gray-6); /* input outlines, interactive edges */ --border-4: var(--gray-6); /* legacy alias of --border-3 */ --border-hover: var(--gray-7); /* ---- Ink ---- Four steps, not seven. Each one is a job: primary, secondary, muted, faint. */ --text: var(--gray-10); --text-2: var(--gray-9); --text-3: var(--gray-8); --text-4: var(--gray-8); /* legacy alias of --text-3 */ --text-5: var(--gray-7); --text-dim: var(--gray-6); --placeholder: var(--gray-7); /* ---- Wash ---- Neutral overlays. Replaces the one-off #16222f-style hexes that used to be sprinkled through the component files. */ --hover: rgb(255 255 255 / .035); --hover-strong: rgb(255 255 255 / .06); --press: rgb(0 0 0 / .2); /* ---- Accent ---- One colour, one job. Teal means "this does something" and fills exactly one element: the primary button. Live and in-progress work is blue, selection and focus are near-white, and nothing else is coloured. */ --teal: var(--hue-teal); --teal-deep: var(--hue-teal-deep); --teal-lt: var(--hue-teal-lt); --teal-lt2: var(--hue-teal-lt2); --on-teal: #052e2a; /* ---- Live ---- Work that is happening right now: in-progress rows and their bars, the "N active" and "Draft saved" dots, the submitted-request timeline. Blue sits beside the red and amber already carrying blocked and in-review, so the three status hues read as one family. */ --live: var(--hue-blue); --live-lt: var(--hue-blue-lt); --on-live: var(--gray-0); --live-bg: rgb(94 157 245 / .10); --live-bg-hover: rgb(94 157 245 / .16); --live-ring: rgb(94 157 245 / .35); --live-ring-0: rgb(94 157 245 / 0); /* Neutral "accent" — the old navy. Kept as a quiet secondary tone for chips and avatars so they sit behind the teal signal. */ --accent: var(--gray-8); --accent-deep: var(--gray-7); --accent-lt: var(--gray-9); --accent-lt2: var(--gray-10); --on-accent: var(--gray-0); --on-accent-2: var(--gray-0); --accent-soft-bg: rgb(255 255 255 / .05); --accent-soft-border: rgb(255 255 255 / .09); /* ---- Solid (inverted near-white) ---- The brand mark, and the base of the selection tokens below. */ --solid: var(--gray-10); --solid-hover: #ffffff; --on-solid: var(--gray-0); /* ---- Selection ---- What the user has picked: radio, checkbox and template cards, the highlighted combo or suggestion row, the "Only mine" toggle. Near-white, so a choice reads as "you chose this" and never competes with teal, which carries the primary action. */ --select: var(--gray-10); --select-bg: rgb(237 237 241 / .07); --select-bg-hover: rgb(237 237 241 / .12); --select-border: var(--gray-10); --on-select: var(--gray-0); /* The edge a focused control takes. Same near-white as selection: both are "you are here", as opposed to teal, which is "this does something". */ --focus-border: var(--gray-10); /* ---- Status ---- Only states that want a human get a hue. Finished work recedes. */ --st-blocked: var(--hue-red); --st-running: var(--hue-blue-lt); --st-review: var(--hue-amber); --st-queued: var(--text-3); --st-done: var(--text-3); --st-canceled: var(--text-5); --warn: var(--hue-amber); --info: var(--hue-amber); --danger: var(--hue-red); --done: var(--text-3); /* ========================================================== 3. Scales ========================================================== */ /* ---- Type ---- Nine sizes, no half pixels. If a size isn't here it isn't used. */ --fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-base:13px; /* dense UI default: table body, hints */ --fs-md: 14px; /* page default */ --fs-lg: 15px; /* form controls */ --fs-xl: 16px; --fs-2xl: 20px; --fs-3xl: 28px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --lh-tight: 1.2; --lh-snug: 1.35; --lh-relaxed: 1.45; --lh-normal: 1.5; /* Optical tracking. Large text tightens, small caps opens up. */ --tracking-tight: -.015em; --tracking-tighter: -.025em; --tracking-wide: .02em; --tracking-caps: .06em; /* uppercase micro-labels only */ /* ---- Space ---- A 2px sub-grid for dense UI, 4px above 16. Every padding, margin and gap in the project resolves to one of these. */ --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 10px; --space-6: 12px; --space-7: 14px; --space-8: 16px; --space-10: 20px; --space-12: 24px; --space-14: 28px; --space-16: 32px; --space-20: 40px; --space-24: 48px; --space-28: 56px; --space-32: 64px; --space-40: 80px; /* Legacy names, mapped onto the grid above. */ --space-xxs: var(--space-2); --space-xs: var(--space-4); --space-sm: var(--space-6); --space-md: var(--space-10); --space-lg: var(--space-16); --space-xl: var(--space-24); --space-xxl: var(--space-40); /* ---- Radius ---- Four steps that are actually distinguishable. */ --r-sm: 4px; --r: 6px; --r-lg: 8px; --r-xl: 10px; --r-full: 999px; /* ---- Type families ---- */ --font: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; /* ---- Elevation ---- Dark UI reads depth from a lighter edge plus a soft drop, not from the drop alone. */ --shadow-sm: 0 1px 2px rgb(0 0 0 / .4); --shadow-md: 0 4px 12px rgb(0 0 0 / .45); --shadow-lg: 0 12px 32px rgb(0 0 0 / .55); --shadow-preview: var(--shadow-lg); /* ---- Motion ---- */ --ease: cubic-bezier(.2, 0, .2, 1); --dur-fast: .12s; --dur: .16s; --dur-slow: .28s; }