/* ============================================================ Clarity — design tokens Certifier brand language (2026-07-28 rebrand): white cards on a near-neutral canvas, thin borders, solid Certifier blue #1565D8 (never gradient), warm/cool surface bands, near-black ink headlines in Space Grotesk. ============================================================ */ /* Space Grotesk — vendored variable display face (300–700). Carries headlines, buttons, kickers, stat values, brand, tabs. Body/table text stays on the system stack (--font). */ @font-face { font-family: "Space Grotesk"; src: url("../fonts/SpaceGrotesk-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } :root { /* ---- Surfaces ---- */ --canvas: #F8F8F8; /* Certifier neutral band (warmed from the old slate-tinted canvas) */ --card: #FFFFFF; --card-subtle: #FAFAFA; --inset: #F2F2F3; /* table header rows, wells */ /* ---- Brand surface bands (Certifier) ---- */ --surface-cool: #EAF2FF; /* cool tint band (== --primary-50) */ --surface-warm: #F5F3F2; /* warm porcelain band */ --surface-tan: #E2D3C3; /* warm tan band — see AA note below: no primary-600 text here */ /* ---- Neutrals (de-slated zinc ramp — scrollbars, inverse surfaces) ---- */ --neutral-300: #D4D4D8; --neutral-400: #A1A1AA; --surface-inverse: #262626; /* near-black panel — undo bar / dark overlay surfaces */ --panel-dark: #262626; /* Certifier near-black panel band (alias of inverse) */ /* ---- Borders (thin, neutral) ---- */ --border: #E8E8EA; --border-strong: #DBDBDF; /* ---- Text ---- */ --ink: #171717; /* Certifier headline near-black */ --text: #171717; /* body follows the ink — neutral, no slate cast */ --text-2: #52525B; --text-3: #6B6B74; --text-muted: #6B6B74; /* 5.28:1 on white, 4.97:1 on canvas — AA-verified */ --text-invert: #FFFFFF; /* ---- Primary (Certifier blue — solid #1565D8, never gradient) ---- */ --primary-50: #EAF2FF; --primary-100: #E3EEFF; --primary-200: #BFD8F8; --primary-300: #8FBAF0; --primary-400: #5490E4; --primary-500: #2E77DE; --primary-600: #1565D8; /* 5.41:1 on white, 4.80:1 on primary-50 — AA-verified */ --primary-700: #0F4FB0; /* hover / active-tint text; 5.18:1 on --surface-tan */ /* ---- Semantic: success (green) ---- */ --success-50: #F0FDF4; --success-100: #DCFCE7; --success-500: #22C55E; --success-600: #16A34A; --success-700: #15803D; /* ---- Semantic: warning (amber) ---- */ --warning-50: #FFFBEB; --warning-100: #FEF3C7; --warning-500: #F59E0B; --warning-600: #D97706; --warning-700: #B45309; /* ---- Semantic: danger (red) ---- */ --danger-50: #FEF2F2; --danger-100: #FEE2E2; --danger-500: #EF4444; --danger-600: #DC2626; --danger-700: #B91C1C; /* ---- Semantic: info (sky) ---- */ --info-50: #F0F9FF; --info-100: #E0F2FE; --info-500: #0EA5E9; --info-600: #0284C7; --info-700: #0369A1; /* ---- Accent: violet (7th entry-type family — Conference/CME) ---- */ --violet-100: #EDE9FE; --violet-700: #6D28D9; /* ---- Radius scale ---- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-control: 10px; /* buttons + form controls only */ --radius-full: 999px; /* ---- Elevation (soft — flatter at rest, lift is earned; neutral ink, not slate) ---- */ --shadow-1: 0 1px 2px rgba(23, 23, 23, 0.04); --shadow-2: 0 2px 8px rgba(23, 23, 23, 0.06), 0 1px 2px rgba(23, 23, 23, 0.04); --shadow-3: 0 8px 24px rgba(23, 23, 23, 0.10), 0 2px 6px rgba(23, 23, 23, 0.05); --shadow-4: 0 16px 48px rgba(23, 23, 23, 0.16), 0 4px 12px rgba(23, 23, 23, 0.08); --shadow-lift: 0 6px 16px rgba(23, 23, 23, 0.07), 0 2px 4px rgba(23, 23, 23, 0.05); /* ---- Spacing scale ---- */ --sp-1: 4px; --sp-2: 8px; --sp-2-5: 10px; /* sanctioned half-step: icon-text gaps, dense inner paddings */ --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; /* ---- Fluid type (clamp) ---- */ --fs-2xs: 0.6875rem; /* 11 — uppercase micro-labels, badges */ --fs-xs: 0.75rem; /* 12 — metadata, chips */ --fs-sm: 0.8125rem; /* 13 — secondary text */ --fs-base: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem); /* 14–15 body */ --fs-md: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); /* 15–17 */ --fs-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); /* 17–20 section titles */ --fs-xl: clamp(1.25rem, 1.15rem + 0.6vw, 1.5rem); /* 20–24 page titles */ --fs-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem); /* 24–30 stat values */ --fs-3xl: clamp(1.875rem, 1.6rem + 1.4vw, 2.375rem); /* hero numbers */ --fs-control: 0.875rem; /* 14 static — nav, buttons, inputs, tabs, tables (controls do NOT track fluid body) */ --fs-input-mobile: 1rem; /* 16 static — iOS zoom guard: Safari auto-zooms the page (and leaves it zoomed) when a focused input is under 16px. Every text input reachable at <900px sits on this floor; never "fix" it with maximum-scale. */ --fs-title: 1.375rem; /* 22 static — page-header h1/h2 (POLISH-pinned) */ /* ---- Font ---- */ --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; /* ---- Layout ---- */ --sidebar-w: 240px; --topbar-h: 64px; --bottom-tabs-h: 60px; --content-max: 1240px; --content-pad: clamp(16px, 3vw, 32px); /* one page gutter — topbar, content, footer (overridden per breakpoint) */ --card-pad: var(--sp-6); /* card + stat-tile breathing (16px <900px) */ --overlay-inset: 32px; /* total viewport inset (16px/side) for fixed overlays */ /* ---- Control geometry ---- */ --control-h: 40px; /* standard control height — inputs, selects, search, primary/decision buttons */ --control-h-sm: 32px; /* compact control height — row-level buttons, dense filters */ --icon-tile: 38px; /* square icon tiles: avatar, stat-icon, search icon slot (NOT a control height) */ --tap-target: 44px; /* accessibility floor for touch targets */ /* ---- Motion ---- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1); /* spring-ish decel for sheets */ --dur-fast: 120ms; --dur-mid: 160ms; /* hover lifts, chevron rotations */ --dur: 200ms; --dur-slow: 320ms; /* ---- Focus ring ---- */ --ring: 0 0 0 2px var(--card), 0 0 0 4px var(--primary-500); --ring-soft: 0 0 0 3px var(--primary-100); /* sanctioned halo motif (current-state cards, moved markers) */ /* ============================================================ DATAVIZ (GTM console) Built entirely from ramp steps that already exist. ZERO new hex values, because a chart palette that invents colours is how a design system starts leaking. Three rules here are AA requirements, not preferences: 1. NO LABEL TEXT EVER SITS INSIDE A FUNNEL BAR. White on --primary-500 is ~4.4:1 and fails AA at body size. Labels go left in --ink, values go right in --ink. 2. AREA FILLS USE THE FLAT --chart-fill TINT, NEVER A GRADIENT. Certifier blue is solid. A second series is differentiated by the diagonal hatch already used for .day-locked, not by a second gradient. 3. EVERY MARK CARRIES A --chart-hairline STROKE, or --chart-5 (primary-200) disappears against white. ============================================================ */ /* Ordinal / sequential — one series, ranked. Solid steps, flat fills. */ --chart-1: var(--primary-600); --chart-2: var(--primary-500); --chart-3: var(--primary-400); --chart-4: var(--primary-300); --chart-5: var(--primary-200); /* Funnel — 7 stages, monotone, value ascends with darkness. */ --funnel-1: var(--primary-100); --funnel-2: var(--primary-200); --funnel-3: var(--primary-300); --funnel-4: var(--primary-400); --funnel-5: var(--primary-500); --funnel-6: var(--primary-600); --funnel-7: var(--primary-700); /* Categorical — nominal, max 6. Borrowed from the semantic families. All six are AA as TEXT on white too, so a legend swatch and its label can share one colour. */ --cat-1: var(--primary-600); --cat-2: var(--info-600); --cat-3: var(--success-600); --cat-4: var(--warning-600); --cat-5: var(--danger-600); --cat-6: var(--violet-700); /* Chart infrastructure */ --chart-grid: var(--border); --chart-track: var(--inset); --chart-ink: var(--ink); --chart-muted: var(--text-muted); --chart-hairline: rgba(23, 23, 23, 0.10); --chart-fill: rgba(21, 101, 216, 0.10); /* FLAT — not a gradient */ --chart-fill-2: rgba(23, 23, 23, 0.05); /* second series, paired with the hatch */ /* Confidence / provenance — how much a value can be trusted. These are the visual counterpart of the evidence gate. */ --conf-high: var(--success-600); --conf-med: var(--warning-600); --conf-low: var(--text-muted); --conf-none: var(--neutral-400); --evidence-rule: 2px; /* New geometry */ --egrid-row-h: 34px; --egrid-col-w: 168px; --egrid-sticky-w: 250px; --unibox-list-w: 330px; --unibox-rail-w: 212px; --filter-rail-w: 222px; --draft-list-w: 320px; /* Documented exceptions to the 200ms micro-interaction cap. A chart drawing itself and a number counting up are not micro-interactions; they are content arriving. Both are gated on reduced motion. */ --dur-chart: 520ms; --dur-count: 800ms; --dur-cell: 320ms; /* the tint flash when a research cell lands */ } /* Responsive token overrides — keep every gutter on one axis per breakpoint */ @media (min-width: 900px) and (max-width: 1199px) { :root { --content-pad: var(--sp-5); } } @media (max-width: 899px) { :root { --content-pad: var(--sp-4); --card-pad: var(--sp-4); } }