90 lines
3 KiB
CSS
90 lines
3 KiB
CSS
/*
|
|
* GenDesign — global CSS design tokens (UI Brief May 17)
|
|
* All CSS vars used across site-finder and analytics components.
|
|
* Spacing scale: 4/8/12/16/24/32px only.
|
|
* Tabular-nums applied globally for numeric readability.
|
|
*/
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
/* ── Surface ─────────────────────────────────────────────────────────── */
|
|
--bg-app: #f6f7f9;
|
|
--bg-card: #ffffff;
|
|
--bg-card-alt: #fafbfc;
|
|
--bg-headline: #0f172a; /* slate-900 — dark verdict bar */
|
|
|
|
/* ── Borders ─────────────────────────────────────────────────────────── */
|
|
--border-soft: #eef0f3;
|
|
--border-card: #e6e8ec;
|
|
--border-strong: #d1d5db;
|
|
|
|
/* ── Text ────────────────────────────────────────────────────────────── */
|
|
--fg-primary: #111111;
|
|
--fg-secondary: #5b6066;
|
|
--fg-tertiary: #73767e;
|
|
--fg-on-dark: #e2e8f0; /* text on --bg-headline */
|
|
--fg-on-dark-muted: #94a3b8; /* caveat text on dark */
|
|
|
|
/* ── Brand / CTA ─────────────────────────────────────────────────────── */
|
|
--accent: #1d4ed8; /* primary blue CTA */
|
|
--accent-hover: #1e40af;
|
|
--accent-soft: #dbeafe; /* badge bg, active tab bg */
|
|
--accent-2: #f2994a; /* secondary orange CTA (Export, Share) */
|
|
|
|
/* ── Semantic ────────────────────────────────────────────────────────── */
|
|
--success: #0a7a3a;
|
|
--success-soft: #dcfce7;
|
|
--warn: #9a6700;
|
|
--warn-soft: #fef3c7;
|
|
--danger: #b3261e;
|
|
--danger-soft: #fee2e2;
|
|
|
|
/* ── Data-viz (use in order, no skip) ───────────────────────────────── */
|
|
--viz-1: #1d4ed8;
|
|
--viz-2: #0ea5e9;
|
|
--viz-3: #14b8a6;
|
|
--viz-4: #f59e0b;
|
|
--viz-5: #8b5cf6;
|
|
--prediction-line: #0ea5e9;
|
|
--prediction-band: rgba(14, 165, 233, 0.18);
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: var(--bg-app);
|
|
color: var(--fg-primary);
|
|
font-family:
|
|
Inter,
|
|
-apple-system,
|
|
"Segoe UI",
|
|
system-ui,
|
|
sans-serif;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
/* Tabular nums globally for numeric legibility (Bloomberg lesson) */
|
|
font-variant-numeric: tabular-nums;
|
|
font-feature-settings: "tnum";
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* Focus-visible ring — accessible, not outline:none */
|
|
:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Remove default outline for mouse users */
|
|
:focus:not(:focus-visible) {
|
|
outline: none;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
}
|