/* Minhocário — design tokens. Cascade position 1 of 5: tokens → base → components → screens → motion. index.html is the source of truth for that order; never use @import. This file holds custom properties ONLY. Nothing here selects an element, so it can never win or lose a cascade fight — which is what lets every later file reference it freely. V2b NOTE — V2a named every value; this task retunes them. Anything still carrying an off-scale value here is doing so for a stated reason, not because it was missed. Deviations from the planned scales are marked DEVIATION with the reason inline. See DESIGN.md for the art direction these serve. */ :root { /* --- Surfaces ----------------------------------------------------------- A depth ramp: lightness RISES while saturation FALLS. That inversion is the whole point. Before V2b all three steps sat at hue 120 with ~18-22% saturation, so a panel read as "more green" rather than "closer to the viewer" — the green did the work that light should have been doing, and the stack looked flat. --surface-0 is deliberately unchanged. It is the deepest note of the field-notebook register and the one colour the whole screen is keyed to; the flattening was never in the base, it was in the steps above it. */ --surface-0: #1b2a1b; /* S 22% L 14% — page, gauge tracks, stage floor */ --surface-1: #232e25; /* S 14% L 16% — panels, HUD, chooser, cards */ --surface-2: #2d3830; /* S 11% L 20% — controls, borders, stats box */ --surface-3: #38423a; /* S 8% L 24% — raised/hover, reserved for Phase B */ /* --surface-1-alpha (92% --surface-1) was deleted in V12: it existed only so the internals panel could float over the 3D stage with the scene showing through. The panel is now its own opaque grid column, so the token had zero users — and a token nothing references is exactly the kind of dead weight V2a refused to leave behind, since no test can catch it. */ /* --- Ink --- Three tiers: values, labels, and incidental copy that should recede (empty-state lines, placeholder dashes). Contrast against the surfaces they actually sit on (WCAG 2.1): --ink 13.2 / 12.3 / 10.7 : 1 --ink-dim 7.5 / 7.0 / 6.1 : 1 --ink-faint 5.0 / 4.7 / 4.1 : 1 (AA on surface-0/-1, its only two) --ink-faint was first drafted at #7d8f78 and measured 4.36:1 — under AA, on real copy (the empty-state lines), so it was lightened before shipping. A third ink tier is only worth having if it is still readable. */ --ink: #eaf2e6; --ink-dim: #a9bda2; --ink-faint: #879a82; /* --- Accent --- */ --accent: #7bc043; --accent-ink: #14210f; /* Two weights, because the gauges genuinely use two: the comfort band sits behind the marker and must stay quiet, while the fill bar IS the readout. */ --accent-soft: rgba(123, 192, 67, 0.35); --accent-soft-strong: rgba(123, 192, 67, 0.55); /* --- State --- Named to match markFillLevel()'s vocabulary in js/ui/actions.js, so CSS and JS use one word per meaning. Each tier splits into a FILL and an INK, because the two have genuinely different jobs: a border, a gauge marker or a bar has no contrast floor to meet, while text does. Collapsing them forces one value to serve both, and the text always loses — #c0563f is a good alarm colour and a bad on-dark text colour (2.7:1 in the stats box, below even AA-large). Keeping the fill saturated is the point: the alarm quality lives in the border, the pulse and the gauge fill, which is where it reads anyway. Only the lettering lightens. Same shape as --accent-soft/--accent-soft-strong. --state-warn-ink equals --state-warn today because #e0b13c already clears AA (7.6/7.1/6.1). The indirection is not redundant: it keeps the two tiers structurally identical, so retuning warn-as-text later is a one-line change instead of a re-split. Do not "simplify" it away. */ --state-warn: #e0b13c; --state-warn-ink: var(--state-warn); --state-warn-bg: rgba(224, 177, 60, 0.12); --state-alert: #c0563f; --state-alert-ink: #ef8a72; --state-alert-bg: rgba(192, 86, 63, 0.12); --state-alert-glow: rgba(192, 86, 63, 0.28); /* The pulse's rest state. Deliberately the same hue at zero alpha rather than `transparent` (= rgba(0,0,0,0)), which some engines interpolate through black — the glow would flicker dark on every cycle. */ --state-alert-glow-0: rgba(192, 86, 63, 0); /* --- Scrims --- */ --scrim: rgba(0, 0, 0, 0.55); --scrim-dim: rgba(0, 0, 0, 0.35); /* --- Stage --- The CSS backdrop behind the 3D canvas. Load-bearing for graceful degradation: it is what the player sees if WebGL fails, so it is a real token and not a decorative gradient. */ --stage-sky: #2a3a4a; /* --- Typeface --- The embedded face (css/font.css) first, then the original system stack as the fallback. If the data URI ever fails to parse, the UI degrades to exactly what it rendered before V7 rather than to a serif default. */ --font-sans: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; /* --- Type --- Seven steps, .6875 → 1.5. The inherited ramp ran .75/.8/.85/.9/.95/1 — 0.05rem apart, which is under a pixel at a 16px root and therefore not a distinction the eye can use. These steps are far enough apart to establish hierarchy and tight enough to stay dense, which is the instrument register. */ --text-2xs: 0.6875rem; /* 11px — micro-labels (uppercase group headings) */ --text-xs: 0.75rem; /* 12px — dense secondary text */ --text-sm: 0.8125rem; /* 13px — the workhorse: panels, readouts, controls */ --text-md: 0.875rem; /* 14px — descriptions, body copy in cards */ --text-base: 1rem; /* 16px — default, panel headers */ --text-lg: 1.25rem; /* 20px — dialog titles */ --text-xl: 1.5rem; /* 24px — screen headings */ --leading-tight: 1.2; --leading-body: 1.4; --tracking-caps: 0.04em; /* --- Space --- 4px base. Everything the sheets use is now on this grid; the inherited 2/3/6/10/14px values were snapped to it in this task. DEVIATION: --space-05 is a deliberate half-step. Row gaps inside a gauge and the padding on a stat line are sub-4px by nature — forcing them to 4px visibly loosens the densest readouts, which works against the density this redesign is for. One half-step, used in three places, beats abandoning the grid or bloating the readouts. */ --space-05: 2px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; /* Kept as an alias so the five existing `gap: var(--gap)` sites don't move in the same commit as the scale that replaces them. */ --gap: var(--space-3); /* --- Radius --- */ --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; /* --- Elevation --- DEVIATION: no --shadow-3. The plan asked for three steps, but a third would have to be invented rather than extracted, and nothing in the design casts it. An unused token is a claim the code cannot back; Phase B adds it when something needs to sit above a dialog. */ --shadow-1: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.3); /* --- Motion --- Three steps now carry every transition and entrance in the UI; the eight stray durations V2a left literal (.06/.15/.18/.2/.22/.28s) all collapsed into them. DEVIATION: the two infinite pulses did NOT collapse. They are not transitions — they breathe for as long as a condition holds, and folding a 1.2s breath into --dur-slow (0.3s) turns a calm warning into a strobe. They keep a category of their own, and stay deliberately un-equal so a stressed gauge and an urgent button never lock into a single metronome beat. */ --dur-fast: 0.12s; --dur: 0.16s; --dur-slow: 0.3s; --dur-pulse: 1.2s; /* ambient: gauge marker / stat value */ --dur-pulse-urgent: 1.4s; /* demanding: the action that clears the condition */ --ease: ease; }