/* OOI design tokens — ONE visual system, TWO planes. Design of record: ooi_network/docs/site-redesign-plan.md (Brand Guidelines 2026 + the Web UI Kit contrast ledger; R-1..R-5 decided 2026-08-02). THE PLANE RULE — dark where the node measures, light where people read and act. The LIGHT plane (the brand's document ground) is the default on :root; a surface opts into the DARK plane with data-plane="dark" on or a scoping element. THE COLOUR LAW (WCAG 2.2 AA, from the kit's ledger): · Solar Orange #CC5500 is a FILL/GRAPHIC colour — never running text. · Orange text is --ooi-accent-text: #A34400 on light, #F0873A on dark. · Magenta is contrib provenance CHROME, never a data colour. Served twice, byte-identical (tested by test_design_tokens.py): /shared/ooi-tokens.css — the OX plane (ooi_network/client/shared/) /sx/assets/ooi-tokens.css — the SX plane (ooi_social/client/assets/) Font URLs are relative, so each serving location resolves its own fonts/. E-ONLY: no external URL appears anywhere in this sheet (tested). */ /* ── The faces — self-hosted, SIL OFL (licences alongside the files) ────── */ @font-face { font-family: "Mona Sans"; src: url("fonts/MonaSansVF.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; } @font-face { font-family: "Mona Sans"; src: url("fonts/MonaSansVF-Italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ── The light plane (default) — Earthen Clarity, the document ground ───── */ :root { /* ground */ --ooi-bg: #FAF8F5; /* Light Ivory — primary background */ --ooi-bg-2: #F2EFEA; /* Warm Ivory — secondary surface */ --ooi-bg-3: #EAE0D5; /* Sand — tertiary / wells */ --ooi-border: #D5C9BC; /* Stone — rules and hairlines */ --ooi-border-soft: rgba(94, 80, 63, 0.18); /* ink */ --ooi-ink: #3E2723; /* Dark Brown — primary text */ --ooi-ink-2: #5E503F; /* Earth Brown — secondary text */ --ooi-muted: #8D6E63; /* Muted Brown — captions, labels */ /* the solar accent — fill vs text, never confused */ --ooi-accent-fill: #CC5500; /* Solar Orange — fills/graphics ONLY */ --ooi-accent-text: #A34400; /* Solar Flare — orange TEXT + links */ --ooi-accent-hover: #8A3800; /* Ember — hover/active text */ --ooi-on-accent: #FFF8F2; /* text set on a solar-orange fill */ --ooi-glow: #DAA520; /* Solar Glow — highlight, compare */ /* status (AA on this ground) */ --ooi-good: #166534; --ooi-warn: #854D0E; --ooi-bad: #991B1B; /* contrib provenance — chrome, never palette */ --ooi-contrib-text: #A3197A; /* on light grounds */ --ooi-contrib-fill: #D6248C; /* the ribbon / edge rule */ --ooi-contrib-surface: #2A0F20; /* the contrib well */ /* data visualisation (fills/strokes — measurement colours) */ --ooi-ramp-1: #241713; --ooi-ramp-2: #3A2822; --ooi-ramp-3: #8A3800; --ooi-ramp-4: #CC5500; --ooi-ramp-5: #F0873A; --ooi-cat-primary: #CC5500; --ooi-cat-compare: #DAA520; --ooi-cat-exception: #B23A12; --ooi-grid-dark: #2E1E18; /* the faces */ --ooi-font-sans: "Mona Sans", "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif; --ooi-font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, "Courier New", monospace; } /* ── The dark plane — the instrument ground (Void · Umbra · Penumbra) ───── */ [data-plane="dark"] { --ooi-bg: #17100D; /* Void — primary background */ --ooi-bg-2: #241713; /* Umbra — cards / panels */ --ooi-bg-3: #2E1E18; /* Penumbra — raised / wells */ --ooi-border: #3A2822; /* Ridge — rules and hairlines */ --ooi-border-soft: rgba(195, 175, 163, 0.14); --ooi-ink: #F5EDE6; /* Light — primary text */ --ooi-ink-2: #C3AFA3; /* Dust — secondary text */ --ooi-muted: #9A8478; /* Ash — captions, axis labels */ --ooi-accent-text: #F0873A; /* Solar Orange 400 — orange TEXT */ --ooi-accent-hover: #FFA35C; /* Solar Orange 300 — hover text */ --ooi-on-accent: #1A0E06; /* text set on a solar-orange fill */ --ooi-good: #22C55E; --ooi-warn: #F59E0B; --ooi-bad: #F87171; --ooi-contrib-text: #F26FB2; /* contrib text on dark grounds */ } /* ── The two shared idioms (everything else lives per-surface) ──────────── */ /* the mono eyebrow — 11px/600, tracked wide, uppercase */ .ooi-eyebrow { font-family: var(--ooi-font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ooi-muted); } /* the mono chip — identifiers, states, counts (numerals are measurements) */ .ooi-chip { display: inline-block; font-family: var(--ooi-font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; padding: 2px 8px; border: 1px solid var(--ooi-border); border-radius: 4px; color: var(--ooi-ink-2); background: var(--ooi-bg-2); }