/* ════════════════════════════════════════════════════════════════════════════ PantheonIQ — design tokens. THIS IS THE ONLY FILE IN THE PLATFORM ALLOWED TO CONTAIN A LITERAL COLOUR. Every screen — the two consoles, the brain, the flow view, the widget and the public site — consumes these variables and defines none of its own. tools/verify-ui.js enforces that by scanning every other stylesheet, style block and script for a hex, rgb() or hsl() literal and failing the build. ── The three-theme-state rule ──────────────────────────────────────────── A viewer is in one of three states, and all three must be right: 1. explicit light → the :root block below 2. explicit dark → the [data-theme] block 3. system default no attribute → the media query block So the LIGHT palette is defined on bare :root, and the dark palette is defined TWICE, deliberately: once inside the media query (guarded with :not([data-theme="light"]) so an explicit light choice still wins) and once on [data-theme="dark"] (so an explicit dark choice wins over a light system). No token is defined ONLY inside a media query — a page rendered by a screenshot tool or a print stylesheet would lose it. The duplication is checked, not trusted: verify-ui.js asserts the two dark blocks declare exactly the same token names with exactly the same values, and that every token declared on :root has a dark counterpart. ── The colour-pair rule ────────────────────────────────────────────────── Colours come in NAMED PAIRS so AA contrast can hold in both themes: --brand a fill. Text placed on it uses --brand-ink. --brand-text the same idea as a colour, safe as TEXT on --surface. A gold that looks right as a button fill is 2.4:1 as text on white. Keeping one token for both is how an inaccessible screen gets shipped, so there are two, and verify-ui.js measures every rendered text/background pair. ════════════════════════════════════════════════════════════════════════ */ :root { color-scheme: light; /* ── Surfaces ─────────────────────────────────────────────────────────── */ --bg: #f6f4ef; --surface: #ffffff; --surface-2: #f1eee7; --surface-3: #e8e3da; --line: #e2ddd3; --line-strong: #bdb5a7; --overlay: rgba(20, 23, 28, 0.44); /* ── Text ─────────────────────────────────────────────────────────────── */ --text: #252720; --text-muted: #54564e; --text-subtle: #696b61; /* ── Brand (PantheonIQ gold) ──────────────────────────────────────────── */ --brand: #8a6a10; --brand-ink: #ffffff; --brand-text: #7a5d0e; --brand-bg: #faf3e2; --brand-line: #e3cf9d; /* ── Accent (the "working" green) ─────────────────────────────────────── */ --accent: #0e7048; --accent-ink: #ffffff; --accent-text: #0b6040; /* ── Status ───────────────────────────────────────────────────────────── */ --ok-text: #0b6040; --ok-bg: #e6f5ed; --ok-line: #a4d9c0; --warn-text: #855205; --warn-bg: #fdf3e0; --warn-line: #eacf9c; --danger-text: #a01c25; --danger-bg: #fdecee; --danger-line: #f1bcc1; --danger: #b02029; --danger-ink: #ffffff; --info-text: #0f4f8e; --info-bg: #e8f1fb; --info-line: #b2d0ee; /* ── Theme-invariant surfaces ─────────────────────────────────────────── */ /* These deliberately do NOT change with the theme. They exist so a screen can show what something will look like in the OTHER theme — the Appearance preview swatches show a client's accent on the widget's light surface and on its dark one, side by side, while the console itself is in whichever theme the reader chose. A token that flipped with the console would make those two swatches lie. */ --fixed-light: #ffffff; --fixed-light-ink: #14171c; --fixed-dark: #16181d; --fixed-dark-ink: #e8eaed; /* ── Focus ────────────────────────────────────────────────────────────── */ --focus: #1257ad; /* ── Elevation ────────────────────────────────────────────────────────── */ --shadow-1: 0 1px 2px rgba(20, 23, 28, .06), 0 1px 3px rgba(20, 23, 28, .05); --shadow-2: 0 4px 12px rgba(20, 23, 28, .10), 0 2px 4px rgba(20, 23, 28, .06); --shadow-3: 0 12px 32px rgba(20, 23, 28, .18); /* ── Radii ────────────────────────────────────────────────────────────── */ --r-1: 6px; --r-2: 9px; --r-3: 12px; --r-4: 16px; --r-full: 999px; /* ── Space ────────────────────────────────────────────────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 22px; --s-6: 30px; --s-7: 42px; --s-8: 60px; /* ── Type ─────────────────────────────────────────────────────────────── */ --f-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; --f-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --fs-xs: 11.5px; --fs-sm: 12.5px; --fs-base: 15px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 21px; --fs-2xl: 32px; --lh-tight: 1.25; --lh-base: 1.55; /* ── Layout ───────────────────────────────────────────────────────────── */ --maxw: 1160px; --auth-maxw: 32rem; --nav-w: 236px; --dur: .16s; } /* ── DARK, state 3: the system default, with no explicit choice made ─────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #141612; --surface: #1c1f19; --surface-2: #24271f; --surface-3: #2e3228; --line: #35392f; --line-strong: #515747; --overlay: rgba(0, 0, 0, .62); --text: #efeee7; --text-muted: #b8bdaf; --text-subtle: #a2a997; --brand: #c2972c; --brand-ink: #17120a; --brand-text: #dcb246; --brand-bg: #241d0e; --brand-line: #4d3d18; --accent: #3ddc84; --accent-ink: #06170e; --accent-text: #57e096; --ok-text: #62dd9b; --ok-bg: #10251b; --ok-line: #235940; --warn-text: #e8c072; --warn-bg: #272013; --warn-line: #574726; --danger-text: #f4a0a0; --danger-bg: #2b1618; --danger-line: #5e2c30; --danger: #d4595f; --danger-ink: #2a0d0f; --info-text: #96c1f2; --info-bg: #131f2e; --info-line: #2c4667; --fixed-light: #ffffff; --fixed-light-ink: #14171c; --fixed-dark: #16181d; --fixed-dark-ink: #e8eaed; --focus: #7cb2f2; --shadow-1: 0 1px 2px rgba(0, 0, 0, .40), 0 1px 3px rgba(0, 0, 0, .30); --shadow-2: 0 4px 12px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .30); --shadow-3: 0 12px 32px rgba(0, 0, 0, .55); } } /* ── DARK, state 2: the viewer chose dark explicitly ─────────────────────── */ :root[data-theme="dark"] { color-scheme: dark; --bg: #141612; --surface: #1c1f19; --surface-2: #24271f; --surface-3: #2e3228; --line: #35392f; --line-strong: #515747; --overlay: rgba(0, 0, 0, .62); --text: #efeee7; --text-muted: #b8bdaf; --text-subtle: #a2a997; --brand: #c2972c; --brand-ink: #17120a; --brand-text: #dcb246; --brand-bg: #241d0e; --brand-line: #4d3d18; --accent: #3ddc84; --accent-ink: #06170e; --accent-text: #57e096; --ok-text: #62dd9b; --ok-bg: #10251b; --ok-line: #235940; --warn-text: #e8c072; --warn-bg: #272013; --warn-line: #574726; --danger-text: #f4a0a0; --danger-bg: #2b1618; --danger-line: #5e2c30; --danger: #d4595f; --danger-ink: #2a0d0f; --info-text: #96c1f2; --info-bg: #131f2e; --info-line: #2c4667; --fixed-light: #ffffff; --fixed-light-ink: #14171c; --fixed-dark: #16181d; --fixed-dark-ink: #e8eaed; --focus: #7cb2f2; --shadow-1: 0 1px 2px rgba(0, 0, 0, .40), 0 1px 3px rgba(0, 0, 0, .30); --shadow-2: 0 4px 12px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .30); --shadow-3: 0 12px 32px rgba(0, 0, 0, .55); }