/* ============================================================ BBB DESIGN SYSTEM — FOUNDATION v1.5 Role-named tokens. Component CSS (main.css) consumes these. Client fork = copy this file, swap the ROLE VALUES block. BBB-brand one-offs live in the BRAND block, not roles. v1.2: added --step-5-5 (30 -> 78), remapped --text-h2 to it. h1 (step-6, max 89) and h2 no longer share a max size. v1.3: --leading-body 2.1 -> 1.8 (flag resolved; v3 airy look retired in favour of readable norm). v1.4: --space-section 60->93 retuned to 76->109 (+1rem both ends, both endpoints); middle term regenerated. v1.5: BRAND tokens renamed to Brand ID working vocabulary (highlighter, moneygreen, bottomline, pinkslip, pending, deadline, redtape); --brand-turf deleted (duplicate of bottomline). Role tokens unchanged: Digital Blue = --accent, The Boardroom = --surface-dark/--ink-1, Letterhead = --surface-2 (doc names only, never code names). GENERATION RULES: - clamp() middle terms are GENERATED. Never hand-edit them. Retune endpoints in the tables below and regenerate. - Fluid range: 375px -> 1600px viewport. - Every preferred term mixes rem + vw (WCAG 1.4.4 zoom). ============================================================ */ :root { /* ========================================================== ROLE VALUES — the themable surface. One block per client. ========================================================== */ /* Surfaces (light) */ --surface-1: #FFFFFF; /* cards, primary surfaces */ --surface-2: #F0EFEB; /* page canvas */ --surface-3: #EEF1F5; /* recessed / alternate sections */ /* Surfaces (dark) */ --surface-dark: #121317; /* dark section base */ --surface-dark-2: #1C1E24; /* cards on dark */ --surface-dark-3: #22252C; /* elevated dark / hover */ /* Ink */ --ink-1: #121317; /* headings + primary body */ --ink-2: #3A4248; /* muted body */ --ink-3: #6B747B; /* secondary / metadata */ /* Greys */ --grey-1: #E3E7EC; --grey-2: #B9C0C8; --grey-3: #8A929A; /* Accent (single chromatic) */ --accent: #1458E4; --accent-hover: #0047B3; --accent-tint: #E8F0FF; /* On-dark text */ --on-dark: #FFFFFF; --on-dark-2: #B9C0C8; --ghost-on-dark: rgba(255,255,255,0.07); /* Borders & grid lines */ --border-1: #E3E7EC; --border-2: #D8DDE3; --border-3: #CDD3DA; --border-on-dark: rgba(255,255,255,0.12); --border-on-dark-strong: rgba(255,255,255,0.22); --grid-line: rgba(18,19,23,0.06); --grid-line-on-dark: rgba(255,255,255,0.06); /* Status */ --status-ok: #00A676; --status-ok-bg: rgba(0,166,118,0.12); --status-error: #D7263D; --status-error-bg: rgba(215,38,61,0.12); --status-warn: #FFB400; --status-warn-bg: rgba(255,180,0,0.14); /* Focus */ --focus-ring: 0 0 0 3px var(--accent-tint); /* Fonts */ --font-header: 'Bricolage Grotesque', sans-serif; --font-body: 'Inter', -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; /* ========================================================== BRAND (BBB one-offs — hand-placed exceptions, NOT roles) ========================================================== */ --brand-pending: #FFB400; /* Pending — awaiting */ --brand-deadline: #fe3f00; /* Deadline — urgent */ --brand-bottomline: #007257; /* Bottom Line — deep green */ --brand-redtape: #D7263D; /* Red Tape — emphasis */ --brand-moneygreen: #0DAB76; /* MoneyGreen — wins & success */ --brand-highlighter: #FFF100; /* Highlighter — behind words, never buttons */ --brand-pinkslip: #C62E65; /* Pink Slip — rare emphasis */ /* ========================================================== LAYOUT ========================================================== */ --container-wide: 1800px; --container-normal: 1530px; --container-narrow: 1200px; --container-reading: 900px; --container-content: var(--container-normal); --container-full: calc(var(--container-content) + 60px); --gutter: 30px; /* Static space (v3-compatible; utilities depend on these) */ --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 48px; --space-xl: 80px; /* Fluid space (new components; migration target) */ --space-fluid-s: clamp(1rem, 0.85rem + 0.65vw, 1.5rem); /* 16 -> 24 */ --space-fluid-m: clamp(1.5rem, 1.04rem + 1.96vw, 3rem); /* 24 -> 48 */ --space-fluid-l: clamp(2.5rem, 1.73rem + 3.27vw, 5rem); /* 40 -> 80 */ --space-fluid-xl: clamp(3.75rem, 2.6rem + 4.9vw, 7.5rem); /* 60 -> 120 */ --space-section: clamp(76px, 4.119rem + 2.694vw, 109px); /* v1.4: +16px both ends */ /* Radius */ --radius-card: 25px; --radius-ui: 12px; --radius-pill: 9999px; /* Shadows */ --shadow-card: 0 2px 8px rgba(20,24,27,0.06); --shadow-lift: 0 8px 24px rgba(20,24,27,0.10); /* Motion */ --ease-out: cubic-bezier(0.25, 1, 0.5, 1); --dur-fast: 0.2s; --dur-med: 0.3s; /* ========================================================== FLUID TYPE SCALE (generated) step 375px 1600px -2 12.5 13.5 xs -1 14.0 15.3 small body 0 16.0 18.0 body 1 18.5 24.0 subhead 2 20.0 28.0 h6 3 22.0 38.0 h5 4 25.0 50.0 h4 5 28.0 67.0 h3 5.5 30.0 78.0 h2 6 32.0 89.0 h1 7 38.0 119.0 hero ========================================================== */ --step--2: clamp(0.781rem, 0.762rem + 0.082vw, 0.844rem); --step--1: clamp(0.875rem, 0.850rem + 0.106vw, 0.956rem); --step-0: clamp(1rem, 0.962rem + 0.163vw, 1.125rem); --step-1: clamp(1.156rem, 1.051rem + 0.449vw, 1.5rem); --step-2: clamp(1.25rem, 1.097rem + 0.653vw, 1.75rem); --step-3: clamp(1.375rem, 1.069rem + 1.306vw, 2.375rem); --step-4: clamp(1.563rem, 1.084rem + 2.041vw, 3.125rem); --step-5: clamp(1.75rem, 1.004rem + 3.184vw, 4.188rem); --step-5-5: clamp(1.875rem, 0.957rem + 3.918vw, 4.875rem); --step-6: clamp(2rem, 0.910rem + 4.653vw, 5.563rem); --step-7: clamp(2.375rem, 0.827rem + 6.612vw, 7.438rem); /* Component type (generated, non-scale) */ --text-stat: clamp(2.25rem, 1.829rem + 1.796vw, 3.625rem); /* 36 -> 58 */ /* Micro type (static by design — uppercase labels) */ --text-caption: 13px; --text-label: 12px; --text-micro: 11px; --text-nav: 18px; /* Semantic mapping — components reference these, never steps */ --text-hero: var(--step-7); --text-h1: var(--step-6); --text-h2: var(--step-5-5); /* v1.2: was step-6 (v3 parity); h1/h2 hierarchy restored */ --text-h3: var(--step-5); --text-h4: var(--step-4); --text-h5: var(--step-3); --text-h6: var(--step-2); --text-subhead: var(--step-1); --text-body: var(--step-0); --text-body-sm: var(--step--1); --text-body-xs: var(--step--2); /* Leading (tightens as size grows) */ --leading-hero: 1.03; --leading-h1: 1.06; --leading-h2: 1.1; /* v3 had 1.3 at 89px — corrected */ --leading-h3: 1.18; --leading-h4: 1.25; --leading-h5: 1.35; --leading-h6: 1.4; --leading-subhead: 1.6; --leading-body: 1.8; /* v1.3: was 2.1 (v3 parity) */ /* Tracking */ --tracking-display: -0.02em; --tracking-caps: 0.06em; /* Header measure (default uncapped) */ --header-measure: 100%; /* ========================================================== v3 COMPATIBILITY ALIASES — old names resolve to roles. Delete this block only after the full HTML class rename. ========================================================== */ --bbb-bg: var(--surface-1); --bbb-bg-soft: var(--surface-2); --bbb-bg-muted: var(--surface-3); --bbb-ink: var(--ink-1); --bbb-ink-2: var(--ink-2); --bbb-ink-3: var(--ink-3); --bbb-black: var(--surface-dark); --bbb-black-card: var(--surface-dark-2); --bbb-black-alt: var(--surface-dark-3); --bbb-grey-1: var(--grey-1); --bbb-grey-2: var(--grey-2); --bbb-grey-3: var(--grey-3); --bbb-blue: var(--accent); --bbb-blue-hover: var(--accent-hover); --bbb-blue-tint: var(--accent-tint); --bbb-amber: var(--brand-pending); --bbb-orange: var(--brand-deadline); --bbb-green: var(--brand-bottomline); --bbb-crimson: var(--brand-redtape); --bbb-turf-green: var(--brand-bottomline); --bbb-jungle-green: var(--brand-moneygreen); --bbb-sunbeam-yellow: var(--brand-highlighter); --bbb-raspberry: var(--brand-pinkslip); --bbb-on-dark: var(--on-dark); --bbb-on-dark-secondary: var(--on-dark-2); --bbb-code-ghost: var(--ghost-on-dark); --bbb-border: var(--border-1); --bbb-border-medium: var(--border-2); --bbb-border-strong: var(--border-3); --bbb-border-on-dark: var(--border-on-dark); --bbb-grid-line: var(--grid-line); --bbb-grid-line-on-dark: var(--grid-line-on-dark); --bbb-success: var(--status-ok); --bbb-success-bg: var(--status-ok-bg); --bbb-error: var(--status-error); --bbb-error-bg: var(--status-error-bg); --bbb-warning: var(--status-warn); --bbb-warning-bg: var(--status-warn-bg); --bbb-focus: var(--focus-ring); --bbb-shadow-card: var(--shadow-card); --bbb-shadow-lift: var(--shadow-lift); --font-primary: var(--font-body); /* GHOST-VARIABLE HEALS — names referenced in live HTML/CSS that were never defined in v3. Defining them fixes: - contact page lime icons (--bbb-accent fallback #E1FF01) - 404 button/heading (--bbb-white, --bbb-sunbeam) - .case-stat-title font (--bbb-font-sans) */ --bbb-accent: var(--accent); --bbb-white: var(--on-dark); --bbb-sunbeam: var(--brand-highlighter); --bbb-font-sans: var(--font-body); } /* ============================================================ TYPE APPLICATION — one place each property is set. Variation = reassign tokens in scope. Never raw values. ============================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-header); font-weight: 700; margin: 0; max-width: var(--header-measure); text-wrap: balance; color: var(--ink-1); } h1 { font-size: var(--text-h1); line-height: var(--leading-h1); letter-spacing: var(--tracking-display); } h2 { font-size: var(--text-h2); line-height: var(--leading-h2); letter-spacing: var(--tracking-display); } h3 { font-size: var(--text-h3); line-height: var(--leading-h3); letter-spacing: var(--tracking-display); } h4 { font-size: var(--text-h4); line-height: var(--leading-h4); } h5 { font-size: var(--text-h5); line-height: var(--leading-h5); } h6 { font-size: var(--text-h6); line-height: var(--leading-h6); } .t-hero { font-family: var(--font-header); font-weight: 700; font-size: var(--text-hero); line-height: var(--leading-hero); letter-spacing: var(--tracking-display); max-width: var(--header-measure); text-wrap: balance; color: var(--ink-1); } .t-subhead { font-size: var(--text-subhead); line-height: var(--leading-subhead); font-weight: 400; } .t-body { font-size: var(--text-body); line-height: var(--leading-body); } .t-body-sm { font-size: var(--text-body-sm); line-height: var(--leading-body); } /* Size utilities — visual size decoupled from heading level. Markup by meaning, size by token. Prefer scoped remaps; these are the per-element escape hatch. */ .size-hero { font-size: var(--text-hero); line-height: var(--leading-hero); letter-spacing: var(--tracking-display); } .size-h1 { font-size: var(--step-6); line-height: var(--leading-h1); letter-spacing: var(--tracking-display); } .size-h2 { font-size: var(--step-5-5); line-height: var(--leading-h2); letter-spacing: var(--tracking-display); } .size-h3 { font-size: var(--step-5); line-height: var(--leading-h3); letter-spacing: var(--tracking-display); } .size-h4 { font-size: var(--step-4); line-height: var(--leading-h4); } .size-h5 { font-size: var(--step-3); line-height: var(--leading-h5); } .size-h6 { font-size: var(--step-2); line-height: var(--leading-h6); } /* ============================================================ HEADER MEASURE MODIFIERS ============================================================ */ .measure-95 { --header-measure: 95%; } .measure-90 { --header-measure: 90%; } .measure-85 { --header-measure: 85%; } .measure-80 { --header-measure: 80%; } .measure-75 { --header-measure: 75%; } .measure-70 { --header-measure: 70%; } .measure-65 { --header-measure: 65%; } .measure-60 { --header-measure: 60%; } .measure-55 { --header-measure: 55%; } .measure-50 { --header-measure: 50%; } .measure-tight { --header-measure: 15ch; } .measure-std { --header-measure: 20ch; } .measure-wide { --header-measure: 24ch; } /* Deliberate line breaks without
*/ .line { display: inline-block; }