/* ============================================================================ * cb-tokens.css — CB DESIGN PRIMITIVES · the single source of truth * ---------------------------------------------------------------------------- * v801 / 2026-05-28 · Phase 1 of the design-system foundation. * * WHAT THIS IS * The one file that owns CB's *non-color* design primitives: the SPACING * scale, the RADIUS ladder, the TYPE scale, and the MOTION vocabulary * (easings + durations). Everything else — every component in theme.css, * polish.css, cb-glass.css, cb-mod-v4.css, cb-home-v4.css — should, over * time, reference these var()s instead of hardcoding 14px / 16px / .35s / * cubic-bezier(.16,1,.3,1) by hand. Today those numbers are scattered across * ~99 pages with no single knob; this file is that knob. * * WHAT THIS IS *NOT* * - NOT a color file. Colors stay in theme.css ([data-theme] blocks) and the * V4 skins. This file is THEME-AGNOSTIC and LIGHT/DARK-AGNOSTIC on purpose: * a token here resolves to the identical value in both CB themes, so it can * never fight the Light/Dark palette swap. (Light + Dark are CB's only two * themes — this file does not reintroduce others.) * - NOT a rewrite. Every value below was reverse-engineered from the LIVE * source so that adopting a token causes ~zero visual change. Migration is * INCREMENTAL and ADDITIVE — adopt token-by-token, component-by-component. * Nothing breaks if a page never references these. * * LOAD ORDER (important) * Link this FIRST, *before* theme.css, so every downstream sheet can read it: * * * ... (unchanged) * It is pure custom-property declarations with no selectors that paint, so * load position only matters for *availability*, never for cascade fights. * * NAMING * Aligned with CB's existing token precedent in embers-dls/tokens.css * (--space-N / --radius-* / --ease-* / --dur-*) so the vocabulary feels * native. The TYPE scale uses SEMANTIC names (--text-body, --text-h2, …) * rather than t-shirt sizes, because they map 1:1 onto CB's real component * roles and make incremental migration legible at the call site. * * Header read first → see DESIGN_LANGUAGE.md §3 (type), §4 (spacing/radius/ * motion) for the full audit this file distills. * ========================================================================== */ :root { /* ========================================================================== * 1 · SPACING SCALE * -------------------------------------------------------------------------- * The 4-based ladder CB already uses by hand (4 / 8 / 12 / 16 / 24 / 32 / * 48 / 64 / 96 / 128). Verified against the live spacing: card padding * 18-20px and 13-16px gaps (theme.css .card, cb-mod-v4 chips/joints), * section margins 28-32px (theme.css .section-title / .section-sub / * .divider), hero padding 26-44px (theme.css .hero, cb-mod-v4 .v4-hero). * Kept in px (not rem) to match the hand-authored source 1:1 — these are * layout primitives, not text, so they should NOT scale with the user's * root font-size knob. * ======================================================================== */ --space-0: 0; --space-1: 4px; /* hairline gaps, icon insets, badge v-pad */ --space-2: 8px; /* tight gaps, pill padding, chip rows */ --space-3: 12px; /* default small gap (grid gaps, list spacing) */ --space-4: 16px; /* base unit — card gaps, grid2/grid3 gap, hero gap */ --space-5: 24px; /* container side-pad, comfy card padding */ --space-6: 32px; /* container v-pad, section rhythm (.container) */ --space-7: 48px; /* large section breaks, hero v-pad upper bound */ --space-8: 64px; /* major section separation */ --space-9: 96px; /* page-level vertical rhythm (landing sections) */ --space-10: 128px; /* hero / first-section top breathing on large views */ /* Half-steps for the few real in-between values CB authored by hand. * Use sparingly — prefer the integer steps above. */ --space-2-5: 10px; /* .card-title gaps, ppe-step rhythm */ --space-4-5: 18px; /* .card padding, .ma-card / OINA panel padding */ --space-6-5: 40px; /* between --space-6 (32) and --space-7 (48) */ /* ========================================================================== * 2 · RADIUS LADDER * -------------------------------------------------------------------------- * CB's observed corner ladder (DESIGN_LANGUAGE §4): 4 (focus/code) → * 6-8 (buttons/pills) → 10-12 (cards) → 14 (.ma-item, data-table, V4 cards) * → 16 (glass cards, V4 panel) → 18 (feature/landing cards, modals) → * 999 (stat-pills, badges, FABs). 22px appears once (cb-mod-v4 hero badge) * and is exposed as --radius-2xl for fidelity. * ======================================================================== */ --radius-xs: 4px; /* :focus-visible ring radius, inline code */ --radius-sm: 8px; /* buttons, nav pills, small chips, search inputs */ --radius-md: 12px; /* standard cards (.card), nav dropdowns */ --radius-lg: 14px; /* .ma-item / .ma-card, data-table, V4 unified card */ --radius-xl: 16px; /* glass cards, V4 anatomy panel */ --radius-2xl: 18px; /* landing/feature cards, modals, V4 home cards */ --radius-3xl: 22px; /* V4 hero quick-info badge (largest authored) */ --radius-pill: 999px; /* stat-pills, badges, FABs, fully-round controls */ /* ========================================================================== * 3 · TYPE SCALE * -------------------------------------------------------------------------- * Semantic steps with a font-size + a matched line-height each. Reconciles * CB's three type roles (see cb-fonts.css / DESIGN_LANGUAGE §3): * * DISPLAY / HEADINGS → Manrope, weight 800 (700 for the editorial font- * theme), tracking -0.022em tightening to -0.035em on the hero wordmark. * Use --font-display (defined in cb-fonts.css) for family. * BODY → Manrope, weight 400, the reading workhorse. * Use --font-body for family. * MONO / EYEBROW / LABEL → IBM Plex Mono, UPPERCASE, wide tracking * (use --tracking-eyebrow). Use --font-eyebrow / --font-mono for family. * * Sizes were derived from the live source so adoption is near-invisible: * - --text-body = 17px: the comfortable reading midpoint between the V4 * module body (16px/1.66, cb-mod-v4.css:314) and the sitewide * --font-size-base (20px/1.78, theme.css:31). The brief's target. * - --text-small = 15.5px: CB's pinned callout/card body (theme.css:202, * .bl-strip / .ma-body / .section-sub). * - --text-micro = 11px: the canonical mono eyebrow size (theme.css .badge * / .data-table th, cb-mod-v4 .v4-eyebrow). * - --text-h4..h1 ladder (20/24/28/34) covers .ma-card title (16.5→use h4 * range), .section-title (28px), and the V4 stat numerals (24px). * - --text-display = clamp(2.6rem,6vw,4.6rem): the V4 hero wordmark * verbatim (cb-mod-v4.css:206), 42→74px fluid. * * Each step ships as a paired size + line-height. Headings get tight * leading; body/reading steps get generous leading for hours-long study. * ======================================================================== */ /* micro — mono eyebrows, table headers, badges, kbd, leader labels */ --text-micro: 11px; --text-micro-lh: 1.45; /* (pair with --font-eyebrow, text-transform:uppercase, --tracking-eyebrow) */ /* small — secondary body: callouts, card body, captions, .section-sub */ --text-small: 15.5px; --text-small-lh: 1.7; /* body — primary reading copy (the brief's ~17px reading target) */ --text-body: 17px; --text-body-lh: 1.68; /* h4 — card titles, sub-headers (.ma-card .ma-title sits in this range) */ --text-h4: 20px; --text-h4-lh: 1.35; /* h3 — sub-section headings, OINA group titles, V4 stat numerals (24px) */ --text-h3: 24px; --text-h3-lh: 1.3; /* h2 — the workhorse section heading (.section-title is 28px) */ --text-h2: 28px; --text-h2-lh: 1.25; /* h1 — page / module headings below the hero wordmark */ --text-h1: 34px; --text-h1-lh: 1.18; /* display — hero wordmark only (clipped-gradient emphasized word lives here) */ --text-display: clamp(2.6rem, 6vw, 4.6rem); /* 42 → 74px */ --text-display-lh: 0.98; /* ── Weight tokens (reconcile the Manrope roles) ────────────────────────── * Manrope display = 800, body = 400, with 500/600/700 as the in-betweens * CB reaches for (nav 600/700, strong 700, eyebrow 500-600). Family + * letter-spacing live in cb-fonts.css (--font-display-weight etc.); these * are convenience aliases for components that set weight directly. */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* body , headings in editorial theme */ --weight-display: 800; /* Manrope display / hero / .mark */ /* ── Tracking (letter-spacing) tokens ───────────────────────────────────── * Display tightens; eyebrows/labels widen. Mirrors cb-fonts.css * --font-display-tracking (-0.022em) and the mono eyebrow tracking * (1.2-2px) used sitewide. */ --tracking-display: -0.022em; /* default heading tightening */ --tracking-hero: -0.035em; /* hero wordmark (cb-mod-v4 .v4-hero h1) */ --tracking-snug: -0.012em; /* .section-title / strong sub-headers */ --tracking-normal: 0; --tracking-eyebrow: 0.12em; /* mono eyebrows/labels (≈1.2-2px uppercase) */ --tracking-label: 0.04em; /* gentler caps tracking (data-table, tags) */ /* ========================================================================== * 4 · MOTION VOCABULARY * -------------------------------------------------------------------------- * CB's three signature easings (DESIGN_LANGUAGE §4; already present as * --ease in cb-dark-v2.css and --ease-galaxy in cb-theme-galaxy.css — this * canonicalizes them) plus a duration ladder. * * MOTION CONTRACT REMINDER: these tokens are values, not policy. Continuous * / decorative motion must STILL gate on html[data-motion="high"] (and is * killed by prefers-reduced-motion) per the quiet-UI contract. Using a * --dur-* / --ease-* token does NOT exempt an effect from that gate. * ======================================================================== */ /* The signature CB curve — fast-out, gentle-settle. Used everywhere: * canvas fade, theme sweep, card hover, section fade-in. */ --ease-out: cubic-bezier(.16, 1, .3, 1); /* Bouncy "pop" overshoot — QuickBar FAB/tiles, modals, tour cards, .mark. */ --ease-pop: cubic-bezier(.34, 1.56, .64, 1); /* Material standard in/out — neutral UI transitions (dropdowns, toggles). */ --ease-standard: cubic-bezier(.4, 0, .2, 1); /* Duration ladder */ --dur-fast: 120ms; /* hovers, color shifts, focus rings */ --dur-base: 180ms; /* default UI transition (dropdowns, toggles) */ --dur-slow: 280ms; /* card lifts, spotlight fade, reveals */ --dur-slower: 400ms; /* page fade-in, tab-enter, large state changes */ /* ========================================================================== * 5 · SEMANTIC ALIASES * -------------------------------------------------------------------------- * Convenience handles that name a primitive by its job. Components can read * the alias and stay legible; retuning CB's rhythm later = edit one line * here. All resolve to a primitive above (no new magic numbers). * ======================================================================== */ --card-pad: var(--space-4-5); /* 18px — standard card inner pad */ --card-pad-lg: var(--space-5); /* 24px — roomy card / panel pad */ --card-gap: var(--space-4); /* 16px — gap between cards in a grid */ --section-gap: var(--space-6); /* 32px — vertical rhythm btwn blocks */ --section-gap-lg: var(--space-9); /* 96px — landing-page section rhythm */ --container-pad-x: var(--space-5); /* 24px — container horizontal padding */ --container-pad-y: var(--space-6); /* 32px — container vertical padding */ --stack-gap: var(--space-3); /* 12px — default flex/stack gap */ --inline-gap: var(--space-2); /* 8px — inline icon/label gap */ /* Default radii by surface role */ --card-radius: var(--radius-lg); /* 14px — the V4 unified card corner */ --control-radius: var(--radius-sm); /* 8px — buttons / inputs / pills */ --modal-radius: var(--radius-2xl); /* 18px — modals / anchor surfaces */ /* Default motion handle — the CB feel in one token */ --transition-base: var(--dur-base) var(--ease-out); /* ========================================================================== * 6 · GLASS FILTER VOCABULARY (v975) * -------------------------------------------------------------------------- * The frost itself — blur + saturate primitives for CB's 3-tier glass * system (DESIGN_LANGUAGE §6, cb-dark-v3-premium.css "3 blur tiers: * 8px ambient · 16px cards · 24px modals"). These are THEME-AGNOSTIC * optics: the *tint* of each tier stays with the themes (--glass-1/2/3 * in cb-dark-v3-premium.css + cb-glass.css, --glass-bg in the Nordic * skin). Before v975 the site hand-mixed ~57 distinct backdrop-filter * recipes (blur 4-32px, saturate 120-200%); they now resolve to these * three knobs. NOTE: Nordic's own --glass-blur (40px hero recipe) * deliberately stays separate — it is the skin's signature, not a tier. * ======================================================================== */ --blur-ambient: 8px; /* tier 1 — chrome, chips, quiet surfaces */ --blur-standard: 16px; /* tier 2 — cards, panels, dropdowns */ --blur-anchor: 24px; /* tier 3 — modals, command bar, hero anchors */ --glass-saturate: 170%; /* shared chroma lift behind every tier */ /* Composed per-tier filters — the only values components should use */ --glass-filter-ambient: blur(var(--blur-ambient)) saturate(var(--glass-saturate)); --glass-filter-standard: blur(var(--blur-standard)) saturate(var(--glass-saturate)); --glass-filter-anchor: blur(var(--blur-anchor)) saturate(var(--glass-saturate)); }