/* * developments/css/_tokens.css — canonical design tokens. * * Source of truth per HALIFAX-DEVELOPMENTS-HIG.md §3. * * D76.A Token consolidation. Before this file shipped, two parallel * token systems lived on the same page (dev.css `--text/--border/--accent-gold` * vs project-panel.css `--pp-ink/--pp-line/--pp-gold`). The Phase 1 * frontend-craftsman audit measured 109 vs 70 uses of competing inks * on the same surface — real, measurable drift. * * This file declares the canonical names. dev.css and the panel * CSS family alias their existing token names to point HERE, so * downstream selectors don't have to change in this commit — but * the underlying values converge. * * Loaded FIRST per developments/index.html so it precedes every * consumer. CSS cascade does the rest. */ :root { /* ─── Ink (text + foreground) — 4 steps ────────────────────────── */ --ink-1: #111111; /* primary text, headings */ --ink-2: #374151; /* secondary text, descriptions */ --ink-3: #67707c; /* muted text, hints, metadata — VL.P1: was #6b7280 (4.43:1 on the #f5f5f4 paper, just under AA); darkened to 4.6:1 while staying clearly muted vs --ink-2 (9.45). Fixes every --text-muted/--pp-ink-3/--dev-muted site product-wide. */ --ink-4: #9ca3af; /* faintest, decorative */ /* ─── Surfaces ──────────────────────────────────────────────────── */ --surface-1: #ffffff; /* primary surface */ --surface-2: #f5f5f4; /* card / panel backdrop */ --surface-3: #faf9f7; /* subtle elevated card */ --surface-sunken: #ebeae8; /* VL.P2.FU — recessed well / inset, one step darker than --surface-2: progress-bar tracks, skeleton shimmer bands, gradient depth-stops, active-tab. (Was --bg-subtle's value before the lift.) */ --chrome: #ffffff; /* ─── Lines ────────────────────────────────────────────────────── */ --line: #e7e5e4; --line-strong: #d1d5db; /* ─── Brand gold — ONE value ───────────────────────────────────── */ --gold: #d4a84b; --gold-dark: #b8923f; --gold-faint: rgba(212, 168, 75, 0.18); /* ─── Stage palette — semantic, parcel underlay + stage chips ──── */ /* VL.P2.P1 — CORRECTED to the LIVE/approved values (Spec v4 §2.8; DECISIONS.md D12; D96.S13 proposed-purple). This file's prior values (#9aa1a7 grey / #4a6fa5 / #6b8e4e sage / #9ca3af) were the STALE half of the dual-:root drift — dev.css's competing :root carried the correct values and won the cascade. With dev.css's :root now retired, _tokens.css must carry these or the live palette would regress. (Pure correctness fix — zero rendered change.) proposed = purple #7c6cae — map pin + legend identity. */ --stage-proposed: #7c6cae; --stage-approved: #2563eb; --stage-construction: #d4a84b; /* = --gold; one brand color */ --stage-completed: #16a34a; --stage-inactive: #d1d5db; /* ─── Status colors (for messages, banners — separate from chips) */ --status-success: #16a34a; --status-warning: #d97706; --status-error: #dc2626; /* ─── Semantic trend / delta colors (momentum, WoW, verified) ──── */ /* VL.P2.P3 — promoted from ad-hoc literals repeated across the faces (movement-brief/league WoW + dev.css .conf-verified). AA on the #f5f5f4 paper as TEXT: --positive is intentionally DARKER than --status-success (#16a34a) so small delta text stays legible (4.6:1 vs 3.x). --positive-fill is the bright completed-stage dot/ seg FILL (a fill, not text — the VL.P1 distinction). Zero visual change: each value equals the literal it replaces. */ --positive: #15803d; /* positive delta text (4.6:1) */ --negative: #c0392b; /* negative delta text (4.99:1) */ --positive-fill: #5fbf7f; /* bright completed dot/seg fill (not text) */ /* ─── Semantic chip backgrounds + foregrounds ─────────────────── */ --chip-ok-bg: rgba(107, 142, 78, 0.12); --chip-ok-fg: #4d6b3a; --chip-warn-bg: rgba(212, 168, 75, 0.16); --chip-warn-fg: #8a6a26; --chip-info-bg: rgba(74, 111, 165, 0.12); --chip-info-fg: #3a5a8a; --chip-muted-bg: rgba(107, 114, 128, 0.10); --chip-muted-fg: #4a5260; /* ─── Typography — families ────────────────────────────────────── */ --font-display: 'Outfit', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, monospace; /* ─── Type scale — 6 steps ──────────────────────────────────────── */ --text-caption: 11px; /* chip labels, metadata */ --text-sm: 12.5px; /* VL.P2.P6 — refined (was 13px legacy) */ --text-base: 13.5px; /* VL.P2.P6 — refined (was 15px legacy) */ --text-md: 15px; /* slightly larger body, lens headers */ --text-lg: 18px; /* section headers */ --text-display: 26px; /* project name only */ /* Legacy size aliases (older tokens; consumers gradually migrate). */ --text-xs: var(--text-caption); /* was 11 */ --text-xl: 24px; --text-2xl: 32px; --text-3xl: 48px; --text-hero: 72px; /* ─── Weights ──────────────────────────────────────────────────── */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ─── Spacing — 8px grid (HIG §3.4) ────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ─── Radius — 4 steps + pill (HIG §3.5) ───────────────────────── */ --radius-sm: 3px; /* VL.P2.P6 — refined (was 4px legacy) */ --radius-md: 6px; /* VL.P2.P6 — refined (was 8px legacy) */ --radius-lg: 12px; --radius-pill: 999px; /* ─── Motion (HIG §3.6) ────────────────────────────────────────── */ --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 280ms; --ease-out: cubic-bezier(0.2, 0, 0, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ─── Focus ring (HIG §3.7) ────────────────────────────────────── */ --focus-ring: 0 0 0 2px var(--gold-faint); --focus-offset: 2px; /* ─── Shadows ──────────────────────────────────────────────────── */ /* VL.P2.P6 — restored the D80.C7 (B2) layered umbra+penumbra, slate-tinted (15,23,42) so depth pairs with --ink-1 instead of flat pure-black — chrome catches up to the map's hover craft. */ --shadow-sm: 0 1px 2px rgba(15,23,42,0.06), 0 1px 1px rgba(15,23,42,0.03); --shadow-md: 0 1px 2px rgba(15,23,42,0.05), 0 6px 14px rgba(15,23,42,0.08); --shadow-lg: 0 4px 8px rgba(15,23,42,0.06), 0 16px 36px rgba(15,23,42,0.12); /* ════════════════════════════════════════════════════════════════ * DEVMAP-CHROME · S0 — warm-paper glass system (#1259) * * ONE material for every floating overlay (controls, legend, rail, HUD, * popups, panels). Additive — no token above is redefined. Owner decisions * (2026-06-16): light base, two-color (warm + gold), perf-safe glow, AA scrim, * hero-stat HUD. See docs/developments/design/CHROME-REFINEMENT-PLAN.md. * ═══════════════════════════════════════════════════════════════ */ /* Glass fills — resting (Z1), selected (Z2), and the dark variant over water */ --glass-fill: rgba(252, 251, 249, 0.82); /* owner nudge 2026-06-16: 0.74→0.82, more substance vs the light map */ --glass-fill-z2: rgba(253, 252, 250, 0.88); --glass-fill-text: rgba(252, 251, 249, 0.94); /* text-heavy zones — guarantees AA over any basemap */ --glass-fill-dark: rgba(36, 40, 46, 0.50); /* over water / dark map regions */ --glass-border: rgba(255, 255, 255, 0.60); --glass-border-dark: rgba(255, 255, 255, 0.25); --glass-blur: blur(22px) saturate(165%); --glass-blur-z2: blur(26px) saturate(170%); --glass-radius: 14px; /* standard cards */ --glass-radius-lg: 16px; /* large panels */ --glass-radius-chip: 11px; /* small chips / control buttons */ /* Inner top highlight that makes glass read as a lit edge */ --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.90); /* Dual-shadow ramp (decision #1: light base → figure-ground earned): tight CONTACT shadow + soft AMBIENT drop + the inner highlight. */ --shadow-glass: var(--glass-highlight), 0 1px 2px rgba(20, 16, 8, 0.18), 0 14px 40px rgba(20, 16, 8, 0.40); /* owner nudge: deeper ambient for figure-ground on the light base */ /* Z2 selected/focused — lifts (translateY ~-6px in usage) + gold-tinted glow */ --shadow-glass-z2: var(--glass-highlight), 0 2px 4px rgba(20, 16, 8, 0.18), 0 0 0 1px rgba(212, 168, 75, 0.50), 0 0 22px 2px rgba(212, 168, 75, 0.30), 0 18px 42px rgba(20, 16, 8, 0.34); /* Text scrim (decision #4) — drop under text laid over the map/imagery */ --scrim-text: linear-gradient(180deg, rgba(20, 16, 8, 0) 0%, rgba(20, 16, 8, 0.55) 100%); /* Gold = energy (decision #2): glow ramp + active fill gradient */ --gold-glow: rgba(212, 168, 75, 0.50); --gold-glow-strong: rgba(212, 168, 75, 0.60); --gold-active: linear-gradient(180deg, #e0b658, #d4a84b); /* Ink-on-glass ramp (warmer than --ink-* for the paper material) */ --glass-ink: #16130c; --glass-ink-2: #5c5648; --glass-ink-muted: #8c8472; --glass-ink-faint: #b0a890; /* Harmonized stage hues (decision #2) — desaturated/warmed ~15-20% for CHROME accents (swatches, 4px rails, dots, monogram tints). Live --stage-* unchanged (map keeps current encoding until the neutral-massing A/B). Construction = gold. */ --stage-proposed-warm: #8a7f9e; --stage-approved-warm: #5f7196; --stage-completed-warm: #5f8f68; /* ════════════════════════════════════════════════════════════════ * BACK-COMPAT ALIASES * * dev.css + project-panel.css already use --text/--border/ * --accent-gold/--pp-ink/--pp-line/--pp-gold/etc. These aliases * keep that working WITHOUT touching every selector — the * underlying values now converge to the canonical set. * * Subsequent polish cycles (D76.E chip system, etc.) migrate * consumers to the canonical names. Eventually these aliases * retire. * ═══════════════════════════════════════════════════════════════ */ /* dev.css names → canonical */ --text: var(--ink-1); --text-secondary: var(--ink-2); --text-muted: var(--ink-3); --text-faint: var(--ink-4); --bg-paper: var(--surface-3); /* VL.P2.P6 — refined #fafaf9 -> #faf9f7 */ --bg-card: var(--surface-2); /* VL.P2.FU — --bg-subtle LIFTED #ebeae8 -> #f5f5f4 (unified to --surface-2); the ~25 hover-wash / section-bg / chip-bg consumers only benefit (and the legend labels rise 4.17->4.6 AA). The ~8 surfaces that genuinely need a darker WELL (progress tracks, skeleton shimmer bands, gradient depth-stops, active-tab) were repointed to --bg-sunken so nothing loses separation. */ --bg-subtle: var(--surface-2); --bg-sunken: var(--surface-sunken); --border: var(--line); --border-strong: var(--line-strong); --accent-gold: var(--gold); --accent-gold-hover: var(--gold-dark); --accent-gold-faint: var(--gold-faint); /* dev.css velocity-bar aliases (§5; .bar-fill.staff/.customer) → canonical */ --staff-bar: var(--status-success); /* was #16a34a */ --customer-bar: var(--gold); /* was #d4a84b */ /* --radius-sm, --radius-md, --radius-lg already canonical above */ /* project-panel.css --pp-* names → canonical */ --pp-bg: var(--surface-1); --pp-ink: var(--ink-1); /* was #1a1a1a → #111 */ --pp-ink-2: var(--ink-2); /* was #4a4a4a → #374151 */ --pp-ink-3: var(--ink-3); /* was #767676 → #6b7280 */ --pp-line: var(--line); /* was #e2e0db → #e7e5e4 */ --pp-line-strong: var(--line-strong); /* was #cfcdc6 → #d1d5db */ --pp-gold: var(--gold); --pp-gold-dark: var(--gold-dark); --pp-major: var(--ink-1); --pp-minor: var(--ink-3); --pp-flash: #fff4c8; /* not in canonical; one-off */ --pp-uncited: #c84a2a; /* not in canonical; one-off */ --pp-ok: var(--status-success); --pp-warn: var(--status-warning); --pp-muted-bg: var(--surface-2); --pp-radius: var(--radius-md); /* was 10px → 6px (HIG cap) */ --pp-radius-sm: var(--radius-md); /* was 6px → 6px */ --pp-pad: var(--space-4); /* was 16px → 16px */ --pp-pad-sm: var(--space-3); /* was 10px → 12px */ /* ════════════════════════════════════════════════════════════════ * RV·V.6 — Option C admin console (dark shell chrome) * * The 5-tab observability console + always-on spine use a DARK theme * (the owner-band verdict semantics + the freshness-stamp pill already * live in this charcoal language). Values are lifted VERBATIM from * owner-band.css so that surface is unchanged; promoted to tokens here * so the shell chrome (tabs + spine) shares ONE source. ADD-only — no * existing token is redefined. Scale/motion/family tokens above are * theme-agnostic and reused directly by admin-v6.css. * ═══════════════════════════════════════════════════════════════ */ --av-surface: #232323; /* verdict bar / spine top */ --av-surface-2: #1b1b1b; /* spine gradient bottom / tab strip */ --av-surface-3: #2d2d2d; /* raised cell / chip */ --av-line: #333333; /* chrome border */ --av-line-soft: #262626; /* row divider */ --av-ink: #ededed; /* primary text */ --av-ink-2: #9aa0a6; /* secondary text */ --av-ink-3: #80868b; /* provenance / meta */ --av-ink-faint: #6e7681; /* faintest / disabled */ --av-ok: #3fb950; --av-ok-bg: #173d23; --av-ok-fg: #6ee787; --av-warn: #d4a84b; /* = --gold */ --av-warn-bg: #3a2f14; --av-warn-fg: #e5c57a; --av-bad: #f85149; --av-bad-bg: #3a1f1f; --av-bad-fg: #ff9a92; --av-info: #6ea8fe; --av-gold-light: #e5c57a; /* = marketing --gold-400; warn/decide accent */ } /* project-panel.css had a media query override for mobile padding; preserve the spirit with canonical tokens. */ @media (max-width: 540px) { :root { --pp-pad: var(--space-3); /* 12px on mobile */ --pp-pad-sm: var(--space-2); /* 8px on mobile */ } } /* ════════════════════════════════════════════════════════════════ * D76.F — Universal focus ring (HIG §3.7). * * A data product gets keyboard-navigated. The Phase 1 craftsman * audit found exactly ONE :focus-visible rule in all the CSS * (only on .cite--has-source). This makes every interactive * primitive keyboard-reachable with a visible ring, using the * canonical --focus-ring token. * * Selectors scoped to the developments app (.dev-shell, .panel, * etc.) so this doesn't leak to the marketing-site pages that * share some links. Specific :focus-visible rules elsewhere * (cite-pills, lens-id__link, etc.) override this default via * higher specificity — intentional, those have tailored treatments. * ════════════════════════════════════════════════════════════════ */ .dev-shell button:focus-visible, .dev-shell a:focus-visible, .dev-shell input:focus-visible, .dev-shell select:focus-visible, .dev-shell textarea:focus-visible, .dev-shell [role="tab"]:focus-visible, .dev-shell [role="button"]:focus-visible, .dev-shell [tabindex]:not([tabindex="-1"]):focus-visible, .project-panel button:focus-visible, .project-panel a:focus-visible, .project-panel input:focus-visible, .project-panel [role="tab"]:focus-visible, .project-panel [tabindex]:not([tabindex="-1"]):focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); /* Avoid double-rendering with custom focus shadows where present */ box-shadow: none; }