/* ============================================================================ FLEET DESIGN LANGUAGE — tokens.css (v1.2) One system, three registers, brand-washable. Set on : data-register = editorial | console | workbench (required — the treatment) data-theme = light | dark (optional — omit = follow OS) data-accent = proof-red | slate | cyan | se-purple (optional — re-brands the whole app) HOW IT WORKS Each register supplies NEUTRAL SEEDS (--n-*) and a BRAND HUE (--accent-base). The chrome you actually style through (--bg --surface --surface-2 --rule ...) is DERIVED from the accent via color-mix, so choosing an accent tints the whole app — ground, bars, panel/table headers, hairlines — not just buttons. Body ink stays neutral on purpose. Accent survives a theme flip via a lift, it is never redefined per theme, so data-accent is never clobbered. Never hard-code a colour/font/radius/shadow in a component — go through the tokens so a register / theme / accent swap is a single attribute change. Fonts: Fraunces + IBM Plex Sans/Mono. Load fonts.css first. See SKILL.md. ============================================================================ */ :root{ /* font families (roles re-mapped per register) */ --fr:'Fraunces', Georgia, 'Times New Roman', serif; --pm:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --ps:'IBM Plex Sans', system-ui, -apple-system, sans-serif; /* ---- DERIVED (computed from the seeds each register/theme/accent sets) ---- */ --accent: color-mix(in oklab, #ffffff var(--accent-lift, 0%), var(--accent-base, #C0362C)); --accent-2: color-mix(in oklab, var(--accent) 84%, var(--accent-shift, #000000)); --accent-soft: color-mix(in oklab, var(--accent) 62%, var(--n-ink2, #565D63)); /* eyebrows/labels */ --bg: color-mix(in oklab, var(--accent) var(--w-bg, 0%), var(--n-bg, #F2F3F1)); --surface: color-mix(in oklab, var(--accent) var(--w-surf, 0%), var(--n-surface, #F2F3F1)); --surface-2: color-mix(in oklab, var(--accent) var(--w-surf2, 0%),var(--n-surface2, #EAECE7)); --rule: color-mix(in oklab, var(--accent) var(--w-rule, 0%), var(--n-rule, #D2D6CF)); --rule-strong:color-mix(in oklab, var(--accent) var(--w-rule, 0%), var(--n-rule-strong, #B4B9B0)); --ink: var(--n-ink, #15181B); /* body ink stays neutral */ --ink-2: var(--n-ink2, #565D63); /* semantic status — shared meaning, tuned per register/theme, NEVER the accent */ --good:#3E6B4F; --warn:#8F6410; --crit:#C0362C; /* motion (v1.2) — one easing, two durations, tempo set per register. Animate state change, never arrival. No bounce/elastic/overshoot. */ --ease:cubic-bezier(.2,.7,.25,1); --dur-1:120ms; /* micro: hover, toggle, focus */ --dur-2:200ms; /* structural: panel, drawer, theme flip */ } /* ======================= EDITORIAL ======================= Things you READ. Fraunces + mono, drafting-paper ground, generous, rules. */ :root[data-register="editorial"]{ --accent-base:#C0362C; /* proof red (default) */ --n-bg:#F2F3F1; --n-surface:#F2F3F1; --n-surface2:#EAECE7; --n-ink:#15181B; --n-ink2:#565D63; --n-rule:#D2D6CF; --n-rule-strong:#B4B9B0; --w-bg:3%; --w-surf:0%; --w-surf2:5%; --w-rule:9%; /* brand-wash strengths */ --good:#3E6B4F; --warn:#8F6410; --crit:#C0362C; --font-title:var(--fr); --title-weight:400; --title-vs:"opsz" 96,"WONK" 1; --font-body:var(--fr); --body-vs:"opsz" 24; --font-ui:var(--pm); --font-data:var(--pm); --radius:2px; --gap:26px; --pad:24px; --fs:17px; --fs-title:2.5rem; --fs-panel-title:1.5rem; --shadow:none; --ui-transform:uppercase; --ui-spacing:.12em; --dur-1:140ms; --dur-2:240ms; /* calm, page-like */ } :root[data-register="editorial"][data-theme="dark"]{ --accent-lift:15%; --accent-shift:#ffffff; --n-bg:#16191C; --n-surface:#16191C; --n-surface2:#1D2126; --n-ink:#E9E7E1; --n-ink2:#969B9D; --n-rule:#2A2E33; --n-rule-strong:#3B4147; --good:#6FA986; --warn:#C99A3E; --crit:#E4695D; } /* ======================= CONSOLE ======================= Dense TECHNICAL apps. Dark-first instrument panel, mono-forward, compact. */ :root[data-register="console"]{ --accent-base:#0E7C86; /* signal cyan (default) */ --n-bg:#EDEFF1; --n-surface:#F6F7F8; --n-surface2:#E4E7EA; --n-ink:#12171C; --n-ink2:#5A6672; --n-rule:#CFD5DB; --n-rule-strong:#AEB7C0; --w-bg:4%; --w-surf:3%; --w-surf2:6%; --w-rule:11%; --good:#1E7A4D; --warn:#9A6B12; --crit:#C0362C; --font-title:var(--pm); --title-weight:600; --title-vs:normal; --font-body:var(--ps); --body-vs:normal; --font-ui:var(--pm); --font-data:var(--pm); --radius:2px; --gap:12px; --pad:14px; --fs:13px; --fs-title:1.05rem; --fs-panel-title:.82rem; --shadow:none; --ui-transform:uppercase; --ui-spacing:.1em; --dur-1:80ms; --dur-2:140ms; /* near-instant, instrument */ } :root[data-register="console"][data-theme="dark"]{ --accent-lift:18%; --accent-shift:#ffffff; --n-bg:#0C0F12; --n-surface:#12171B; --n-surface2:#181E23; --n-ink:#D5DBDF; --n-ink2:#7C8894; --n-rule:#20272D; --n-rule-strong:#313A42; --good:#3FBE7A; --warn:#D6A23C; --crit:#E56054; } /* ======================= WORKBENCH ======================= Everyday PRODUCT UI. Plex Sans body + a Fraunces title, comfortable, soft. */ :root[data-register="workbench"]{ --accent-base:#2E5E8C; /* slate blue (default) */ --n-bg:#F6F7F8; --n-surface:#FFFFFF; --n-surface2:#F0F2F4; --n-ink:#1B2027; --n-ink2:#5C6773; --n-rule:#E3E7EB; --n-rule-strong:#CBD2D9; --w-bg:4%; --w-surf:2%; --w-surf2:6%; --w-rule:10%; --good:#2C7A52; --warn:#9A6B12; --crit:#C24234; --font-title:var(--fr); --title-weight:500; --title-vs:"opsz" 48; --font-body:var(--ps); --body-vs:normal; --font-ui:var(--ps); --font-data:var(--pm); --radius:6px; --gap:20px; --pad:20px; --fs:15px; --fs-title:1.85rem; --fs-panel-title:1.1rem; --shadow:0 1px 2px rgba(20,30,45,.06),0 6px 20px -12px rgba(20,30,45,.18); --ui-transform:none; --ui-spacing:.01em; --dur-1:120ms; --dur-2:200ms; /* comfortable product tempo */ } :root[data-register="workbench"][data-theme="dark"]{ --accent-lift:16%; --accent-shift:#ffffff; --n-bg:#14171B; --n-surface:#1B1F24; --n-surface2:#22272D; --n-ink:#E7EAED; --n-ink2:#98A2AD; --n-rule:#2A3037; --n-rule-strong:#3A424B; --good:#4FB07E; --warn:#CD9A44; --crit:#E06A5C; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -14px rgba(0,0,0,.5); } /* ======================= ACCENT PALETTES (data-accent) ======================= Override the brand hue only; the color-mix chain re-derives all chrome, and the theme lift keeps them working on dark. Declared AFTER the registers so a set data-accent wins over the register's default. Add your own palette by setting a single --accent-base. */ :root[data-accent="proof-red"] { --accent-base:#C0362C; } /* editorial default */ :root[data-accent="slate"] { --accent-base:#2E5E8C; } /* workbench default */ :root[data-accent="cyan"] { --accent-base:#0E7C86; } /* console default */ :root[data-accent="se-purple"] { --accent-base:#4A2076; } /* Siemens Energy brand purple */