/* COLOR — cool clinical paper, near-black ink, one schematic blue, one annotation amber, and five fixed architecture hues. THE RULE: color is meaning, never decoration. Four closed families, and a hue may only come from the family whose job it is doing. 1. surfaces & ink — the resting state of every screen 2. brand accent — accent (action, links, active) + amber (annotation) 3. architecture — the five Resonance layers, fixed forever 4. severity/status — severity of a finding, state of a thing Nothing may be tinted for interest. A hue on chrome, on a tag, on a button label, or on a heading is an adherence failure. Everything not doing one of the four jobs above is ink on paper. NEVER COLOR ALONE: every colored signal carries a label or a glyph too, so severity and status survive color-blindness and grayscale print. */ :root{ /* ---- 1 · surfaces & ink ---- */ --paper: #F5F6F1; --paper-raised: #FFFFFF; --paper-sunken: #ECEEE6; --ink: #15191E; --ink-soft: #51585F; --ink-faint: #8B9097; /* lightest ink permitted on paper — 4.6:1 */ --rule: #DCDED5; --rule-strong: #C5C8BC; --scrim: rgba(21,25,30,.48); /* ---- 2 · brand accent ---- accent: primary action, links, active state, focus ring, the eyebrow mark. amber: annotation and provisional state. Never an action, never a hue on chrome. Amber is deliberately outside both the neutrals and the architecture palette so a flag can never read as a layer. */ --accent: #2B3F8C; --accent-ink: #1E2C63; --accent-soft: #E6E9F4; --amber: #B9722A; --amber-ink: #8F5720; --amber-soft: #F3E4CF; /* ---- 3 · architecture ---- The five stages of a Resonance teaching turn, read bottom to top. A stage is ALWAYS the same hue wherever it appears — diagram, chip, dot, legend, or the identity strip on every page. These five are never reassigned and never used for anything that is not that stage. */ --layer-mesh: #A97D49; --layer-relations: #5E7F73; --layer-language: #5A6F99; --layer-answer: #2B3F8C; --layer-feedback: #8B6B8D; /* ---- 4 · severity & status ---- Severity grades a finding. Status reports a thing's live state. Each has a mark (fills, dots, bars, arcs), a soft (wash fills only) and an ink (text). Use the ink role for anything read; the mark role fails 4.5:1 at body size on purpose — it is a mark, not type. */ --sev-critical: #8E2F24; --sev-critical-soft:#F6E3DF; --sev-critical-ink:#7A281E; --sev-high: #B9722A; --sev-high-soft: #F3E4CF; --sev-high-ink: #8F5720; --sev-medium: #8A6A20; --sev-medium-soft: #F1EAD3; --sev-medium-ink: #6E5419; --sev-low: #51585F; --sev-low-soft: #E9EBE5; --sev-low-ink: #51585F; --sev-info: #2B3F8C; --sev-info-soft: #E6E9F4; --sev-info-ink: #1E2C63; --status-ok: #4F7A5C; --status-ok-soft: #E4EDE6; --status-ok-ink: #3E6149; --status-degraded: #B9722A; --status-degraded-soft:#F3E4CF; --status-degraded-ink:#8F5720; --status-down: #8E2F24; --status-down-soft: #F6E3DF; --status-down-ink: #7A281E; --status-unknown: #8B9097; --status-unknown-soft:#E9EBE5; --status-unknown-ink:#51585F; /* ---- semantic aliases — what a surface reaches for ---- */ --bg-app: var(--paper); --bg-surface: var(--paper-raised); --bg-sunken: var(--paper-sunken); --border-hairline:var(--rule); --border-strong: var(--rule-strong); --text-primary: var(--ink); --text-secondary: var(--ink-soft); --text-tertiary: var(--ink-faint); --text-on-ink: var(--paper); --text-accent: var(--accent); --fill-ink: var(--ink); --focus-ring: var(--accent); /* ---- state washes — one composite overlay, inverted on ink fills ---- 4% hover / 8% pressed. See state.css for the mechanism. */ --wash-hover: rgba(21,25,30,.04); --wash-press: rgba(21,25,30,.08); --wash-drag: rgba(21,25,30,.12); /* I5 · the surface UNDER a drag clone. Third step, no fourth */ --wash-hover-inverse: rgba(245,246,241,.10); --wash-press-inverse: rgba(245,246,241,.20); /* ---- ratification tier — the teaching platform's central distinction. Deliberately ALIASES of the status family rather than new hues: a tier IS a status (what is known about who checked this), so extending the palette would have added a fifth colour job for something the fourth already covers. Per the colour law, every tier is rendered with its WORD as well as its mark — "machine-ratified", never a bare blue dot. ---- */ --ratified-human: var(--status-ok); --ratified-human-soft: var(--status-ok-soft); --ratified-human-ink: var(--status-ok-ink); --ratified-machine: var(--sev-info); --ratified-machine-soft: var(--sev-info-soft); --ratified-machine-ink: var(--sev-info-ink); --ratified-none: var(--status-unknown); --ratified-none-soft: var(--status-unknown-soft); --ratified-none-ink: var(--status-unknown-ink); /* ---- deprecated · pre-Resonance tier names. Aliases only; never in new work. */ --tier-substrate: var(--layer-mesh); --tier-specialist: var(--layer-relations); --tier-assembly: var(--layer-language); --tier-appraisal: var(--layer-feedback); --tier-articulation: var(--layer-answer); } /* DARK — a token swap, nothing more. No component participates. Cool graphite, never pure black: an instrument at night, not a void. Every hue is chosen against ITS OWN background to hold 4.5:1 (3:1 at display size), not converted from the light value. */ [data-theme="dark"]{ --paper: #15181A; --paper-raised: #1D2124; --paper-sunken: #0F1214; --ink: #ECEEE8; --ink-soft: #A7ADB2; --ink-faint: #7B8288; --rule: #2B3034; --rule-strong: #3C434A; --scrim: rgba(0,0,0,.64); --accent: #8497DA; --accent-ink: #A9B6E6; --accent-soft: #1E2645; --amber: #D79A57; --amber-ink: #E3B27C; --amber-soft: #33240F; --layer-mesh: #C9A06F; --layer-relations: #8CAC9E; --layer-language: #8B9DC6; --layer-answer: #8497DA; --layer-feedback: #B693B8; --sev-critical: #E08072; --sev-critical-soft:#38201C; --sev-critical-ink:#E8998D; --sev-high: #D79A57; --sev-high-soft: #33240F; --sev-high-ink: #E3B27C; --sev-medium: #C9A94F; --sev-medium-soft: #2E2711; --sev-medium-ink: #D6BB72; --sev-low: #A7ADB2; --sev-low-soft: #23282B; --sev-low-ink: #A7ADB2; --sev-info: #8497DA; --sev-info-soft: #1E2645; --sev-info-ink: #A9B6E6; --status-ok: #74A886; --status-ok-soft: #16261B; --status-ok-ink: #8FBE9E; --status-degraded: #D79A57; --status-degraded-soft:#33240F; --status-degraded-ink:#E3B27C; --status-down: #E08072; --status-down-soft: #38201C; --status-down-ink: #E8998D; --status-unknown: #7B8288; --status-unknown-soft:#23282B; --status-unknown-ink:#A7ADB2; --wash-hover: rgba(236,238,232,.05); --wash-press: rgba(236,238,232,.10); --wash-drag: rgba(236,238,232,.15); --wash-hover-inverse: rgba(21,24,26,.10); --wash-press-inverse: rgba(21,24,26,.20); } /* I8 · color-scheme rides with the theme, so the browser's own furniture (scrollbars, form chrome, an installed app's status glyphs) follows the palette. */ :root{ color-scheme:light; } [data-theme="dark"]{ color-scheme:dark; }