/* UPP design tokens — the one place colour, type and spacing are defined. * * Rule (documentation/50-design-system.md): components read tokens; no wing * hard-codes a colour. Both themes are first-class — prefers-color-scheme is the * default, and the account's saved choice stamps data-theme on and wins. * * No webfonts: an airgapped app must not fetch a CDN face (roadmap §6). The * system stacks below are the deliberate choice, not a fallback. */ :root { /* Neutrals — cool slate, biased toward the accent so grey reads as chosen. */ --bg: #eef1f4; --surface: #ffffff; --surface-2: #f6f8fa; --border: #d6dde4; --border-strong: #c1ccd6; --text: #1a2129; --text-dim: #5a6773; --text-faint:#8996a3; /* One accent, for everything interactive — a control-panel teal-cyan. */ --accent: #12857c; --accent-hover:#0e6f68; --accent-weak: #d6ece9; --on-accent: #ffffff; /* Wing identities — functional, not decorative: which wing am I in. */ --wing-emd: #b9781f; --wing-pbn: #2f6fb0; --wing-links: #7255c2; /* Semantic — distinct from the accent hue. */ --ok: #2f8f4e; --warn: #b5820f; --crit: #c23b34; --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "Cascadia Code", "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; /* Type scale — 1.20 minor third off a 15px base (denser than reading text; this is a console). */ --fs-xs: 0.72rem; --fs-sm: 0.82rem; --fs-base: 0.9375rem; --fs-md: 1.06rem; --fs-lg: 1.35rem; --fs-xl: 1.85rem; --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-8: 3rem; --radius: 8px; --radius-sm: 5px; --radius-lg: 14px; --shadow: 0 1px 2px rgba(20, 30, 40, 0.06), 0 4px 16px rgba(20, 30, 40, 0.06); --ring: 0 0 0 3px var(--accent-weak); } /* Dark, as the OS default … */ @media (prefers-color-scheme: dark) { :root { --bg: #0f141a; --surface: #171e26; --surface-2: #1d2630; --border: #2a343f; --border-strong: #3a4753; --text: #e5ecf2; --text-dim: #9aa8b5; --text-faint:#6b7883; --accent: #2bb3a6; --accent-hover:#3ac6b8; --accent-weak: #11332f; --on-accent: #07110f; --wing-emd: #d69a3f; --wing-pbn: #5a9bde; --wing-links: #a08ae0; --ok: #4fb26e; --warn: #d6a52f; --crit: #e26058; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.35); --ring: 0 0 0 3px rgba(43, 179, 166, 0.3); } } /* … and the account's explicit choice overrides the OS in both directions. */ :root[data-theme="light"] { --bg: #eef1f4; --surface: #ffffff; --surface-2: #f6f8fa; --border: #d6dde4; --border-strong: #c1ccd6; --text: #1a2129; --text-dim: #5a6773; --text-faint:#8996a3; --accent: #12857c; --accent-hover:#0e6f68; --accent-weak: #d6ece9; --on-accent: #ffffff; --wing-emd: #b9781f; --wing-pbn: #2f6fb0; --wing-links: #7255c2; --ok: #2f8f4e; --warn: #b5820f; --crit: #c23b34; --shadow: 0 1px 2px rgba(20, 30, 40, 0.06), 0 4px 16px rgba(20, 30, 40, 0.06); --ring: 0 0 0 3px var(--accent-weak); } :root[data-theme="dark"] { --bg: #0f141a; --surface: #171e26; --surface-2: #1d2630; --border: #2a343f; --border-strong: #3a4753; --text: #e5ecf2; --text-dim: #9aa8b5; --text-faint:#6b7883; --accent: #2bb3a6; --accent-hover:#3ac6b8; --accent-weak: #11332f; --on-accent: #07110f; --wing-emd: #d69a3f; --wing-pbn: #5a9bde; --wing-links: #a08ae0; --ok: #4fb26e; --warn: #d6a52f; --crit: #e26058; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.35); --ring: 0 0 0 3px rgba(43, 179, 166, 0.3); } /* Segment colours beyond the three wings (admin + growth headroom). Theme-aware * like the wing tokens; a new wing adds its own --wing- here. */ :root { --wing-admin: #b0446a; } @media (prefers-color-scheme: dark) { :root { --wing-admin: #e0819e; } } :root[data-theme="light"] { --wing-admin: #b0446a; } :root[data-theme="dark"] { --wing-admin: #e0819e; } :root { --wing-hreflang: #2e8b57; } @media (prefers-color-scheme: dark) { :root { --wing-hreflang: #5cc98a; } } :root[data-theme="light"] { --wing-hreflang: #2e8b57; } :root[data-theme="dark"] { --wing-hreflang: #5cc98a; } :root { --wing-generate: #b9781f; } @media (prefers-color-scheme: dark) { :root { --wing-generate: #d69a3f; } } :root[data-theme="light"] { --wing-generate: #b9781f; } :root[data-theme="dark"] { --wing-generate: #d69a3f; } :root { --wing-chain: #b0446a; } @media (prefers-color-scheme: dark) { :root { --wing-chain: #d16f92; } } :root[data-theme="light"] { --wing-chain: #b0446a; } :root[data-theme="dark"] { --wing-chain: #d16f92; } /* drop — emd's generation twin, but its own coral identity (warm sibling to * emd's gold, distinctly redder). */ :root { --wing-drop: #c8563a; } @media (prefers-color-scheme: dark) { :root { --wing-drop: #e67a5c; } } :root[data-theme="light"] { --wing-drop: #c8563a; } :root[data-theme="dark"] { --wing-drop: #e67a5c; }