/* ============================================================ VISUAL-LANGUAGE TOKENS — CITADEL / Armory Intelligence color truth 3-tier architecture: PRIMITIVE → SEMANTIC → (component in app) Two registers from one source: [data-register="dark"] / "light" OKLCH source of record; hex fallbacks inline. Doctrine: visual-language-color-truth.md. Generated 2026-06-16. Hardened 2026-06-17. Reconciled 2026-07-10: focus ring parchment (never blue) + viz-seq stage ramp promoted from CITADEL v2 (both FOUNDER-ruled 2026-07-09). WHY OKLCH (the 4-line explainer): OKLCH is a PERCEPTUAL color space — L is perceived lightness (equal L ≈ equal visual weight across hues), C is chroma, H is hue angle. Unlike hex/HSL, nudging one axis doesn't distort the others, so the signal hues sit at honest equal-ish lightness and the metals stay one controllable step apart. Contrast pairs are audited in visual-language-contrast.md. Hex fallbacks inline for older engines. ============================================================ */ /* ---------- TIER 1 · PRIMITIVES (raw values, theme-agnostic) ---------- */ :root{ /* Foundation — OLED charcoal (nigredo) + parchment, 4-step lift. Re-seated 2026-07-22 (FOUNDER render-final ruling "keep shipped"): ground is true black (OLED pixels-off); chrome floats on a near-black ramp so elevation still reads. Screens only — external/brand plate charcoal stays twilight #1C1D21 (baked assets, print templates). Prior twilight ramp for reference: abyss .17/.008 · base .22/.010 · panel .27/.011 · raise .32/.012 · border .25/.010 */ --p-charcoal-abyss: oklch(0 0 0); /* #000000 — true black ground */ --p-charcoal-base: oklch(.155 .006 255); /* #0D0E12 — chrome: topbar · rail · tabbar · base cards */ --p-charcoal-panel: oklch(.205 .009 255); /* #191A1F — panel/popover lift */ --p-charcoal-raise: oklch(.255 .011 255); /* #232529 — raised: hover · active pill */ --p-charcoal-border:oklch(.225 .009 255); /* #1D1E23 — hairline base */ --p-parchment: oklch(.93 .012 80); /* #EAE7E0 */ --p-parchment-2: oklch(.86 .012 80); /* #D7D3CA */ --p-ash: oklch(.74 .010 80); /* #ADABA2 */ --p-ash-dim: oklch(.58 .010 80); /* #84827B */ /* Signal spine — LIGHT (pure, luminous, CVD-tuned, equal-ish L) */ --p-red: oklch(.64 .17 28); /* #E0584D alert */ --p-green: oklch(.63 .13 155); /* #2EA17F live */ --p-blue: oklch(.70 .12 240); /* #5B9BD8 verified */ --p-yellow: oklch(.86 .15 100); /* #E8C44D caution */ --p-cyan: oklch(.80 .10 210); /* #5FC4D4 system/data */ --p-magenta: oklch(.70 .15 350); /* #D86CA6 agentic */ /* Metals — IDENTITY/STRUCTURE (patinated, material, lower-chroma) */ --p-gold: oklch(.72 .125 80); /* #D49A3E ATLAS / primary */ --p-verdigris: oklch(.63 .105 165); /* #3FA47B THEMIS / secondary (greener, off-cyan) */ --p-mercury: oklch(.72 .02 280); /* #A8AAB4 METIS */ --p-copper: oklch(.64 .11 55); /* #BC7544 POROS */ --p-bronze: oklch(.66 .09 30); /* #C08070 HESTIA */ --p-iron: oklch(.58 .03 250); /* #7C8590 AEGIS */ --p-seal-gold: oklch(.80 .11 90); /* #DCB65C SPHRAGIS sealed */ /* Crimson — patinated IDENTITY tone (amendment 2026-07-04, B-final ruling; FOUNDER render-final confirm 13:39 EDT). Metals-side of the light/metals wall: material, lower-chroma, persistent. Oxblood LEADS structural chrome on EXTERNAL/BRAND surfaces (website, decks, letterhead, covers); wax is the SIGILLUM/seal object; the CITADEL cockpit stays gold-pure — the sole sanctioned internal crossings are the seal object + the SCOPE seal strip (per the B-final specimen). Crimson is NEVER a signal and NEVER operational chrome. It is separable from signal-red (--p-red, L.64/C.17) pre-attentively by the L/C gap — oxblood sits at L.30/C.09, a chasm below the alert mark. Roles are law in visual-language-color-truth.md (amended 2026-07-04). */ --x-crimson: oklch(.43 .12 22); /* #7C332E garnet — brand crimson (identity, external rules, seal); demoted lead */ --x-crimson-deep: oklch(.30 .09 20); /* #4E1F1D oxblood — LEAD structural tone: deck header plates, cover fills, dividers, rules */ --x-crimson-wax: oklch(.50 .14 27); /* #96382F seal wax — the SIGILLUM/record seal object only */ --x-crimson-lt: oklch(.45 .14 25); /* #84332C light-register form for parchment (rules, eyebrow, dividers) — lighter alt to oxblood */ } /* ---------- TIER 2 · SEMANTIC (fixed MEANING; values swap per register) ---------- */ :root, [data-register="dark"]{ /* surfaces / text */ --surface-abyss: var(--p-charcoal-abyss); --surface-base: var(--p-charcoal-base); --surface-panel: var(--p-charcoal-panel); --surface-raise: var(--p-charcoal-raise); --border: var(--p-charcoal-border); --hairline: color-mix(in oklab, var(--p-ash) 9%, transparent); --text: var(--p-parchment); --text-muted: var(--p-ash); --text-dim: var(--p-ash-dim); /* SIGNAL = action-state (RGB) + kind (CMY). Marks only, never fills. */ --tier-1: var(--p-green); --tier-1-tint: color-mix(in oklab, var(--p-green) 15%, transparent); --tier-2: var(--p-blue); --tier-2-tint: color-mix(in oklab, var(--p-blue) 15%, transparent); --tier-3: var(--p-red); --tier-3-tint: color-mix(in oklab, var(--p-red) 15%, transparent); --signal-caution: var(--p-yellow); --signal-caution-tint: color-mix(in oklab, var(--p-yellow) 15%, transparent); --signal-system: var(--p-cyan); --signal-system-tint: color-mix(in oklab, var(--p-cyan) 15%, transparent); --signal-agentic: var(--p-magenta); --signal-agentic-tint: color-mix(in oklab, var(--p-magenta) 15%, transparent); /* IDENTITY = agents (metals) */ --agent-atlas: var(--p-gold); --agent-metis: var(--p-mercury); --agent-themis: var(--p-verdigris); --agent-poros: var(--p-copper); --agent-hestia: var(--p-bronze); --agent-aegis: var(--p-iron); /* brand + structure */ --accent: var(--p-gold); /* primary = ATLAS gold */ --accent-tint: color-mix(in oklab, var(--p-gold) 18%, transparent); --secondary: var(--p-verdigris); --sealed: var(--p-seal-gold); /* state / utility */ /* focus — NEVER blue. Parchment two-layer ring (parchment ink at 55% over a 1px bg gap), FOUNDER 2026-07-09 02:18, CITADEL V1c §1; supersedes the earlier --p-blue ring. Gold variant reserved for the view's one primary act. */ --focus-ring: color-mix(in oklch, var(--p-parchment), transparent 45%); --focus-ring-primary: color-mix(in oklch, var(--p-gold), transparent 30%); --selection: var(--accent-tint); } /* ---------- Light register (external/brand) — same meanings, swapped values ---------- */ [data-register="light"]{ --surface-abyss: oklch(.97 .008 80); /* parchment-bright */ --surface-base: oklch(.94 .010 80); /* #F2EDE4 */ --surface-panel: oklch(.99 .006 80); /* vellum/white card */ --surface-raise: oklch(1 0 0); --border: oklch(.86 .012 80); --hairline: color-mix(in oklab, oklch(.20 .01 80) 10%, transparent); --text: oklch(.20 .012 60); /* charcoal ink */ --text-muted: oklch(.42 .012 60); --text-dim: oklch(.56 .010 60); /* signals re-anchored to AA-safe deeper variants on light ground (verified vs surface-base/panel ≥4.5 via the light-register render+test, 2026-06-16) */ --tier-1: oklch(.52 .14 155); --tier-2: oklch(.45 .14 250); --tier-3: oklch(.52 .18 28); --signal-caution: oklch(.56 .13 85); --signal-system: oklch(.52 .12 210); --signal-agentic: oklch(.52 .16 350); --accent: oklch(.50 .12 75); --sealed: oklch(.50 .11 88); /* HYBRID metals on light (FOUNDER call 2026-06-16): the render+test showed the dark agent-metals fail the fill floor on a light ground (5/6 <3). Resolution: · the two BRAND metals get AA-safe light forms — gold via --accent (5.2), verdigris via --secondary below (5.4) — for UI use (buttons, accents, links); · the full agent-metal spectrum (--agent-*) is DARK-REGISTER identity and is NOT redefined here. On light surfaces (the external/brand register) agent identity reads as a LABELED chip (color + name), never a standalone color-fill — honoring "no meaning by color alone." So the low-contrast agent-metal fills on light are intentional decoration behind a label, not a readability path. */ --secondary: oklch(.47 .105 165); /* focus on light: same never-blue rule, ink swapped to charcoal so the ring reads on a parchment ground. Parity-derived from the 2026-07-09 dark ruling, not separately ruled — verify against a light specimen before external use. */ --focus-ring: color-mix(in oklch, oklch(.20 .012 60), transparent 45%); } /* ---------- TYPE · the optical ladder (promoted to canon, 2026-06-17) ---------- */ /* The SYSTEM governs type; surfaces consume it (this reverses the old flow where the app defined the ladder and the design system exported it). These steps are OPTICALLY tuned, NOT a clean modular multiplier — adjacent content steps sit ~1.18–1.27 apart (15→18→22→28), tightened at the top, looser in the body for on-screen reading comfort. Honest about that: a tuned ladder, not a 1.250 scale. Family: IBM Plex Sans (text/UI) + IBM Plex Mono (labels). --fs-* are the canonical handles the app already consumes. */ :root{ --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --font-read: "IBM Plex Serif", "Iowan Old Style", Palatino, Georgia, serif; /* long-form reading (chat); ratified 2026-06-21 */ --fs-display: 34px; /* hero / cover numerals */ --fs-h1: 28px; --fs-h2: 22px; --fs-h3: 18px; --fs-body: 15px; /* base reading size (screen) */ --fs-sm: 13px; /* secondary / dense rows */ --fs-label: 12px; /* mono small-caps labels, tracked */ --fs-micro: 10px; /* metadata, footers */ --lh-tight: 1.2; /* headings */ --lh-body: 1.55; /* long-form reading */ --lh-ui: 1.4; /* controls / dense UI */ --tracking-label: .12em; } /* ---------- MOTION · the honest-delight curve (unified canon, 2026-06-17) ---------- */ /* Motion confirms a REAL state change — never decoration, never fake urgency. ONE source of truth now governs BOTH brand/light and CITADEL/dark surfaces — the app's former --t-* / --e-* alias these (no parallel motion system; the prior fork is closed). The spring (a small overshoot) is the FOUNDER-SEALED dark-register exception (design-system.md §9, FIAT 2026-06-14): EARNED completions only (a seal, a commit, a streak), ≥400ms, used sparingly. Grounded in honest-delight.md: anticipation/feedback for real events only. */ :root{ --motion-instant: 100ms; /* state flips (toggle, check) — feel immediate */ --motion-fast: 150ms; /* hovers, focus, small reveals */ --motion-enter: 180ms; /* element / stage entrances */ --motion-base: 220ms; /* mode swaps, register transition */ --motion-exit: 120ms; /* dismissals */ --motion-slide: 250ms; /* slide-overs / inspector */ --motion-slow: 360ms; /* full-surface / page transitions */ --motion-reward: 420ms; /* EARNED-completion settle (spring sites) */ --ease-out: cubic-bezier(.2,.8,.2,1); /* entrances — decelerate, responsive */ --ease-in: cubic-bezier(.4,0,.7,.2); /* exits — accelerate away */ --ease-in-out: cubic-bezier(.4,0,.2,1); /* moves between states */ --ease-spring: cubic-bezier(.34,1.45,.64,1); /* EARNED completion only — FOUNDER-sealed overshoot (§9) */ } @media (prefers-reduced-motion: reduce){ :root{ --motion-instant:0ms; --motion-fast:0ms; --motion-enter:0ms; --motion-base:0ms; --motion-exit:0ms; --motion-slide:0ms; --motion-slow:0ms; --motion-reward:0ms; } } /* NOTE (anti-slop audit 2026-06-29): consumers MUST drive animation off these --motion-* tokens. CITADEL's vnext currently hardcodes a few durations (.8s spinner, 2s pulse), which bypass this reduced-motion gate — vnext patches it with its own @media block; the real fix is token adoption. */ /* ---------- GEOMETRY · radius + spacing scale (anti-slop audit, 2026-06-29) ---------- */ /* The audit found 9 ad-hoc radius values + off-grid padding across CITADEL — the opposite of a strict grammar (interface-design-excellence R14/R16/R20). ONE scale, no ad-hoc values. Radius is deliberately small + tight: this is a cockpit, not a shadcn `rounded-2xl` card. Spacing snaps to a 4pt grid (8pt for major rhythm); never ship 7/9/11/13/15/17px. Borders stay hairline. */ :root{ --r-xs: 4px; /* chips, small marks */ --r-sm: 6px; /* inputs, buttons */ --r-md: 8px; /* cards, panels — the default */ --r-lg: 12px; /* overlays, modals, lens frames */ --r-pill: 999px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --border-hairline: 1px; /* never thicker; prefer 0.5px on retina; near-bg tint, felt-not-seen */ } /* ---------- VIZ · categorical chart palette (Okabe-Ito, CVD-safe) ---------- */ /* SEPARATE from the 6-hue signal spine: signals are SEMANTIC (fixed meaning); viz is CATEGORICAL (arbitrary series in a chart). Okabe-Ito (2008) is the colorblind-safe qualitative set; lifted slightly for the charcoal ground. Use in order; never overload a signal hue with a categorical meaning. */ :root, [data-register="dark"]{ --viz-1: #E69F00; /* orange */ --viz-2: #56B4E9; /* sky blue */ --viz-3: #2EBF91; /* green */ --viz-4: #F0E442; /* yellow */ --viz-5: #6699FF; /* blue */ --viz-6: #E8743B; /* vermillion */ --viz-7: #D58CC0; /* purple */ --viz-8: #C9C6BE; /* ash/neutral */ } [data-register="light"]{ /* deeper variants so series read on a parchment ground */ --viz-1:#B87A00; --viz-2:#2E86C1; --viz-3:#0E8F6E; --viz-4:#B59A00; --viz-5:#3A66CC; --viz-6:#C2531F; --viz-7:#A65A92; --viz-8:#6E6B63; } /* ---------- VIZ · sequential stage ramp (OKLCH, cool-to-green) ---------- */ /* The "OKLCH sequential" palette color-truth names is now DEFINED: an 8-step ordered ramp for STAGE-WAYFINDING viz (lifecycle position: lead through won), cold slate-blue warming to green as work approaches done. This is ORDERED data, not categorical — the no-rainbow module rule does not apply to it, and it never overloads the signal spine (its blues live in chart/board cells, never as marks). FOUNDER-ruled 2026-07-09 03:56 in CITADEL v2; promoted to vault Visual-Language 2026-07-10. Values verbatim from the ruled build. */ :root, [data-register="dark"]{ --viz-seq-1: oklch(.62 .09 256); /* lead — cold slate-blue */ --viz-seq-2: oklch(.65 .11 232); /* intake — blue */ --viz-seq-3: oklch(.68 .11 206); /* process — cyan-blue */ --viz-seq-4: oklch(.70 .10 188); /* quote — teal */ --viz-seq-5: oklch(.69 .12 170); /* approve — teal-green */ --viz-seq-6: oklch(.70 .13 158); /* execute — green */ --viz-seq-7: oklch(.66 .15 150); /* prove — green */ --viz-seq-8: oklch(.72 .17 148); /* won — bright green */ } [data-register="light"]{ /* deeper, high-contrast variants for a parchment ground */ --viz-seq-1:oklch(.50 .10 256); --viz-seq-2:oklch(.50 .12 232); --viz-seq-3:oklch(.50 .12 206); --viz-seq-4:oklch(.50 .11 188); --viz-seq-5:oklch(.48 .12 170); --viz-seq-6:oklch(.48 .13 158); --viz-seq-7:oklch(.46 .14 150); --viz-seq-8:oklch(.48 .15 148); } /* ---------- ICONS · Phosphor default, Lucide switchable (final-pass, 2026-06-16) ---------- */ /* FOUNDER call 2026-06-16: Phosphor is the default set (regular weight; bold for active/ selected), Lucide is a settings-switchable theme. One icon API, two glyph sets, swapped by `data-icons="phosphor|lucide"` on (parallel to data-register). Rules: same concept → same glyph everywhere; icons take currentColor (so they inherit signal/metal meaning); a standalone icon that carries meaning gets a label or title — never meaning by glyph alone. --icon-stroke applies to Lucide (stroke-based); Phosphor is fill/duotone-capable. */ :root{ --icon-size:18px; --icon-size-sm:14px; --icon-size-lg:22px; --icon-stroke:1.75; } /* ---------- CHROME · soft default, hard (the 1984 chrome) switchable (sealed 2026-09-08) ---------- */ /* The retro 1984 chrome (Xerox PARC / System 7 / IBM lineage, in IBM Plex) is the Armory Intel brand chrome on every surface (FOUNDER 2026-09-07 16:04, global; degree A 18:53; refinement A+ 21:57; canon-change confirmed 2026-09-08 03:12). It lives in channel 1 of the visual lexicon (elevation / how chrome is DRAWN) and carries no meaning: no colour, face, signal, accent or lifecycle token is redeclared here — every value below REFERENCES an existing token. Third root switch beside data-register and data-icons: `data-chrome="soft|hard"` on . Absent or "soft" = today's look, byte-for-byte; "hard" = A+. Surfaces opt in one at a time after their own render-verify. Discipline under "hard": ONE signature per screen — one striped title bar, one raised object, one name plate; every other panel stays quiet. Specimens that prove this block: 30_PROJECTS/governed-distribution/design/specimens/chrome-1984-plus-2026-09-07/. */ /* SOFT — the defaults every consumer reads when data-chrome is absent or "soft". */ :root, [data-chrome="soft"]{ /* rule / depth / focus */ --chrome-rule-color: var(--hairline); /* felt-not-seen hairline */ --chrome-raise-shadow: 0 10px 30px rgba(0,0,0,.45); /* soft blur under the one raised object */ --chrome-shadow-ink: transparent; --chrome-focus: none; /* the sealed --focus-ring still applies */ /* frame (move 2) */ --chrome-frame-outline: none; --chrome-frame-outline-primary: none; --chrome-frame-gap: 0px; /* title bar (move 1) */ --chrome-tb-rule: 0; --chrome-tb-bg: transparent; --chrome-tb-font: var(--font-sans); --chrome-tb-case: none; --chrome-tb-track: normal; --chrome-tb-pad: 0px; --chrome-tb-label-bg: transparent; --chrome-tb-label-pad: 0px; /* instruments (move 4) */ --chrome-gauge-ticks: none; --chrome-needle-radius: 1px; --chrome-bar-radius: 2px; --chrome-bar-rule: 0; --chrome-bar-h: 3px; --chrome-rhythm-radius: 50%; --chrome-rhythm-track: 0; /* name plate (move 5) */ --chrome-plate-bg: transparent; --chrome-plate-fg: inherit; --chrome-plate-pad: 0px; --chrome-plate-track: -.01em; /* marks, section labels, brackets, parked states (the extras) */ --chrome-mark-radius: 50%; /* status marks are dots */ --chrome-seclabel-rule: transparent; /* no chapter rule */ --chrome-corner-color: transparent; /* no corner brackets */ --chrome-parked-border-style: dashed; --chrome-parked-fill: none; } /* HARD — A+, the 1984 chrome. */ [data-chrome="hard"]{ /* GEOMETRY — the radius scale collapses; the pill goes to 2px (the soft scale above is untouched) */ --r-xs: 0px; --r-sm: 0px; --r-md: 0px; --r-lg: 0px; --r-pill: 2px; /* RULE — the hairline becomes a 1px rule at the full --border token */ --chrome-rule-color: var(--border); /* DEPTH — the one raised object carries a hard offset shadow, no blur (register-tuned below) */ --chrome-raise-shadow: 5px 5px 0 0 var(--chrome-shadow-ink); --chrome-shadow-ink: var(--border); /* FOCUS — 1px dotted rectangle in the text ink, never blue */ --chrome-focus: 1px dotted var(--text); /* MOVE 1 — one striped title bar per screen, on the primary object only; title on a solid patch */ --chrome-tb-rule: 1px solid var(--border); --chrome-tb-bg: repeating-linear-gradient(to bottom, var(--border) 0 1px, transparent 1px 3px); --chrome-tb-font: var(--font-mono); --chrome-tb-case: uppercase; --chrome-tb-track: var(--tracking-label); --chrome-tb-pad: 6px; --chrome-tb-label-bg: var(--surface-raise); --chrome-tb-label-pad: 8px; /* MOVE 2 — double-rule frame: inner border + 1px outer rule, 2px gap; heavier outer on the primary object */ --chrome-frame-outline: 1px solid var(--border); --chrome-frame-outline-primary: 1px solid color-mix(in oklab, var(--text) 45%, transparent); --chrome-frame-gap: 2px; /* MOVE 4 — instruments drawn as instruments: tick scales, square needles, thermometer bars, ruled tracks */ --chrome-gauge-ticks: repeating-linear-gradient(to right, var(--border) 0 1px, transparent 1px 8px); --chrome-needle-radius: 0; --chrome-bar-radius: 0; --chrome-bar-rule: 1px solid var(--border); --chrome-bar-h: 8px; --chrome-rhythm-radius: 0; --chrome-rhythm-track: 1px solid var(--border); /* MOVE 5 — reversed label plate for the name; both values flip with the register */ --chrome-plate-bg: var(--text); --chrome-plate-fg: var(--surface-base); --chrome-plate-pad: 6px; --chrome-plate-track: -.02em; /* EXTRAS as defaults (interpretation 4): square marks and ruled section labels ON; corner brackets defined, consumed by the primary object only; the parked checker fill OFF (opt in per surface with --chrome-parked-fill: var(--chrome-parked-fill-checker)). */ --chrome-mark-radius: 0; --chrome-seclabel-rule: var(--border); --chrome-corner-color: var(--text-dim); --chrome-parked-border-style: dashed; --chrome-parked-fill: none; --chrome-parked-fill-checker: repeating-conic-gradient(var(--surface-raise) 0% 25%, transparent 0% 50%); } /* MOVE 3 — register-aware depth. Light keeps the ink offset shadow (it reads on parchment). */ [data-chrome="hard"][data-register="light"]{ --chrome-shadow-ink: var(--text-muted); } /* Dark replaces the (invisible-on-OLED) shadow with a 4px plate + 1px top-left highlight, so the one raised object looks SET ON A PLATE rather than casting a shadow. Still one raised object. */ [data-chrome="hard"][data-register="dark"]{ --chrome-raise-shadow: 4px 4px 0 0 var(--surface-panel), inset 1px 1px 0 0 var(--surface-raise); }