/* NCD brand kit v1: design tokens (light by default). Link order: fonts.css, tokens.css, tokens.dark.css, components. The live variable names (--bone ... --ease) are kept EXACTLY so this file can replace the live :root block. New names are role-based (--bg, --fg, --accent ...) and scale-based (--fs-*, --sp-*, --r-* ...). THE BLUE RULE --signal #1E3BFF text, links, focus ring on LIGHT grounds (5.86:1 on bone) --signal-d #93A6FF text, links, focus ring on DARK grounds (8.3:1 on ink) --signal-2 #4A61FF large text, icons, UI marks, the brand dot ONLY. Never body text. #1E3BFF on ink is 2.84:1 and is forbidden on dark grounds. */ :root { /* ---- live names (unchanged) ---- */ --bone: #F3EFE6; --bone-2: #EBE6DA; --ink: #0F100E; --ink-2: #181A17; --mute: #57564F; --mute-d: #B3B0A5; --signal: #1E3BFF; --signal-2: #4A61FF; --signal-d: #93A6FF; --line: rgba(15, 16, 14, .14); --line-d: rgba(243, 239, 230, .16); --disp: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif; --serif: "Newsreader", Georgia, "Times New Roman", serif; --max: 1280px; --gut: round(nearest, clamp(20px, 5vw, 72px), var(--baseline)); /* snapped to the 4px grid: 20 at phones, 40 at T1, 60 at T2, 72 at L1; fallback below */ --ease: cubic-bezier(.22, .8, .2, 1); color-scheme: light; /* ---- core: white ---- */ --white: #FFFFFF; /* ---- semantic (light set) ---- */ --bg: var(--bone); --bg-2: var(--bone-2); --fg: var(--ink); --fg-muted: var(--mute); --accent: var(--signal); /* text-safe blue */ --accent-ui: var(--signal); /* dot, icons, large text. --signal-2 is also allowed for these roles. */ --on-accent: var(--white); /* text on an accent-filled button */ --line-c: var(--line); /* semantic hairline; --line keeps its live meaning */ --focus: var(--signal); /* ---- font weights ---- */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* ---- type scale: Major Third, base 16 ---- */ --fs-xs: 12px; --fs-sm: 13px; --fs-base: 16px; --fs-md: 20px; --fs-lg: 25px; --fs-xl: 31px; --fs-2xl: 39px; --fs-3xl: 49px; --fs-4xl: 61px; --fs-display: clamp(44px, 6.4vw + 0.5rem, 112px); /* ---- line height ---- */ --lh-tight: 1.02; --lh-snug: 1.15; --lh-body: 1.55; /* ALIAS NOTE (rhythm): the three unitless tokens above stay for backwards compatibility, but --lh-body 1.55 at 16px is 24.8px, which is OFF the 4px baseline and drifts every vertical rhythm. New work uses the px tokens below (every value a multiple of --baseline): --lh-body (1.55, unitless) -> --lh-body-px (24px at --fs-base) or --lh-base --lh-snug (1.15, unitless) -> --lh-lg / --lh-xl (28px / 36px) --lh-tight (1.02, unitless) -> --lh-2xl .. --lh-4xl (40 / 52 / 64px) or --lh-display (fluid) Per-step tokens pair with the same --fs-* step: font-size: var(--fs-md); line-height: var(--lh-md); Full rules: guardrails/ALIGNMENT-AND-RHYTHM.md (R3). */ --baseline: 4px; --lh-body-px: round(nearest, calc(var(--fs-base) * 1.55), var(--baseline)); --lh-xs: round(nearest, calc(var(--fs-xs) * 1.55), var(--baseline)); --lh-sm: round(nearest, calc(var(--fs-sm) * 1.55), var(--baseline)); --lh-base: round(nearest, calc(var(--fs-base) * 1.55), var(--baseline)); --lh-md: round(nearest, calc(var(--fs-md) * 1.4), var(--baseline)); /* 28px: 1.4 not 1.55, which is loose at 20px (v1.1; was 32px) */ --lh-lg: round(nearest, calc(var(--fs-lg) * 1.15), var(--baseline)); --lh-xl: round(nearest, calc(var(--fs-xl) * 1.15), var(--baseline)); --lh-2xl: round(nearest, calc(var(--fs-2xl) * 1.02), var(--baseline)); --lh-3xl: round(nearest, calc(var(--fs-3xl) * 1.02), var(--baseline)); --lh-4xl: round(nearest, calc(var(--fs-4xl) * 1.02), var(--baseline)); --lh-display: round(nearest, calc(var(--fs-display) * 1.02), var(--baseline)); /* single-line labels and compact headings (v1.1) */ --lh-xs-tight: round(nearest, calc(var(--fs-xs) * 1.3), var(--baseline)); /* 16px: badges, eyebrows that never wrap */ --lh-base-snug: round(nearest, calc(var(--fs-base) * 1.15), var(--baseline)); /* 20px: one-line 16px headings and short prompts */ --lh-md-snug: round(nearest, calc(var(--fs-md) * 1.15), var(--baseline)); /* 24px: 20px card and tile titles */ /* ---- tracking ---- */ --tr-display: -0.03em; --tr-wordmark: -0.02em; --tr-eyebrow: 0.12em; /* ---- spacing: 4-pt ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* ---- radius ---- */ --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px; --r-round: 50%; /* the brand dot is the only circle in the identity */ /* ---- shadow: ink-based, 1 < 2 < 3 ---- */ --shadow-1: 0 1px 2px rgba(15, 16, 14, .08), 0 2px 8px -2px rgba(15, 16, 14, .10); --shadow-2: 0 18px 40px -16px rgba(15, 16, 14, .5); --shadow-3: 0 30px 60px -22px rgba(15, 16, 14, .6); /* ---- motion ---- */ --dur-instant: 100ms; --dur-quick: 250ms; --dur-base: 350ms; --dur-slow: 500ms; --dur-stage: 1200ms; --ease-out: cubic-bezier(.22, .8, .2, 1); /* = live --ease */ --ease-in-out: cubic-bezier(.65, 0, .35, 1); --ease-spring: cubic-bezier(.34, 1.4, .64, 1); /* spring-lite */ /* ---- z layers ---- */ --z-base: 1; --z-raised: 2; --z-sticky: 50; --z-overlay: 60; --z-modal: 70; --z-toast: 80; } /* Fallback for engines without CSS round() (precomputed, identical to the values above at the base sizes). --lh-display falls back to the unitless tight ratio because its font size is fluid. */ @supports not (width: round(nearest, 1px, 1px)) { :root { --lh-body-px: 24px; --lh-xs: 20px; --lh-sm: 20px; --lh-base: 24px; --lh-md: 28px; --lh-lg: 28px; --lh-xl: 36px; --lh-2xl: 40px; --lh-3xl: 48px; --lh-4xl: 64px; --lh-display: 1.02; --lh-xs-tight: 16px; --lh-md-snug: 24px; --lh-base-snug: 20px; --gut: clamp(20px, 5vw, 72px); } } @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0.01ms; --dur-quick: 0.01ms; --dur-base: 0.01ms; --dur-slow: 0.01ms; --dur-stage: 0.01ms; } }