/* ============================================================================ kg-theme-tokens.css - Kinetic Gain shared theme baseline. ONE source of truth for color, type, and spacing across the estate. Two skins, IDENTICAL variable names, switched by one attribute on : brand-facing surfaces (also the default) operator / proof surfaces Because the names never change between skins, a subdomain swaps skins by changing one attribute, and the theme gate checks one resolved variable. Base palette values are declared per skin; everything DERIVED (tints, hovers, lines) is computed once via color-mix from --kg-accent, so it adapts to whichever skin is active without being redefined per skin. As of the 2026-08-20 retirement below, both skins declare the SAME values, so the attribute currently changes nothing visually. That is intentional: the estate runs one palette today, and the switch stays wired for the day it does not. Upstream: extracted and generalized from the apex /site/assets/tokens.css. Apex-only legacy aliases (--a-*, --ground, --onyx, ...) were left behind. Pin a tag downstream; do not edit per-subdomain. RETIRED 2026-08-20 - the warm-ink direction (--seal #C0492F oxblood on a #0C0B0A warm ground, plus the amber #E0A43A ink-mark) is no longer in use on any Kinetic Gain surface. Apex itself moved onto the BERT dark-cyan palette, so the skin named after apex was describing a palette that had stopped existing. Both skins below now resolve to the same canonical BERT values. The [data-skin] selector is kept verbatim so downstream pages that already set data-skin="apex-warm-ink" keep working, and the two-skin mechanism is kept so the skins can diverge again without a structural change. Oxblood and the warm ground survive only in this paragraph, not in any value. Contrast, measured against WCAG 2.x, not eyeballed. Every text token clears 4.5:1 on the page ground (#0B0C10), the raised panel (#1F2833), AND the deeper inset (#161D26). --kg-text-faint is the tight one at 5.06:1 on the panel; it replaces #5B6166, which failed at 3.12:1 on the ground and 2.37:1 on the panel. --kg-text-muted replaces #8A8B8C, which passed on the ground (5.73:1) but failed on the panel (4.36:1). A token can pass on one surface and fail on the other, so re-measure against the surface it actually sits on before changing any value here. ============================================================================ */ /* ---- skin: apex-warm-ink (default; warm-ink retired 2026-08-20) ---------- */ /* Selector name kept for downstream compatibility. Values are BERT. */ :root, [data-skin="apex-warm-ink"] { --kg-bg: #0B0C10; /* page ground */ --kg-surface: #1F2833; /* raised panel */ --kg-border: #2B3A46; /* hairline rule */ --kg-text: #C5C6C7; /* primary text 11.43:1 on bg */ --kg-text-muted: #99A3AD; /* secondary text 7.63:1 on bg */ --kg-text-faint: #8C98A2; /* metadata 6.64:1 on bg */ --kg-text-strong: #EAF6F5; /* emphasis / headings 17.69:1 on bg */ --kg-accent: #66FCF1; /* cyan: links, focus, stat numbers */ --kg-accent-2: #45A29E; /* teal: solid button fills */ --kg-ok: #45A29E; /* teal */ --kg-warn: #E0A43A; /* amber */ --kg-danger: #F2495C; /* red */ } /* ---- skin: bert-dark (operator / proof) --------------------------------- */ [data-skin="bert-dark"] { --kg-bg: #0B0C10; /* near-black blue ground */ --kg-surface: #1F2833; /* raised panel */ --kg-border: #2B3A46; /* hairline rule */ --kg-text: #C5C6C7; /* primary text 11.43:1 on bg */ --kg-text-muted: #99A3AD; /* secondary text 7.63:1 on bg */ --kg-text-faint: #8C98A2; /* metadata 6.64:1 on bg */ --kg-text-strong: #EAF6F5; /* emphasis / headings 17.69:1 on bg */ --kg-accent: #66FCF1; /* cyan: links, focus, stat numbers */ --kg-accent-2: #45A29E; /* teal: solid button fills */ --kg-ok: #45A29E; /* teal */ --kg-warn: #E0A43A; /* amber */ --kg-danger: #F2495C; /* red */ } /* ---- derived tokens (skin-agnostic; computed from the active --kg-accent) */ :root { --kg-accent-soft: color-mix(in srgb, var(--kg-accent) 14%, var(--kg-bg)); /* faint accent fill */ --kg-accent-line: color-mix(in srgb, var(--kg-accent) 38%, transparent); /* accent border */ --kg-accent-hover: color-mix(in srgb, var(--kg-accent) 72%, var(--kg-text-strong)); /* brighten on hover */ --kg-shade: color-mix(in srgb, var(--kg-bg) 60%, #000); /* deeper than ground */ /* type voices (load the families separately; system fallbacks built in) */ --kg-serif: "Newsreader", Georgia, "Times New Roman", serif; --kg-sans: "Space Grotesk", -apple-system, system-ui, sans-serif; --kg-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* geometry + motion (hairline system: no glow, no shadow, radius <= 2px) */ --kg-radius: 2px; --kg-maxw: 1180px; --kg-maxw-read: 760px; --kg-gap: 16px; --kg-ease: cubic-bezier(.22, .61, .36, 1); } /* ---- minimal base so loading the tokens themes the page ----------------- */ html { color-scheme: dark; } body { margin: 0; background: var(--kg-bg); color: var(--kg-text); font-family: var(--kg-sans); line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: var(--kg-accent); text-decoration: none; } a:hover { color: var(--kg-accent-hover); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }