/* ═══════════════════════════════════════════════════════════════════════ tokens.css — EigenFlow design system · single source of truth ──────────────────────────────────────────────────────────────────────── Institutional finance SaaS aesthetic (Carta / Addepar / Linear / Stripe Dashboard / a clean Bloomberg): calm, trustworthy, low-noise, data-first, restrained. Every page links this file LAST in so it governs the shared variables; theme + dark-mode rules ([data-theme], [data-color-mode]) keep higher specificity and still win, so theming is preserved. This mirrors the (already strong) dashboard token set so the dashboards do not shift, and propagates the SAME system to the auth / onboarding / admin pages that previously used serif display fonts and their own palettes. Typography stance: • ONE UI voice — Inter. Body, labels, eyebrows, table headers and numbers are all Inter (with tabular figures for numerics). Monospace is NOT a UI label face; reserved for genuine code/JSON via --code. • No serif anywhere (Cormorant Garamond / Source Serif 4 retired) — a serious financial product speaks in ONE voice across every page. ═══════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* ── Neutrals (cool, low-noise) ──────────────────────────────────────── */ --bg:#fafafa; --bg2:#f5f5f5; --bg3:#ededec; --surface:#ffffff; --surface2:#fafafa; --line:#ececea; --line2:#dcdbd8; --t1:#0d0d0d; --t2:#3f3f3f; --t3:#737373; --t4:#a3a3a3; /* ── Brand accent (Macaron blue-grey · default theme; [data-theme] wins) ─ */ --sage:#a8c4d4; --sage2:#5a7d92; --sage-dim:rgba(168,196,212,.18); --sage-glow:rgba(168,196,212,.08); --plum:var(--sage2); --plum2:#4a6a7d; --plum-glow:var(--sage-glow); --rose:#a3a3a3; --rose-dim:rgba(163,163,163,.10); --clay:#525252; --clay-dim:rgba(82,82,82,.10); --fog:#737373; --fog-dim:rgba(115,115,115,.10); --stone:#a3a3a3; --stone-dim:rgba(163,163,163,.10); --gold:#a8c4d4; --gold-dim:rgba(168,196,212,.18); /* ── Status (muted, never neon) ──────────────────────────────────────── */ --ok:#5c8a6e; --ok-dim:rgba(92,138,110,.10); --warn:#a08750; --warn-dim:rgba(160,135,80,.10); --err:#a85a5a; --err-dim:rgba(168,90,90,.10); /* ── Type families — two UI roles + a code role ────────────────────────── --display : large headers, panel titles, KPIs (tight optical) --sans : body, UI labels, eyebrows, table headers, numbers --code : genuine code / JSON / raw IDs ONLY — never UI labels Tier-1 fix: monospace is reserved for ACTUAL code. Setting table headers, eyebrows and micro-labels in JetBrains Mono read as a cheap "data terminal", not an institutional product. Every page already declared --mono as the Inter stack; this file used to override it back to JetBrains Mono — which is exactly what reintroduced the noise. --mono now resolves to --sans so the override agrees with the pages. Real code keeps a monospace face via --code (see base.css). */ --display:'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --code:'JetBrains Mono','SF Mono',ui-monospace,Menlo,Consolas,monospace; --mono:var(--sans); /* UI alias — was JetBrains Mono; now Inter (see note) */ --mono-code:var(--code); /* true monospace for §-citation chips (.ef-cite) */ --serif:var(--sans); /* legacy alias — serif retired */ /* ── Type scale (8 steps, semantic) ──────────────────────────────────── */ --fs-eyebrow:10.5px; --fs-caption:11.5px; --fs-meta:12.5px; --fs-body:13.5px; --fs-body-lg:15px; --fs-h3:18px; --fs-h2:22px; --fs-h1:28px; /* Plain numeric scale (matches the brief's --fs-11 … --fs-44) */ --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px; --fs-20:20px; --fs-24:24px; --fs-32:32px; --fs-44:44px; /* ── Display scale (KPI / hero numbers) ──────────────────────────────── */ --fs-display-sm:24px; --fs-display-md:32px; --fs-display-lg:44px; --ls-display:-0.02em; /* ── Weights (3 only) + letter-spacing ───────────────────────────────── */ --fw-reg:400; --fw-med:500; --fw-semi:600; --ls-tight:-0.01em; --ls-normal:0; --ls-wide:0.06em; --ls-eyebrow:0.06em; /* ── Spacing (4px base — use these, not arbitrary px) ────────────────── */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:48px; /* ── Radius ──────────────────────────────────────────────────────────── */ --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:12px; --r-pill:999px; /* ── Elevation (institutional = restrained) ──────────────────────────── */ --e1:0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.03); --e2:0 4px 12px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04); --e3:0 12px 32px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.05); --ring:0 0 0 3px var(--sage-glow); /* ── Layout constants (page-level rhythm) ────────────────────────────── */ --topbar-h:56px; --sidebar-w:248px; /* ───────────────────────────────────────────────────────────────────── Semantic aliases — the brief's naming maps onto the canonical tokens so either vocabulary resolves to one system. ───────────────────────────────────────────────────────────────────── */ --text-1:var(--t1); --text-2:var(--t2); --text-3:var(--t3); --text-4:var(--t4); --surface-2:var(--surface2); --line-strong:var(--line2); --accent:var(--sage2); --accent-soft:var(--sage-dim); --success:var(--ok); --warning:var(--warn); --danger:var(--err); --font-sans:var(--sans); --font-display:var(--display); --font-mono:var(--mono); --font-code:var(--code); /* genuine code/JSON only — see base.css */ --shadow-card:var(--e1); --shadow-popover:var(--e2); --shadow-modal:var(--e3); }