/* boas.dev — Light Register Design Tokens (v3.0.0) * The REIMAGINED light mode (supersedes "amber / paper", operator-trashed * 2026-04-27: "the paper concept is a placeholder and frankly a ridiculous * concept as a 'light mode' for a terminal aesthetic... reimagine the colors"). * * v3 answer: light is the SAME blue system at rest — a COOL blue-paper register, * not warm cream, not screen-white. Blue ink on pale ice-paper; the same * procedural edge, halftone, and dither primitives; the same Bricolage + mono * faces. Per the 2026-04-27 functional contract a mode flip is PAINT-ONLY: * identical DOM, components, motion, timings, structure — only the --c-* role * cascade re-resolves. No paper grain conceit, no tempo slowdown, no L4-5 ban. * * Activate: (default with no attribute = dark). */ :root[data-mode="light"], .boas-light { /* ─── Surfaces — cool ice-paper (NEVER #fff, NEVER cream) ─── */ --c-bg: #e7edf0; /* cool vellum base */ --c-bg-raised: #f3f7f9; /* panel — lifted container */ --c-bg-raised-2: #edf2f5; /* panel-2 — nested context */ /* ─── Satellite background component — "R, G, B" triplet (boas-satellite.js / SatelliteBackground.tsx) ─── */ --sat-color: 6, 20, 27; /* near-black ink — visible on ice-paper (override per-surface to brand-blue if wanted) */ /* ─── Borders — cool steel hairlines → deep-blue frames ─── */ --c-border: #c6d3da; /* hairline divider */ --c-border-2: #b1c3cc; /* container edge */ --c-primary-deep: #075985; /* active frame border */ --c-primary-abyss:#0c4a6e; /* deepest accent border */ /* ─── Blue accent ramp — the STRUCTURE pole, DEEPENED for contrast on pale ground ─── */ --c-primary: #0369a1; /* primary interactive blue (sky-700) */ --c-primary-bright: #0891b2; /* live / brightest (cyan-600) */ --c-accent: #0e7490; /* secondary accent (cyan-700) */ --c-primary-glow: rgba(3,105,161,0.16); /* ─── Red ramp — the ATTENTION pole, soft brick deepened to read on pale paper ─── */ --c-red: #a14f4b; /* clay — soft interactive red */ --c-red-bright: #8a3a36; /* deepest emphasis red */ --c-red-deep: #7c3a37; /* red frame border */ --c-red-abyss: #5e2c2a; /* deepest red accent border */ --c-red-glow: rgba(161,79,75,0.16); /* ─── Contrast fill bases — pale TINTED grounds (never #fff). Blue edge → warm ground; red edge → cool ground. The fill is ground + opposite-pole halftone. ─── */ --c-fill-red: #f1e4e3; /* pale warm ground (under blue-pole frames) */ --c-fill-blue: #e3ebf0; /* pale cool ground (under red-pole frames) */ --c-fill-red-2: #ecdad8; /* raised warm ground (button block) */ /* ─── Text — blue ink on cool paper (carries the no-grey discipline) ─── */ --c-text-bright: #06141b; /* headings peak */ --c-text-primary: #0c1d26; /* body ink */ --c-text-secondary: #38505b; /* secondary prose / labels */ --c-text-muted: #5f757f; /* muted meta (chrome only, AA on --c-bg) */ /* ─── Status — deepened to stay legible on light ─── */ --c-warning: #b45309; /* alert */ --c-danger: var(--c-red); /* fault — soft red; danger reads by #edgeDanger warp + double-stroke */ --c-danger-double: #b45309; /* orange second line of the danger double-stroke */ --c-info: #4b5b7a; /* dormant */ --c-accent-status: #0e7490; /* ─── Typography — IDENTICAL faces (paint-only contract) ─── */ --font-disp: "Bricolage Grotesque", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; --tracking-disp: -0.015em; --tracking-body: 0em; --tracking-label: 0.08em; --tracking-caps: 0.18em; --max-line-length: 74ch; /* ─── Procedural edge — SAME filters, mode-agnostic (only colors differ) ─── */ --edge: url(#edgeLive); /* same-document fragment — inline the defs */ --edge-static: url(#edgeStatic); --edge-past: url(#edgePast); --edge-avatar: url(#edgeAvatar); --edge-hot: url(#edgeHot); /* hover/focus energize */ --edge-danger: url(#edgeDanger); /* danger — soft red agitated harder */ --warp-dur: 5.2s; --warp-min:2.6; --warp-max:4.4; /* ─── Halftone — opposite-pole dots (blue ground → red dots; red ground → blue dots) ─── */ --ht-blue: #aacedc; /* blue dot ink — on a red (warm) ground */ --ht-red: #d9b3b0; /* red dot ink (soft) — on a blue (cool) ground */ --ht-dot: var(--ht-blue); /* default; .edge--inv repoints to --ht-red */ --ht-size: 4px; --ht-fill: 46%; /* ─── Dither ─── */ --dither: url(#dither); --steps: 5; /* ─── Spacing / geometry / z — IDENTICAL to dark ─── */ --sp-0:0; --sp-0-5:4px; --sp-1:8px; --sp-1-5:12px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-6:48px; --sp-8:64px; --sp-12:96px; --sp-16:128px; --radius:3px; --radius-max:5px; --border-width:1px; --caret-color:var(--c-primary); --z-ground:0; --z-surface:10; --z-content:100; --z-overlay:300; --z-system:900; /* ─── Elevation — radiographic COOL shadows (was amber-warm; now blue-keyed) ─── */ --elev-0: none; --elev-1: 0 1px 2px rgba(11,40,55,0.08), 0 1px 3px rgba(11,40,55,0.04); --elev-2: 0 2px 6px rgba(11,40,55,0.12), 0 4px 12px rgba(11,40,55,0.06); --elev-3: 0 4px 12px rgba(11,40,55,0.16), 0 8px 24px rgba(11,40,55,0.08); /* ─── Tempo — PARITY (no slowdown — functional contract) ─── */ --tempo-scale:1.0; --t-fast:120ms; --t-med:240ms; --t-slow:480ms; --stagger-initial:400ms; --loop-interval-scale:1.0; /* ─── Interaction ─── */ --focus-ring: 2px solid var(--c-primary); --focus-ring-offset: 2px; --disabled-opacity: 0.45; /* ─── Grain — multiply on light (additive reads as screen artifact) ─── */ --grain-opacity: 0; --grain-blend: multiply; --grain-sprite: url(#grain-light); /* ─── Viz ladder — blue-led, deepened ─── */ --viz-1: var(--c-primary); --viz-2: var(--c-accent); --viz-3: var(--c-primary-deep); --viz-4: var(--c-warning); --viz-max-series: 4; } /* ─── Geometry-stability carve-out (constellation-apollo-027, CANONICAL) ─── Controls stay geometry-stable across modes — color carries feedback, not size. Defensive line-height reset survives the dual-mode mechanic. */ :root[data-mode="light"] :is(button,[role="button"],.chip,.badge,.pill,input,select,textarea){ line-height: 1; }