/* ============================================================================ Base85 design tokens Generated from design-system/tokens.json and the Claude Design system. Do not hand-edit values here without updating design-system/tokens.json too. THEME MODEL :root carries the dark values — dark is the brand default and the face of the system. A visitor whose OS is set to light gets the light site via @media (prefers-color-scheme: light). [data-theme="light"] and [data-theme="dark"] force either theme against the OS, in BOTH directions. Every colour is declared outside a media query as well as inside one — nothing is media-only. CONTRAST, measured. Against Paper #F4F2EE: Ink #0A0A0A 17.7:1 Body #55524C 7.0:1 --text-muted Labels #6B6862 5.0:1 --text-faint (12px mono still clears 4.5) Red type #C42A16 5.1:1 --accent-text Brand red #E8331C 3.8:1 fills and 44px+ display words only Against Ink #0A0A0A: Paper #F4F2EE 17.7:1 Muted #B5B3AE 9.5:1 Faint #8A8884 5.6:1 Brand red #E8331C 4.6:1 TEXT ON A RED FILL IS INK, NOT PAPER. Do not "correct" this back to Paper. Paper on the brand red is 3.8:1, and a 700-weight 16px button label is not "large text" under WCAG (that starts at 18.66px bold), so red-fill + Paper-text failed AA at button size. Ink passes and reads harder. --accent #E8331C 4.64:1 PASS rest, and press --accent-hover #FF4930 5.89:1 PASS hover There is no third fill. #C42A16 was retired as a button fill because Ink on it is only 3.48:1 — a contrast hole in the press state. The press now returns to the base red plus the 1px translate, so Ink only ever sits on the two reds it passes on. The reds are brand colours and are never darkened or lightened to chase a ratio; the fix was to stop using one as a fill. #C42A16 survives as --accent-text (red as TYPE on Paper). Never a background. This applies to FILLS only. Red as a MARK is unaffected: the wordmark keeps BASE in Paper on dark and Ink on light, with the 85 always red. ========================================================================= */ /* ---------------------------------------------------------------- palette */ :root { --b85-ink: #0A0A0A; --b85-ink-2: #141414; --b85-ink-3: #1E1E1E; --b85-border-dark: #262626; --b85-paper: #F4F2EE; --b85-paper-2: #FAF9F6; --b85-paper-3: #FEFDFB; /* raised on light. Never #FFFFFF. */ --b85-border-light: #E2DFD8; --b85-muted-dark: #B5B3AE; --b85-faint-dark: #8A8884; --b85-muted-light: #55524C; --b85-faint-light: #6B6862; --b85-red: #E8331C; --b85-red-hover: #FF4930; --b85-red-active: #C42A16; /* NOT A FILL. Red-as-type on Paper only. */ --b85-cobalt: #1F3FFF; /* links in dense internal UI only */ --b85-success: #45A557; --b85-warning: #E8A51C; } /* ------------------------------------------------- semantic — dark (default) */ :root { --bg: var(--b85-ink); --surface: var(--b85-ink-2); --surface-raised: var(--b85-ink-3); --border: var(--b85-border-dark); --border-strong: var(--b85-faint-dark); --text: var(--b85-paper); --text-muted: var(--b85-muted-dark); --text-faint: var(--b85-faint-dark); --accent: var(--b85-red); --accent-hover: var(--b85-red-hover); --accent-text: var(--b85-red); /* 4.6:1 on Ink */ --on-accent: var(--b85-ink); /* see note above */ --field-bg: var(--b85-ink-2); --shadow-card: none; /* no shadows on dark, ever */ --motif-opacity: 0.08; --logo-theme: "dark"; } /* --------------------------------------------- semantic — light (OS default) */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: var(--b85-paper); --surface: var(--b85-paper-2); --surface-raised: var(--b85-paper-3); --border: var(--b85-border-light); --border-strong: #C9C5BB; --text: var(--b85-ink); --text-muted: var(--b85-muted-light); --text-faint: var(--b85-faint-light); --accent-text: var(--b85-red-active); /* 5.09:1 on Paper */ --field-bg: var(--b85-paper-3); --shadow-card: 0 2px 16px rgba(10, 10, 10, 0.06); --motif-opacity: 0.10; /* 0.08 vanishes on Paper */ --logo-theme: "light"; } } /* ------------------------------------------- semantic — light (forced) */ :root[data-theme="light"] { --bg: var(--b85-paper); --surface: var(--b85-paper-2); --surface-raised: var(--b85-paper-3); --border: var(--b85-border-light); --border-strong: #C9C5BB; --text: var(--b85-ink); --text-muted: var(--b85-muted-light); --text-faint: var(--b85-faint-light); --accent-text: var(--b85-red-active); --field-bg: var(--b85-paper-3); --shadow-card: 0 2px 16px rgba(10, 10, 10, 0.06); --motif-opacity: 0.10; --logo-theme: "light"; } /* --------------------------------------------- semantic — dark (forced) */ :root[data-theme="dark"] { --bg: var(--b85-ink); --surface: var(--b85-ink-2); --surface-raised: var(--b85-ink-3); --border: var(--b85-border-dark); --border-strong: var(--b85-faint-dark); --text: var(--b85-paper); --text-muted: var(--b85-muted-dark); --text-faint: var(--b85-faint-dark); --accent-text: var(--b85-red); --field-bg: var(--b85-ink-2); --shadow-card: none; --motif-opacity: 0.08; --logo-theme: "dark"; } /* ------------------------------------------------------------------ type */ :root { --font-display: "Inter Tight", system-ui, sans-serif; --font-body: "Inter Tight", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --weight-display: 800; --weight-bold: 700; --weight-medium: 500; --weight-regular: 400; --size-display-xl: 72px; --lh-display-xl: 1.05; --size-display: 56px; --lh-display: 1.08; --size-h1: 44px; --lh-h1: 1.12; --size-h2: 32px; --lh-h2: 1.2; --size-h3: 24px; --lh-h3: 1.3; --size-body-lg: 18px; --lh-body-lg: 1.6; --size-body: 16px; --lh-body: 1.6; --size-small: 14px; --lh-small: 1.55; --size-mono-label: 12px; --lh-mono-label: 1.4; --tracking-tight: -0.03em; /* display-xl, display, h1, h2 */ --tracking-mono: 0.12em; /* every mono label, always uppercase */ --measure: 65ch; } /* -------------------------------------------------------- space & layout */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-32: 128px; --max-width: 1240px; --gutter: 24px; --margin-mobile: 20px; } /* --------------------------------------------------------------- shape 4 / 8 / 17 / 34 only. These are the wordmark's own radii — counter r=4, outer R=17, A apex 34. Never a pill; pills are MNZLII's shape. */ :root { --radius-sm: 4px; /* inputs, chips, inset counters */ --radius-md: 8px; /* buttons, small controls */ --radius-lg: 17px; /* cards */ --radius-xl: 34px; /* hero and feature blocks */ } /* -------------------------------------------------------------- motion */ :root { --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --dur-fast: 150ms; --dur: 250ms; --dur-slow: 400ms; --reveal-y: 12px; --stagger: 60ms; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }