/* ============================================================ tokens.css — THE single source of design values. ------------------------------------------------------------ Generated from the locked workbench recipe (2026-07-09), named in XUR's token vocabulary so the same component CSS runs in the workbench, in surface prototypes, in XUR, and (via 003fcd4's token pass) in the app itself. Surfaces link this ONCE, then link the components they use. Nobody re-declares a colour. Change a value here → every surface and every component follows. NOTE for XUR: beyond `--neutral` we also need its ramp (`--neutral-hi`, `--neutral-strong`, `--on-neutral`) — it mirrors the accent ramp exactly and the segmented thumb needs it. ============================================================ */ :root{ /* surface */ --bg:#0a1628; --surface:#19283E; --surface-2:#243247; /* --bg locked 2026-07-13 (Michael's Surface-Studio canvas) */ --border:#28374F; --border-strong:#3A4A66; /* account-card glass (2026-07-13) — the Discovery account-card surface. The 2026-07-13 flicker pass pulled the card's backdrop-filter (five nested blurs = the flicker), leaving a flat --surface-2 62% fill that read green/dirty. --surface-2 #243247 leans teal (G sits above R); pulling toward --bg does NOT fix it (bg's G/R ratio is higher still), so the clean move is a whisper of white — it lifts the teal ratio toward neutral AND adds the luminosity that reads as glass rather than a flat translucent panel. So the material is glass MODELED without a backdrop-filter (that stays off; see the frames .card note): the cooler-luminous tint, a translucent fill so it still floats over the section, a top-lit sheen + a 1px inset top highlight for the glass "tell," and a cool hairline edge. Both the frames .card AND the workbench "Account-card glass" Kit tile read these — change the look here, once. NOTE --card-glass derives from --surface-2, but a custom property substitutes its var() at the scope where it is DECLARED (here, :root), so it resolves against the tokens palette (--surface-2 #243247) — which is exactly the workbench's LOCKED_COLORS.card2, so the Kit tile and the frames render identical. (A runtime surface RE-theme in the workbench sets --surface-2 on #sbody, not :root, and would NOT reflow this derived fill — immaterial while surfaces are locked to this palette; re-bind --card-glass at #sbody if that ever changes.) Gate: hex/color-mix are fine in tokens.css (see --shadow). LOCKED 2026-07-13 (Michael's Surface-Studio recipe): the cards now float on the BARE dark canvas (no section behind them), so the base is his dialed navy #0b1c38 + a 10% white lift, at a low 40% fill (glassy over the canvas), and no edge. */ --card-glass:color-mix(in srgb, #0b1c38 90%, #fff); /* base navy #0b1c38 + 10% white */ --card-glass-fill:40%; /* fill over the canvas (translucent glass) */ --card-glass-line:transparent; /* no card border (locked) */ --card-glass-top:color-mix(in srgb, #fff 10%, transparent); /* 1px top highlight */ --card-glass-sheen:color-mix(in srgb, #fff 8%, transparent); /* top-lit sheen */ /* text */ --text-strong:#FBF8F2; --text:#B3B6B9; --text-dim:#848A93; /* accent — brass/gold */ --accent:#D5B06C; --accent-strong:#BE9749; --accent-hi:#F2DBA8; --on-accent:#1A1206; --accent-text:#E8C589; --accent-line:#D9C7A5; --accent-soft:color-mix(in srgb, #D5B06C 14%, transparent); --ring:color-mix(in srgb, #D5B06C 40%, transparent); /* neutral — the cool blue-grey ramp (secondary/ghost/segmented thumb) */ --neutral:#9FB0C6; --neutral-hi:#E7EDF6; --neutral-strong:#7C8CA3; --on-neutral:#101725; /* status */ --good:#4ADE80; --warn:#F5C044; --bad:#F87171; /* spouse — h (primary / husband) blue, w (spouse / wife) pink. Copied VERBATIM from the production app (anchor-client-navigator/index.html lines 47-48) so the prototype's Jim/Pam match the dashboard exactly rather than the hand-picked near-misses they had. Semantic (from the app): -500 = fill/bg, -200 = label text, -300 = bright on-dark accent. */ --h-700:#1A3C70; --h-500:#2F5BA0; --h-300:#74AFFF; --h-200:#CBE0FF; --h-100:#DFE8F6; --w-700:#6E1A42; --w-500:#D25A91; --w-300:#FF96C7; --w-200:#FCC8DE; --w-100:#F4DCE8; /* depth */ --shadow-sm:0 4px 12px color-mix(in srgb, #000 28%, transparent); --shadow:0 8px 22px color-mix(in srgb, #000 34%, transparent); /* goo-popover lift — a drop-shadow I ADDED to the beui menu (its own depth comes from the goo filter + surface fill). Michael 2026-07-13: the --bg-tinted version read as a "steel-look glow," not a shadow — he wants a BLACK shadow he can dial. Now black-based; the workbench composes a TUNABLE --pop-shadow (colour Black/Steel/None + blur/offset/ opacity) and overrides this on #sbody. The frames + anchor-popover (gear menu AND the Convert-to-% tooltips) read this default. History: 0 14px 30px @78% → 0 8px 18px @52% → 0 3px 9px @ --bg 26% → this black one. Gate: hex is fine in tokens.css (see --shadow). */ --pop-shadow:drop-shadow(0 4px 12px color-mix(in srgb, #000 30%, transparent)); /* goo-menu section titles (.acn-pop__label — "DATA" / "Status" / …) — colour is tunable in the workbench (Michael 2026-07-13). LOCKED to BRIGHT per his recipe 2026-07-13. */ --pop-label:var(--text-strong); /* type */ --font-display:'Geist',-apple-system,system-ui,sans-serif; --font-body:'Geist',-apple-system,system-ui,sans-serif; --font-mono:'Inter',ui-monospace,monospace; /* field type. The component reads these by name rather than hard-coding a size, so a surface can tune the field's voice without forking anchor-input. Gate: no var() fallbacks, so these MUST stay defined here. */ --field-size:14px; --field-weight:400; /* shape + motion */ --ease:cubic-bezier(.16,1,.3,1); /* soft-overshoot spring — the "beui" feel. The anchor-select dropdown chevron and the settings-gear cog SHARE this curve so the menus and the chrome speak one motion language (that is why it is a token, not a per-component literal). Gate: no var() fallback downstream, so it must stay defined here. */ --ease-spring:cubic-bezier(.5,1.55,.5,1); --r-sm:8px; --r:12px; --r-lg:16px; --r-pill:999px; /* component-specific motion tokens (like --field-size), so the workbench can tune these speeds without forking the component. Gate: no var() fallback, so they must stay defined here. --seg-wire-speed — the segmented control's outer-edge gold sweep (The Dashboard brand pill's conic sweep used to have its own --brand-sweep-speed; unified 2026-07-11 to share the logo halo's --halo-op / --halo-speed, so the house/dashboard sweep and the logo halo are one tunable and can't drift.) */ --seg-wire-speed:2s; /* Michael 2026-07-10 lock */ /* segmented wire colours — the sweep's base ring + travelling glint. Tokens so the workbench can preview bluer / gold+blue mixes without forking the component. Default = the app's gold-on-navy (navy edge, gold glint). */ --seg-wire-base:var(--border-strong); --seg-wire-glint:var(--accent-hi); /* action-button ring — the opt-in conic sweep on .acn-act--ring (off by default). base = the travelling band, glint = the bright tip. Default steel (the secondary button's own colour); the workbench previews gold/blue too. */ --act-ring-base:var(--neutral); --act-ring-glint:var(--neutral-hi); --act-ring-speed:3s; /* steel, 3s — Michael 2026-07-10 lock */ /* top-nav chrome motion (2026-07-11) — tunable in the workbench like the sweeps above. --brand-reveal-speed — anchor-brand: the Dashboard house pill's collapse→expand label reveal (icon-first, reveal-on-hover, the sidebar peek). --tool-cog-turn/-speed — anchor-tool-btn: the settings gear's cog turn on hover. Uses --ease-spring so it settles like the dropdown chevron. Gate: no var() fallbacks downstream, so these must stay defined here. */ --brand-reveal-speed:.42s; --tool-cog-turn:90deg; --tool-cog-speed:.5s; /* branded chrome-button hover glow (2026-07-11) — the DIALED-BACK answer to the card buttons' outer glow. Michael found the card family's `0 0 22px -6px @ 60%` bloom "very bright and big"; the gear + Export (--steel / --gold variants) wear this quieter glow instead. Workbench "Chrome hover glow" writes -b (blur) + -op (opacity); at 0 the hover is a clean fill/lift with no bloom. The card-action lock (session 3) is untouched. Gate: no var() fallbacks downstream. */ --tool-glow-b:9px; --tool-glow-s:-4px; --tool-glow-op:24%; /* logo halo (2026-07-11) — the glass Anchor mark's conic sweep, promoted to the anchor-halo component. Michael loves it but wanted calmer versions + a speed knob, so the noise lives here: --halo-op (INTENSITY, dialed back from the old full opacity), --halo-thick (ring px, thinner = calmer), --halo-speed (its OWN duration). Workbench "Logo halo" writes all three. No var() fallbacks. LOCKED 2026-07-11 at 70 / 2px / 3.5s — Michael's ideal live-wire feel (the same one he wants on the house/dashboard sweep; consolidation of the two is pending). */ --halo-op:.7; --halo-thick:2px; --halo-speed:3.5s; /* ============================================================ SCALES — Phase 1 of the type/weight/spacing plan (docs/plans/2026-07-09-type-and-spacing-scale-plan.md). ADDITIVE: defined here, but NOTHING consumes them yet. The components (Phase 2) and surfaces (Phase 3) migrate onto them later; until then every computed style stays byte-identical. Every step is drawn from a value already in use — this removes the in-between sizes, it does not invent a new look. ============================================================ */ /* Type — 8 steps (folds 12 sizes). Field text (--t-base 14) and the micro-label (--t-2xs 11) are LOCKED; the rest are the quantize targets. */ --t-2xs:11px; /* micro-labels (.lab) — LOCKED. absorbs 9.5, 10, 10.5, 11 */ --t-xs:11.5px; /* hints, meta. absorbs 11.5 (½px from --t-2xs — see note) */ --t-sm:12.5px; /* segmented, --sm buttons, tabs, .card__n. absorbs 12, 12.5 */ --t-md:13px; /* full-size buttons, $/% affixes. absorbs 13 */ --t-base:14px; /* field text — LOCKED. absorbs 14 */ --t-lg:15px; /* identity field (.acn-inp--lg). absorbs 15, 17 */ --t-xl:20px; /* money figure (.acn-inp--figure). absorbs 20 */ --t-2xl:24px; /* section title. absorbs 24 */ /* NOTE — --t-2xs (11) and --t-xs (11.5) are ½px apart: that's two names for one step, not a scale. Resolve in Phase 3 (labels are locked at 11, so the move is hints 11.5→11 + drop --t-xs). Kept both here so Phase 1 stays purely additive. OPEN (Phase 3) — two in-use values postdate this scale with no exact step: 16px spouse name (.col__h), LOCKED 2026-07-10 — do NOT auto-quantize to 15 22px combined-total figure (.totalsbar__midval) Give each a home when the surface migrates (add a step, or fold on purpose); both want Michael's eye. */ /* Weight — 3 steps. Named --fw-* not --w-*: the production spouse ramp already owns --w-100..700 (wife pink), so a weight token like --w-emph living next to the colour token --w-500 is a real footgun (font-weight:var(--w-300)?). The plan wrote --w-*; renamed here and in the plan doc. 700 survives only on the spouse column head; 300 is loaded from the font but consumed nowhere. */ --fw-body:400; /* field text, body copy */ --fw-quiet:500; /* segmented options, sidebar section labels */ --fw-emph:600; /* micro-labels, every button (all sizes), figures, section titles */ /* Spacing — 9 steps, 4px base with one 2px half-step (folds 19 values). This is the visible scale: type quantization is ~0.5px, spacing is not (13→12, 22→24 shift real rhythm). Expect to SEE Phase 3 — budget an eyeball. */ --s-1:2px; /* 2 */ --s-2:4px; /* 4, 5 */ --s-3:6px; /* 6, 7 */ --s-4:8px; /* 8, 9 */ --s-5:12px; /* 10, 11, 12, 13 */ --s-6:16px; /* 14, 15, 18 */ --s-7:20px; /* 20 */ --s-8:24px; /* 22, 24, 26 */ --s-9:32px; /* new headroom */ }