/* * Omyn Design System — legacy-tokens.css (World-2 compatibility layer) * --------------------------------------------------------------------------- * The pre-migration bra0.org pages (blueprint, knowledge-space, catalogue and * every docs/* page) carry inline styles that consume a legacy token * vocabulary: surfaces (--surface2/3), --border(-bright), --text(-dim/-muted), * the accent families (--orange/--green/--pink/--yellow/--blue/--purple/--teal/ * --cyan/--amber/--red/--bra0-blue/--indigo/--neutral-*), the blueprint * capability families (--cp/--sl/--dp/--ns/--tp) and status roles * (--ok/--warn/--gap/--plan). The four canonical World-2 sheets * (tokens/primitives/patterns/omyn-header) do not define those names. * * This layer supplies them, re-homed onto World-2 polarity (:root = LIGHT * default, [data-theme="dark"] overrides) and carrying the sealed tricolore * values (OMYN blue #0064FF + tricolore red #E1000F; purple forbidden, * collapsed onto blue). It is the migration bridge that lets the World-1 file * site-theme.css (:root = dark, inverted polarity) be retired without * rewriting the inline styles page-by-page. Values are ported verbatim from * site-theme.css so the migrated pages render identically. * * Load order (each migrated page ): * tokens.css → primitives.css → patterns.css → legacy-tokens.css * The .omyn-header chrome + Material Symbols are injected by site-nav.js. * * English only · no AI attribution · purple forbidden. */ /* ================================================================ LIGHT (default, World-2 polarity) — was site-theme.css [data-theme="light"] ================================================================ */ :root { --bg: #F5F7FA; --surface: #ffffff; --surface2: #F2F2F7; --surface3: #E4E7EC; --border: rgba(0,0,0,0.08); --border-bright: rgba(0,0,0,0.15); --text: #1C1C1E; --text-dim: #3A3A3C; --text-muted: #6A6A6F; /* AA on #F5F7FA (4.68:1); #8E8E93 read 3.04 and failed the gate */ /* families — saturated OMYN blues for white-bg readability + red tonic */ --blue: #0064ff; --blue-dim: rgba(0,100,255,0.08); --purple: #0064ff; --purple-dim: rgba(0,100,255,0.08); /* forbidden → blue */ --green: #0052cc; --green-dim: rgba(0,82,204,0.08); --green-light: #2f7bff; --green-dark: #0046b2; --green-darkest: #003a99; --teal: #0064ff; --teal-dim: rgba(0,100,255,0.08); --orange: #0064ff; --orange-dim: rgba(0,100,255,0.08); --orange-deep: #0052cc; --orange-light: #2f7bff; --orange-darkest: #003a99; --yellow: #2f7bff; --yellow-dim: rgba(47,123,255,0.08); --yellow-light: #5a9bff; --yellow-dark: #0052cc; --yellow-darkest: #4d94ff; --pink: #E1000F; --pink-dim: rgba(225,0,15,0.06); --pink-light: #ff5a63; --pink-lightest: #ffd0d3; --pink-dark: #b0000c; --bra0-blue: #0046b2; --bra0-blue-dim: rgba(0,70,178,0.08); --bra0-blue-light: #0064ff; --amber: #2f7bff; --amber-dim: rgba(47,123,255,0.08); --cyan: #0064ff; --cyan-dim: rgba(0,100,255,0.08); --red: #E1000F; --red-dim: rgba(225,0,15,0.06); --indigo: #2f7bff; --indigo-dim: rgba(47,123,255,0.08); --neutral-light: #8E8E93; --neutral-mid: #6b7689; --neutral-dark: #3A3A3C; --cp: #0052cc; --cp-dim: rgba(0,82,204,0.08); --sl: #0064ff; --sl-dim: rgba(0,100,255,0.08); --dp: #2f7bff; --dp-dim: rgba(47,123,255,0.08); --ns: #E1000F; --ns-dim: rgba(225,0,15,0.08); --tp: #64748b; --tp-dim: rgba(100,116,139,0.08); --ok: #16a34a; --warn: #d97706; --gap: #dc2626; --plan: #0064ff; /* ---- text-role INK tokens — Quinn bar ≥4.6, TEXT COLOUR ONLY. The hue tokens above keep backing borders, fills and dot glyphs; small text (chips, pills, code, inline links) re-points onto these darkened roles. Light = darkened, dark (below) = lightened. Every value is proven ≥4.6 on its composited background by e2e/site-qa-stress.mjs. ---- */ --ink-blue: #0052cc; /* every blue-family text: orange/teal/yellow/amber/dp/bra0/plan/green */ --ink-red: #b0000c; /* pink/red/ns narrative-tonic text */ --ok-ink: #0b7a34; /* status green text on --ok-dim */ --warn-ink: #895000; /* status amber text on --warn-dim */ --gap-ink: #b3161b; /* status red text on --gap-dim */ } /* ================================================================ DARK (toggle) — was site-theme.css :root default (inverted polarity) ================================================================ */ [data-theme="dark"] { --bg: #070C16; --surface: #111A2B; --surface2: #0E1626; --surface3: #233047; --border: rgba(255,255,255,0.08); --border-bright: rgba(255,255,255,0.15); --text: #F2F5FA; --text-dim: #C7CDD6; --text-muted: #8A93A3; /* action / primary (was orange) → OMYN sky blue */ --orange: #4d94ff; --orange-dim: rgba(0,100,255,0.14); --orange-light: #80b3ff; --orange-deep: #2f7bff; --orange-darkest: #0052cc; /* validation / rules (was green) → mid blue */ --green: #2f7bff; --green-dim: rgba(47,123,255,0.14); --green-light: #6fb0ff; --green-dark: #0064ff; --green-darkest: #0052cc; /* narrative / rythm (was pink) → tricolore red tonic */ --pink: #ff5a63; --pink-dim: rgba(225,0,15,0.16); --pink-light: #ff8a90; --pink-lightest: #ffd0d3; --pink-dark: #b0000c; /* vocabulary / known (was yellow) → pale blue */ --yellow: #9ec5ff; --yellow-dim: rgba(158,197,255,0.14); --yellow-light: #c7ddff; --yellow-dark: #6fb0ff; --yellow-darkest: #4d94ff; /* neutrals */ --neutral-light: #8A93A3; --neutral-mid: #6b7689; --neutral-dark: #3A3A3C; /* bra0 logo blue */ --bra0-blue: #4d94ff; --bra0-blue-dim: rgba(0,100,255,0.15); --bra0-blue-light: #80b3ff; /* structural aliases — purple FORBIDDEN → collapsed onto blue */ --purple: #4d94ff; --purple-dim: rgba(0,100,255,0.12); --blue: #4d94ff; --blue-dim: rgba(0,100,255,0.12); --indigo: #6fb0ff; --indigo-dim: rgba(47,123,255,0.10); --teal: #2f7bff; --teal-dim: rgba(47,123,255,0.12); --cyan: #4d94ff; --cyan-dim: rgba(0,100,255,0.12); --amber: #9ec5ff; --amber-dim: rgba(158,197,255,0.12); --red: #ff5a63; --red-dim: rgba(225,0,15,0.14); --cp: #2f7bff; --cp-dim: rgba(47,123,255,0.14); /* Control Plane — mid blue */ --sl: #5a9bff; --sl-dim: rgba(90,155,255,0.14); /* Semantic Layer — light blue */ --dp: #0064ff; --dp-dim: rgba(0,100,255,0.14); /* Data Plane — OMYN blue */ --ns: #ff5a63; --ns-dim: rgba(225,0,15,0.16); /* Neurosymbolic/Evidence — red tonic */ --tp: #9ec5ff; --tp-dim: rgba(158,197,255,0.14); /* Topo Perception — pale blue */ --ok: #3ddc84; --warn: #ffb340; --gap: #ff6b61; --plan: #5a9bff; /* text-role INK tokens — lightened for the dark surfaces (≥4.6). */ --ink-blue: #6fb0ff; --ink-red: #ff8a90; --ok-ink: #3ddc84; --warn-ink: #ffb340; --gap-ink: #ff6b61; } /* ================================================================ SHARED RESET & BASE — was site-theme.css ================================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.55; /* Subtle dot grid background (shared atmosphere) */ background-image: radial-gradient(circle, var(--border) 1px, transparent 1px); background-size: 28px 28px; } /* Body text links use the theme-aware AA-strong blue (#0052CC light / #4D93FF dark) rather than --orange (#0064FF light = only 3.9:1 on white, sub-AA). */ a { color: var(--color-primary-strong); } a:hover { color: var(--text); } @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeScale { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: 0s !important; } }