/* ==========================================================================
VALULY "LEDGER" DESIGN TOKENS — v1.0 (ships as tokens.css)
--------------------------------------------------------------------------
Dark-first. Semantic tokens live in :root (dark values); the single
[data-theme="light"] block overrides everything that flips. Components
consume semantic tokens only — never raw hex.
Contrast: every text/background pair verified with WCAG relative-luminance
math. Floors: body text >= 4.5:1, large text >= 3:1, non-text UI >= 3:1.
Ratios are noted inline on the tokens they belong to.
Load fonts (in , before this file):
========================================================================== */
:root {
color-scheme: dark;
/* ------------------------------------------------------------------
PRIMITIVES — theme-invariant brand + fixed-surface hues.
(Semantic tokens below pick from these; light theme re-picks.)
------------------------------------------------------------------ */
--mint-300: #45EBB4; /* hover step of brand mint */
--mint-400: #2CE2A2; /* brand mint — from the logo check */
--mint-500: #24CE91; /* pressed step */
--emerald-600: #0B7E58; /* brand emerald — from the logo ".ai"; 5.07:1 under white text */
--emerald-700: #0A7350;
--emerald-800: #08644A;
--cyan-300: #3CDCF2; /* cyan as text on dark (11.28:1 raised) */
--cyan-400: #2BC8E8; /* cyan fills / band-low */
--cyan-700: #0A7490; /* cyan as text on light (5.37:1 white) */
--ink-900: #052B1E; /* text on mint fills (9.12:1) */
/* ------------------------------------------------------------------
COLOR / BACKGROUND LADDER
------------------------------------------------------------------ */
--color-bg-page: #070B12; /* app + marketing canvas */
--color-bg-raised: #0D131C; /* cards, tiles, table shells */
--color-bg-overlay: #131B27; /* modals, dropdowns, popovers */
--color-bg-inset: #0A0F17; /* inputs, wells, methodology strip */
--color-bg-highlight: #16202E; /* hover rows, active items, skeletons */
/* ------------------------------------------------------------------
COLOR / BORDERS (alpha over the ladder so they sit on any surface)
------------------------------------------------------------------ */
--color-border-subtle: rgba(160, 178, 196, 0.10); /* structure, row hairlines */
--color-border-default: rgba(160, 178, 196, 0.18); /* interactive rest, dropdowns */
--color-border-strong: rgba(160, 178, 196, 0.55); /* form-control boundaries — composites #5E6A78 on raised = 3.38:1 (>=3:1 non-text) */
--color-border-brand: rgba(44, 226, 162, 0.45); /* selected / active accents */
/* ------------------------------------------------------------------
COLOR / TEXT (ratios vs raised #0D131C unless noted)
------------------------------------------------------------------ */
--color-text-primary: #EAF1F7; /* 16.35:1 */
--color-text-secondary: #A9B6C4; /* 9.03:1 */
--color-text-tertiary: #7E8CA0; /* 5.45:1 — floor for readable text; also placeholders */
--color-text-disabled: #57636F; /* 3.03:1 — inert controls only (WCAG-exempt state) */
--color-text-inverse: #0C141D; /* text on light/inverted fills */
/* ------------------------------------------------------------------
COLOR / BRAND (mint leads in dark; emerald leads in light)
------------------------------------------------------------------ */
--color-brand: var(--mint-400); /* fills, primary buttons, band-high */
--color-brand-hover: var(--mint-300);
--color-brand-active: var(--mint-500);
--color-brand-text: #3BE8AC; /* mint as text/icon: 11.82:1 raised */
--color-on-brand: var(--ink-900); /* label on brand fills: 9.12:1 */
--color-accent: var(--cyan-400); /* data accent fills */
--color-accent-text: var(--cyan-300); /* links on dark: 11.28:1 raised */
--color-brand-tint: rgba(44, 226, 162, 0.10); /* selected rows, active nav pill (brand-text on it: 10.73:1) */
--color-accent-tint: rgba(43, 200, 232, 0.10);
/* ------------------------------------------------------------------
COLOR / SEMANTIC (fill = shapes/charts; text = copy; tint = 14% bg;
border = 35% alpha. Text ratios vs raised.)
------------------------------------------------------------------ */
--color-success: var(--mint-400);
--color-success-text: #3BE8AC; /* 11.82:1 */
--color-success-tint: rgba(44, 226, 162, 0.14);
--color-success-border: rgba(44, 226, 162, 0.35);
--color-warning: #F2C14E;
--color-warning-text: #F5C64F; /* 11.60:1 */
--color-warning-tint: rgba(242, 193, 78, 0.14);
--color-warning-border: rgba(242, 193, 78, 0.35);
--color-danger: #F4536E;
--color-danger-text: #FF8296; /* 7.88:1 */
--color-danger-solid: #CD314A; /* button fill; white on it 5.08:1 */
--color-danger-tint: rgba(244, 83, 110, 0.14);
--color-danger-border: rgba(244, 83, 110, 0.35);
--color-info: #4C9FFF;
--color-info-text: #6FB5FF; /* 8.63:1 */
--color-info-tint: rgba(76, 159, 255, 0.14);
--color-info-border: rgba(76, 159, 255, 0.35);
/* ------------------------------------------------------------------
COLOR / INTERACTIVE
------------------------------------------------------------------ */
--color-focus: var(--cyan-300); /* 11.93:1 vs page (needs >=3:1) */
--focus-ring: 0 0 0 2px var(--color-bg-page), 0 0 0 4px var(--color-focus);
--color-scrim: rgba(4, 7, 11, 0.65);
--color-link: var(--color-accent-text);
--color-link-hover: var(--color-brand-text);
/* ------------------------------------------------------------------
COLOR / DATA-VIZ — grade ramp A→F
(fill = solid marks; text = chip label on its tint over raised —
ratios: A 9.34, B 8.58, C 9.40, D 7.71, F 6.93)
------------------------------------------------------------------ */
--grade-a-fill: #2CE2A2; --grade-a-text: #52EBB4; --grade-a-tint: rgba(44, 226, 162, 0.14);
--grade-b-fill: #2BC8E8; --grade-b-text: #55D7F2; --grade-b-tint: rgba(43, 200, 232, 0.14);
--grade-c-fill: #F2C14E; --grade-c-text: #F5CE6A; --grade-c-tint: rgba(242, 193, 78, 0.14);
--grade-d-fill: #F58E4C; --grade-d-text: #F9A66E; --grade-d-tint: rgba(245, 142, 76, 0.14);
--grade-f-fill: #F4536E; --grade-f-text: #FF8598; --grade-f-tint: rgba(244, 83, 110, 0.14);
--grade-border-alpha: 0.35; /* chip border = fill at this alpha */
/* ------------------------------------------------------------------
COLOR / DATA-VIZ — valuation band (low→mid→high) + chart series
(band stops 9.34–11.75:1 vs raised; series 6.70–11.75:1)
------------------------------------------------------------------ */
--color-band-low: #2BC8E8;
--color-band-mid: #2EDCC0;
--color-band-high: #34E8A6;
--gradient-band: linear-gradient(90deg, var(--color-band-low) 0%, var(--color-band-mid) 50%, var(--color-band-high) 100%);
--color-band-track: var(--color-bg-inset);
--color-band-marker: var(--color-text-primary);
--chart-1: #34E8A6; /* mint */
--chart-2: #38CDF2; /* cyan */
--chart-3: #A08FFF; /* violet */
--chart-4: #F2C14E; /* amber */
--chart-5: #F07ECD; /* magenta */
--chart-6: #8B9DB0; /* slate */
--chart-grid: var(--color-border-subtle);
--chart-axis-text: var(--color-text-tertiary);
--chart-area-alpha: 0.12; /* area fills under lines */
/* ------------------------------------------------------------------
TERMINAL + CODE — dark in BOTH themes (do not override in light)
------------------------------------------------------------------ */
--terminal-bg: #05080C;
--terminal-fg: #B7E8D6; /* 14.84:1 on terminal-bg */
--terminal-dim: #7E8CA0; /* 6.06:1 */
--terminal-prompt: #3BE8AC; /* 12.73:1 */
--code-bg: #05080C;
--code-fg: #E2E8F0;
--code-dim: #94A3B8;
--code-accent: #22D3EE;
--code-accent-2: #3BE8AC;
/* ------------------------------------------------------------------
TOASTS — opaque + theme-invariant (self-contained contrast)
------------------------------------------------------------------ */
--toast-success-bg: #0B7E58; --toast-success-fg: #FFFFFF; /* 5.07:1 */
--toast-warning-bg: #F5C64F; --toast-warning-fg: #231A04; /* 10.71:1 */
--toast-danger-bg: #C42B47; --toast-danger-fg: #FFFFFF; /* 5.55:1 */
--toast-info-bg: #1D5FBF; --toast-info-fg: #FFFFFF; /* 6.10:1 */
/* ------------------------------------------------------------------
TYPOGRAPHY / families + weights
------------------------------------------------------------------ */
--font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
--font-sans: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Digit alignment for sans contexts (mono is inherently tabular). Apply
to any Inter run where digits column-align: font-variant-numeric on
.tnum { font-variant-numeric: tabular-nums; } */
/* ------------------------------------------------------------------
TYPOGRAPHY / scale — size + line-height pairs (px @ 16px root).
Weight + tracking per style noted; shared tracking tokens below.
------------------------------------------------------------------ */
--text-display-xl: 4rem; --leading-display-xl: 1.04; /* SG 700, -0.025em — marketing hero */
--text-display-lg: 3rem; --leading-display-lg: 1.08; /* SG 700, -0.02em */
--text-display-md: 2.25rem; --leading-display-md: 1.15; /* SG 600, -0.015em */
--text-heading-xl: 1.75rem; --leading-heading-xl: 1.25; /* Inter 600, -0.02em — app titles */
--text-heading-lg: 1.375rem; --leading-heading-lg: 1.3; /* Inter 600, -0.015em */
--text-heading-md: 1.0625rem; --leading-heading-md: 1.4; /* Inter 600, -0.008em */
--text-heading-sm: 0.9375rem; --leading-heading-sm: 1.45; /* Inter 600, -0.005em */
--text-body-lg: 1.125rem; --leading-body-lg: 1.6; /* Inter 400 — marketing ledes */
--text-body: 0.9375rem; --leading-body: 1.6; /* Inter 400 — app default (15px) */
--text-body-sm: 0.8125rem; --leading-body-sm: 1.55; /* Inter 400 */
--text-caption: 0.75rem; --leading-caption: 1.45; /* Inter 400, +0.005em */
--text-overline: 0.6875rem; --leading-overline: 1.2; /* Inter/JBM 600, +0.08em, uppercase */
--text-data-xl: 2rem; --leading-data-xl: 1.1; /* JBM 600, -0.01em — KPI values */
--text-data-lg: 1.5rem; --leading-data-lg: 1.2; /* JBM 600, -0.005em */
--text-data-md: 1.125rem; --leading-data-md: 1.3; /* JBM 500 */
--text-data: 0.9375rem; --leading-data: 1.5; /* JBM 500 — table numerics, domains */
--text-data-sm: 0.8125rem; --leading-data-sm: 1.5; /* JBM 500 — cell meta, citations */
--text-code: 0.8125rem; --leading-code: 1.7; /* JBM 400 — code blocks, terminal */
--tracking-display: -0.02em;
--tracking-heading: -0.012em;
--tracking-overline: 0.08em;
/* ------------------------------------------------------------------
SPACING — 4px base grid
------------------------------------------------------------------ */
--space-05: 0.125rem; /* 2px — icon nudges */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px — chip gaps, inline gaps */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px — cell padding, card gaps */
--space-5: 1.25rem; /* 20px — tile padding */
--space-6: 1.5rem; /* 24px — card padding */
--space-8: 2rem; /* 32px — app page gutter */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px — mobile section rhythm */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px — marketing section rhythm */
--space-32: 8rem; /* 128px — hero top / hallmark sections */
--container-marketing: 75rem; /* 1200px */
--container-app: 82.5rem; /* 1320px */
--container-prose: 45rem; /* 720px */
/* ------------------------------------------------------------------
RADIUS
------------------------------------------------------------------ */
--radius-xs: 4px; /* checkboxes, kbd hints, inline code */
--radius-sm: 6px; /* badges, grade chips, tooltips */
--radius-md: 8px; /* buttons, inputs, code blocks */
--radius-lg: 12px; /* cards, tables, tiles, dropdowns, toasts */
--radius-xl: 16px; /* modals, hero panels */
--radius-2xl: 20px; /* marketing feature slabs */
--radius-full: 9999px; /* pills, band tracks, avatars */
/* ------------------------------------------------------------------
ELEVATION — dark = border + edge-light + faint shadow + scoped glow
------------------------------------------------------------------ */
--shadow-edge: inset 0 1px 0 rgba(233, 241, 247, 0.05); /* machined top edge on raised surfaces */
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
--shadow-2: 0 2px 8px -2px rgba(0, 0, 0, 0.55), 0 8px 24px -8px rgba(0, 0, 0, 0.45);
--shadow-3: 0 4px 16px -4px rgba(0, 0, 0, 0.5), 0 16px 48px -12px rgba(0, 0, 0, 0.6);
--shadow-4: 0 8px 24px -6px rgba(0, 0, 0, 0.55), 0 24px 64px -16px rgba(0, 0, 0, 0.65);
--glow-brand: 0 0 0 1px rgba(44, 226, 162, 0.25), 0 8px 40px -8px rgba(44, 226, 162, 0.28);
--glow-accent: 0 0 0 1px rgba(43, 200, 232, 0.25), 0 8px 40px -8px rgba(43, 200, 232, 0.28);
/* Glass — chrome only (nav, scrims, sticky table headers) */
--glass-nav-bg: rgba(7, 11, 18, 0.78);
--glass-blur: blur(16px) saturate(1.4);
--glass-scrim-blur: blur(8px);
/* ------------------------------------------------------------------
HERO BACKGROUND — CSS-only layers (glows + masked blueprint grid)
------------------------------------------------------------------ */
--hero-glow:
radial-gradient(1100px 560px at 72% -8%, rgba(43, 200, 232, 0.10), transparent 62%),
radial-gradient(900px 520px at 14% 18%, rgba(44, 226, 162, 0.09), transparent 58%);
--hero-grid-color: rgba(160, 178, 196, 0.05);
--hero-grid:
linear-gradient(var(--hero-grid-color) 1px, transparent 1px),
linear-gradient(90deg, var(--hero-grid-color) 1px, transparent 1px);
--hero-grid-size: 64px 64px;
--hero-grid-mask: radial-gradient(ellipse 90% 65% at 50% 0%, #000 25%, transparent 78%);
--hero-horizon: linear-gradient(90deg, transparent, rgba(43, 200, 232, 0.35) 30%, rgba(52, 232, 166, 0.35) 70%, transparent);
/* ------------------------------------------------------------------
MOTION
------------------------------------------------------------------ */
--motion-instant: 100ms; /* color/opacity hovers */
--motion-fast: 160ms; /* buttons, chips, exits */
--motion-base: 220ms; /* dropdowns, tooltips, tab indicator */
--motion-slow: 320ms; /* modals, sheets, toasts */
--motion-deliberate: 600ms; /* one-shot band/progress fills */
--motion-draw: 800ms; /* one-shot SVG chart line draw */
--ease-out: cubic-bezier(0.2, 0, 0, 1); /* default */
--ease-in: cubic-bezier(0.5, 0, 0.7, 0.2); /* exits only */
--ease-spring: cubic-bezier(0.16, 1, 0.3, 1); /* entrances, band fill */
/* ------------------------------------------------------------------
COMPONENT DIMENSIONS
------------------------------------------------------------------ */
--control-h-sm: 32px;
--control-h-md: 40px;
--control-h-lg: 48px;
--control-h-hero: 56px; /* hero appraise search */
--nav-h: 64px;
--row-h-compact: 40px;
--row-h-standard: 48px;
--row-h-relaxed: 56px;
--band-h-sm: 4px; /* table-cell band */
--band-h-md: 8px; /* card / KPI band */
--band-h-lg: 14px; /* report hero band */
/* ------------------------------------------------------------------
Z-INDEX
------------------------------------------------------------------ */
--z-sticky: 40; /* sticky table headers */
--z-nav: 100;
--z-dropdown: 400;
--z-modal: 800;
--z-toast: 900;
--z-tooltip: 1000;
}
/* ==========================================================================
LIGHT THEME — first-class. Mint leads dark; emerald leads light
(mint on light surfaces is 1.58:1 — decoration only, never meaning).
Terminal, code, and toast tokens intentionally NOT overridden.
========================================================================== */
[data-theme="light"] {
color-scheme: light;
/* Background ladder */
--color-bg-page: #F6F8FA;
--color-bg-raised: #FFFFFF;
--color-bg-overlay: #FFFFFF; /* differentiates via shadow ladder */
--color-bg-inset: #EEF2F5;
--color-bg-highlight: #E9EFF3;
/* Borders */
--color-border-subtle: rgba(12, 20, 29, 0.07);
--color-border-default: rgba(12, 20, 29, 0.13);
--color-border-strong: rgba(12, 20, 29, 0.50); /* #868A8E on white = 3.48:1 */
--color-border-brand: rgba(11, 126, 88, 0.45);
/* Text (ratios vs white unless noted) */
--color-text-primary: #0C141D; /* 17.40:1 on page */
--color-text-secondary: #49596B; /* 7.18:1 */
--color-text-tertiary: #5A6D80; /* 5.34:1 (4.74:1 on inset — AA) */
--color-text-disabled: #9AA8B5; /* 2.43:1 — inert only (exempt) */
--color-text-inverse: #EAF1F7;
/* Brand — emerald-forward */
--color-brand: var(--emerald-600); /* white label on it: 5.07:1 */
--color-brand-hover: var(--emerald-700);
--color-brand-active: var(--emerald-800);
--color-brand-text: var(--emerald-600); /* 5.07:1 as text on white */
--color-on-brand: #FFFFFF;
--color-accent: #0891B2;
--color-accent-text: var(--cyan-700); /* 5.37:1 on white */
--color-brand-tint: rgba(15, 157, 107, 0.10);
--color-accent-tint: rgba(8, 145, 178, 0.10);
/* Semantic (text ratios vs white) */
--color-success: #0F9D6B;
--color-success-text: var(--emerald-600); /* 5.07:1 */
--color-success-tint: rgba(15, 157, 107, 0.12);
--color-success-border: rgba(15, 157, 107, 0.35);
--color-warning: #D99E00;
--color-warning-text: #8F5A00; /* 5.78:1 */
--color-warning-tint: rgba(217, 158, 0, 0.12);
--color-warning-border: rgba(217, 158, 0, 0.35);
--color-danger: #E23A57;
--color-danger-text: #C42B47; /* 5.55:1 */
--color-danger-solid: #C42B47; /* white on it: 5.55:1 */
--color-danger-tint: rgba(226, 58, 87, 0.12);
--color-danger-border: rgba(226, 58, 87, 0.35);
--color-info: #3B82F6;
--color-info-text: #1E64D0; /* 5.54:1 */
--color-info-tint: rgba(59, 130, 246, 0.12);
--color-info-border: rgba(59, 130, 246, 0.35);
/* Interactive */
--color-focus: var(--cyan-700); /* 5.37:1 vs white (needs >=3:1) */
--focus-ring: 0 0 0 2px var(--color-bg-page), 0 0 0 4px var(--color-focus);
--color-scrim: rgba(12, 20, 29, 0.40);
/* Grade ramp (labels on 12% tints over white: 6.08–6.45:1) */
--grade-a-fill: #0F9D6B; --grade-a-text: #086648; --grade-a-tint: rgba(15, 157, 107, 0.12);
--grade-b-fill: #0891B2; --grade-b-text: #075D74; --grade-b-tint: rgba(8, 145, 178, 0.12);
--grade-c-fill: #D99E00; --grade-c-text: #775500; --grade-c-tint: rgba(217, 158, 0, 0.12);
--grade-d-fill: #E06A1F; --grade-d-text: #8F3E0D; --grade-d-tint: rgba(224, 106, 31, 0.12);
--grade-f-fill: #E23A57; --grade-f-text: #A81F38; --grade-f-tint: rgba(226, 58, 87, 0.12);
/* Band + charts (band stops 3.47–3.74:1 vs white; series 3.68–5.18:1) */
--color-band-low: #0891B2;
--color-band-mid: #0D9488;
--color-band-high: #0F9D6B;
--gradient-band: linear-gradient(90deg, var(--color-band-low) 0%, var(--color-band-mid) 50%, var(--color-band-high) 100%);
--color-band-track: var(--color-bg-inset);
--color-band-marker: var(--color-text-primary);
--chart-1: #0F9D6B;
--chart-2: #0891B2;
--chart-3: #6D5BD0;
--chart-4: #B87700;
--chart-5: #C2418F;
--chart-6: #64788C;
--chart-area-alpha: 0.10;
/* Elevation — true shadow ladder (Stripe-style two-layer) */
--shadow-edge: inset 0 1px 0 rgba(255, 255, 255, 0.8);
--shadow-1: 0 1px 2px rgba(12, 20, 29, 0.06), 0 1px 3px rgba(12, 20, 29, 0.04);
--shadow-2: 0 4px 12px -2px rgba(12, 20, 29, 0.10), 0 2px 6px -2px rgba(12, 20, 29, 0.06);
--shadow-3: 0 16px 40px -12px rgba(12, 20, 29, 0.18), 0 4px 12px -4px rgba(12, 20, 29, 0.08);
--shadow-4: 0 24px 64px -16px rgba(12, 20, 29, 0.26), 0 8px 24px -8px rgba(12, 20, 29, 0.10);
--glow-brand: 0 0 0 1px rgba(11, 126, 88, 0.30), 0 8px 32px -8px rgba(11, 126, 88, 0.25);
--glow-accent: 0 0 0 1px rgba(8, 145, 178, 0.30), 0 8px 32px -8px rgba(8, 145, 178, 0.25);
--glass-nav-bg: rgba(255, 255, 255, 0.82);
/* Hero layers */
--hero-glow:
radial-gradient(1100px 560px at 72% -8%, rgba(8, 145, 178, 0.06), transparent 62%),
radial-gradient(900px 520px at 14% 18%, rgba(15, 157, 107, 0.05), transparent 58%);
--hero-grid-color: rgba(12, 20, 29, 0.045);
--hero-horizon: linear-gradient(90deg, transparent, rgba(8, 145, 178, 0.30) 30%, rgba(15, 157, 107, 0.30) 70%, transparent);
}
/* ==========================================================================
REDUCED MOTION — collapse durations, kill loops; content renders in
final state. Crossfades survive as near-instant opacity changes.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
:root {
--motion-instant: 1ms;
--motion-fast: 1ms;
--motion-base: 1ms;
--motion-slow: 1ms;
--motion-deliberate: 1ms;
--motion-draw: 1ms;
}
*, *::before, *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
scroll-behavior: auto !important;
}
}
/* ==========================================================================
GLOBAL BASELINE (minimal — everything else lives in component CSS)
========================================================================== */
:where(html) {
font-family: var(--font-sans);
background: var(--color-bg-page);
color: var(--color-text-primary);
}
:where(:focus-visible) {
outline: none;
box-shadow: var(--focus-ring);
border-radius: var(--radius-xs);
}
/* Fallback for non-box-shadow contexts (e.g. plain links in prose): */
:where(a, summary):focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
box-shadow: none;
}
::selection {
background: rgba(44, 226, 162, 0.28);
color: var(--color-text-primary);
}
[data-theme="light"] ::selection {
background: rgba(15, 157, 107, 0.22);
}
.tnum { font-variant-numeric: tabular-nums; }
/* ==========================================================================
THE LEGACY BRIDGE IS GONE — phase 8.
It re-pointed 19 old index.css token names at Ledger values so that screens
not yet ported rendered coherently on their old layouts. Its own note set the
test for removing it: "a token still referenced at that point is a screen
that was never actually migrated." Every one of them was still referenced —
544 consumptions across index.html, app.js and index.css, 241 of them
--text-muted alone — so those screens had been re-pointed THROUGH the bridge
rather than migrated to Ledger names.
They are migrated now. Each var(--old) was rewritten to the exact target this
block pointed it at, which is why nothing moved: because the bridge loaded
AFTER index.css, its target was already what every one of those names
resolved to. The substitution is a rename, not a restyle.
Verified by computed-style fingerprint rather than by reading the diff —
28,832 declarations across 16 routes in both themes, identical before and
after.
The 38 matching declarations in index.css went with it, across its dark and
light blocks. index.css keeps its screen rules; it is the token block that is
retired.
========================================================================== */