/* ============================================================ Muse Bio — Design tokens v3.0.1 (2026-11-09) Generated from tokens.json. Edit tokens.json first, then mirror here. Every value in the site must come from a --mb-* variable. Import order: fonts.css, tokens.css, base.css. ============================================================ */ :root { /* ---------- Colour primitives ---------- */ --mb-coral-50: #FDF1F0; --mb-coral-100: #FBE3E2; --mb-coral-200: #F7C2C1; --mb-coral-300: #F49B9A; --mb-coral-400: #F27877; --mb-coral-500: #EF5B5B; /* brand coral: surfaces, buttons, wordmark, large type only */ --mb-coral-600: #DB4A4B; /* button hover */ --mb-coral-700: #CC3D3B; /* coral TEXT on light surfaces (4.9:1 on white) */ --mb-coral-800: #A93130; /* link hover, button active */ --mb-coral-900: #6E2222; --mb-white: #FFFFFF; --mb-paper: #FAF7F2; --mb-paper-deep: #F3EEE7; --mb-line: #E6E1DA; --mb-line-strong: #CFC7BE; --mb-mute: #6B635D; --mb-secondary: #4A4440; --mb-ink-soft: #2B2628; --mb-ink: #17141A; --mb-on-ink: #F4EFEA; --mb-on-ink-mute: #B5ACA5; --mb-success: #2E7D4F; --mb-success-bg: #E6F2EA; --mb-warning: #9A6A12; --mb-warning-bg: #F8EFD9; --mb-danger: #9B2C2C; --mb-danger-bg: #F6E3E1; --mb-info: #3B6B8F; --mb-info-bg: #E4EDF4; /* ---------- Colour semantics (use these in components) ---------- */ --mb-surface-page: var(--mb-white); --mb-surface-panel: var(--mb-paper); --mb-surface-sunken: var(--mb-paper-deep); --mb-surface-tint: var(--mb-coral-100); --mb-surface-brand: var(--mb-coral-500); --mb-surface-ink: var(--mb-ink); --mb-surface-ink-raised: var(--mb-ink-soft); --mb-text-primary: var(--mb-ink); --mb-text-secondary: var(--mb-secondary); --mb-text-muted: var(--mb-mute); --mb-text-accent: var(--mb-coral-700); --mb-text-display-accent: var(--mb-coral-500); /* coral type >= 24 px only: stat figures (3.0.0) */ --mb-text-accent-hover: var(--mb-coral-800); --mb-text-on-brand: var(--mb-white); --mb-text-on-ink: var(--mb-on-ink); --mb-text-on-ink-muted: var(--mb-on-ink-mute); --mb-accent-on-ink: var(--mb-coral-400); --mb-border-hairline: var(--mb-line); --mb-border-strong: var(--mb-line-strong); --mb-border-on-ink: #3A3539; --mb-focus-ring: var(--mb-coral-700); --mb-brand-hover: var(--mb-coral-600); --mb-brand-active: var(--mb-coral-800); /* ---------- Type ---------- */ --mb-font-display: "Bricolage Grotesque", "Bricolage Grotesque Fallback", "Instrument Sans", Arial, sans-serif; --mb-font-body: "Instrument Sans", "Instrument Sans Fallback", Arial, Helvetica, sans-serif; /* IBM Plex Mono retired 2026-11-08 (Tommy). Eyebrows, data, citations, table heads and step numbers now use the body or display face. Alias kept so old markup degrades safely. */ --mb-font-mono: var(--mb-font-body); --mb-fw-regular: 400; --mb-fw-medium: 500; --mb-fw-display: 500; --mb-fs-caption: 0.8125rem; /* 13 */ --mb-fs-small: 0.875rem; /* 14 */ --mb-fs-body: 1.0625rem; /* 17 */ --mb-fs-lede: 1.25rem; /* 20 */ --mb-fs-h4: 1.25rem; /* 20 */ --mb-fs-h3: 1.5rem; /* 24 */ --mb-fs-h2: clamp(1.875rem, 1.3rem + 1.6vw, 2.5rem); /* 30–40 */ --mb-fs-h1: clamp(2.5rem, 1.6rem + 3.2vw, 4rem); /* 40–64 */ --mb-fs-stat: clamp(2.5rem, 2rem + 2vw, 3.5rem); /* 40–56 */ --mb-lh-display: 1.05; --mb-lh-heading: 1.15; --mb-lh-body: 1.6; --mb-lh-compact: 1.4; --mb-tracking-h1: -0.025em; --mb-tracking-h2: -0.02em; --mb-tracking-h3: -0.01em; --mb-tracking-eyebrow: 0; /* 3.0.0: eyebrows are sentence case, no tracking */ --mb-measure-body: 66ch; --mb-measure-lede: 44ch; --mb-measure-h1: 16ch; /* ---------- Space (4px base) ---------- */ --mb-space-1: 4px; --mb-space-2: 8px; --mb-space-3: 12px; --mb-space-4: 16px; --mb-space-5: 24px; --mb-space-6: 32px; --mb-space-7: 48px; --mb-space-8: 64px; --mb-space-9: 96px; --mb-space-10: 128px; --mb-space-section: clamp(64px, 6vw + 24px, 112px); --mb-gutter-left: max(20px, env(safe-area-inset-left, 0px)); --mb-gutter-right: max(20px, env(safe-area-inset-right, 0px)); --mb-container-text: 680px; --mb-container-content: 1120px; --mb-container-wide: 1320px; /* ---------- Shape ---------- */ --mb-radius-none: 0; --mb-radius-sm: 2px; --mb-radius-md: 6px; --mb-radius-lg: 16px; /* photos and cards (3.0.0) */ --mb-radius-image: var(--mb-radius-lg); --mb-radius-pill: 999px; --mb-border-width-hairline: 1px; /* 3.0.1: was --mb-border-hairline, which overrode the colour token of the same name */ --mb-border-focus: 2px; --mb-shadow-nav: 0 1px 0 rgba(23, 20, 26, 0.08); /* ---------- Motion ---------- */ --mb-dur-state: 150ms; --mb-dur-reveal: 200ms; --mb-ease: cubic-bezier(0.2, 0, 0, 1); /* ---------- Icons ---------- */ --mb-icon-size: 20px; --mb-icon-stroke: 1.5px; /* ---------- Components ---------- */ --mb-button-height: 48px; --mb-button-pad-x: 22px; --mb-button-fs: 0.9375rem; --mb-nav-height: 72px; --mb-nav-logo-height: 26px; --mb-input-height: 48px; } /* The research register: ink surface, restrained, same palette. Apply data-register="research" to
or a
. */ [data-register="research"] { --mb-surface-page: var(--mb-ink); --mb-surface-panel: var(--mb-ink-soft); --mb-surface-sunken: #110F13; --mb-text-primary: var(--mb-on-ink); --mb-text-secondary: var(--mb-on-ink); --mb-text-muted: var(--mb-on-ink-mute); --mb-text-accent: var(--mb-coral-400); --mb-text-display-accent: var(--mb-coral-400); --mb-text-accent-hover: var(--mb-coral-300); --mb-border-hairline: var(--mb-border-on-ink); --mb-border-strong: #4A444A; --mb-focus-ring: var(--mb-coral-400); color-scheme: dark; } /* Body size steps down on small phones. */ @media (max-width: 480px) { :root { --mb-fs-body: 1rem; --mb-fs-lede: 1.125rem; } } @media (prefers-reduced-motion: reduce) { :root { --mb-dur-state: 0ms; --mb-dur-reveal: 0ms; } }