/* ========================================================================== HIM — Design tokens Authority: decisions/0001-foundations.md Layer 1 = primitives (--him-*). Layer 2 = semantic roles. Components consume ONLY layer 2. A hardcoded value in a component is a bug. ========================================================================== */ :root { /* ---------- 1. PRIMITIVES : colour ------------------------------------ */ --him-ink: #0A0A0A; /* surfaces — not pure black, sits better against photography */ --him-black: #000000; /* type on paper only */ --him-paper: #FAFAF8; /* warm white ground */ --him-white: #FFFFFF; --him-neutral-50: #F5F4F1; --him-neutral-100: #EBEAE6; --him-neutral-200: #DAD8D2; --him-neutral-300: #BFBCB4; --him-neutral-400: #9A968C; /* decorative only — 2.82:1 on paper, fails as text */ --him-neutral-450: #92918D; /* 3.02:1 — the floor for interactive borders */ --him-neutral-480: #77736C; /* 4.51:1 — the floor for secondary text */ --him-neutral-500: #75716A; --him-neutral-600: #565349; --him-neutral-700: #3A3833; --him-neutral-800: #232220; --him-gold: #C9A227; /* surfaces, borders, rules — NOT text on paper */ --him-gold-dim: #A8871F; /* Gold as TEXT on the paper ground: #C9A227 measures 2.31:1, well under the 4.5:1 floor. This is the darkest gold that passes. Verified 2026-07-21. */ --him-gold-text: #8B701B; --him-navy: #1C2E4A; --him-olive: #3D4B3E; --him-error: #8C2F2F; /* 7.84:1 on paper */ --him-success: #2F5D42; /* The same reds and greens measure 2.4:1 on the ink ground — a form error nobody can read is a form nobody can complete. Lightened for dark only. */ --him-error-dark: #C65555; /* 4.56:1 on ink */ --him-success-dark: #4E8464; /* 4.53:1 on ink */ /* ---------- 1. PRIMITIVES : spacing (4px base) ------------------------ */ --him-space-1: 4px; --him-space-2: 8px; --him-space-3: 12px; --him-space-4: 16px; --him-space-6: 24px; --him-space-8: 32px; --him-space-12: 48px; --him-space-16: 64px; /* ↓ the four section-rhythm steps ↓ */ --him-space-24: 96px; --him-space-32: 128px; --him-space-48: 192px; /* ---------- 1. PRIMITIVES : radius (square by default) ---------------- */ --him-radius-none: 0; --him-radius-sm: 2px; --him-radius-md: 4px; /* ---------- 1. PRIMITIVES : border ------------------------------------ */ --him-border-hairline: 1px; --him-border-emphasis: 2px; /* ---------- 1. PRIMITIVES : motion ------------------------------------ */ --him-duration-instant: 120ms; --him-duration-base: 320ms; --him-duration-slow: 560ms; --him-duration-cinematic: 900ms; --him-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --him-ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* ---------- 1. PRIMITIVES : layout ------------------------------------ */ --him-container-narrow: 720px; --him-container-default: 1280px; --him-container-wide: 1600px; --him-gutter: var(--him-space-6); /* 20→40→64 via media queries below */ --him-grid-gap: var(--him-space-8); /* ---------- 1. PRIMITIVES : type -------------------------------------- */ --him-font: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; /* display-* only (ADR 0001 §2). To drop the serif entirely, set this to var(--him-font) — that is the whole rollback. */ --him-font-display: "Playfair Display", ui-serif, Georgia, "Times New Roman", serif; --him-weight-light: 300; --him-weight-regular: 400; --him-weight-medium: 500; --him-weight-semibold: 600; /* fluid scale — perfect fourth at desktop, compressing to ~1.2 on mobile */ --him-size-display-1: clamp(2.75rem, 1.20rem + 7.8vw, 7.5rem); --him-size-display-2: clamp(2.25rem, 1.20rem + 5.2vw, 5.25rem); --him-size-display-3: clamp(1.875rem, 1.20rem + 3.4vw, 3.5rem); --him-size-headline-1: clamp(1.625rem, 1.15rem + 2.4vw, 2.625rem); --him-size-headline-2: clamp(1.375rem, 1.10rem + 1.4vw, 2rem); --him-size-title: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); --him-size-body-lg: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem); --him-size-body: 1rem; --him-size-eyebrow: 0.75rem; --him-size-caption: 0.8125rem; --him-leading-display: 1.05; --him-leading-heading: 1.18; --him-leading-body: 1.7; --him-tracking-display: -0.015em; /* serif: less negative than a geometric sans wants */ --him-tracking-heading: -0.015em; --him-tracking-normal: 0; --him-tracking-eyebrow: 0.18em; --him-measure: 68ch; /* ---------- 1. PRIMITIVES : elevation --------------------------------- */ --him-shadow-overlay: 0 8px 24px rgba(10, 10, 10, 0.08), 0 2px 6px rgba(10, 10, 10, 0.04); --him-scrim: rgba(10, 10, 10, 0.4); --him-scrim-image: linear-gradient(to top, rgba(10, 10, 10, 0.72) 0%, rgba(10, 10, 10, 0.20) 45%, rgba(10, 10, 10, 0) 75%); --him-z-header: 100; --him-z-overlay: 200; --him-z-modal: 300; } /* ========================================================================== LAYER 2 — SEMANTIC ROLES (light / paper — the default) Components reference these and nothing above. ========================================================================== */ :root, :root[data-theme="light"] { --surface: var(--him-paper); --surface-raised: var(--him-white); /* neutral-100, not -50: at -50 a media well was only ~2% off the paper ground and skeletons were effectively invisible. Verified in-browser. */ --surface-sunken: var(--him-neutral-100); --surface-inverse: var(--him-ink); --surface-depth-navy: var(--him-navy); --surface-depth-olive: var(--him-olive); --content: var(--him-black); --content-muted: var(--him-neutral-500); /* 4.64:1 */ --content-subtle: var(--him-neutral-480); /* 4.51:1 — was neutral-400 at 2.82:1 */ --content-inverse: var(--him-paper); --content-on-depth: var(--him-paper); --accent: var(--him-gold); /* rules, underlines, non-text */ --accent-text: var(--him-gold-text); /* gold when it carries words */ --accent-hover: var(--him-gold-text); --border: var(--him-neutral-200); /* decorative dividers */ --border-interactive: var(--him-neutral-450); /* the only affordance on a control — 3:1 */ --border-strong: var(--him-black); --border-accent: var(--him-gold); --state-error: var(--him-error); --state-success: var(--him-success); --focus-ring: var(--him-black); } /* ---------- Dark / ink ground ------------------------------------------- Used site-wide via [data-theme="dark"] and per-section via .him-invert. Only these roles change; no component is aware a theme exists. */ :root[data-theme="dark"], .him-invert { --surface: var(--him-ink); --surface-raised: var(--him-neutral-800); --surface-sunken: #050505; --surface-inverse: var(--him-paper); --content: var(--him-paper); --content-muted: var(--him-neutral-300); --content-subtle: var(--him-neutral-400); --content-inverse: var(--him-black); --accent: var(--him-gold); --accent-text: var(--him-gold); /* 8.18:1 on ink — passes as text */ --accent-hover: #DDB93F; --state-error: var(--him-error-dark); --state-success: var(--him-success-dark); --border: var(--him-neutral-700); --border-interactive: var(--him-neutral-400); /* 6.28:1 on ink */ --border-strong: var(--him-paper); --focus-ring: var(--him-paper); } /* ---------- Responsive gutters ------------------------------------------ */ @media (min-width: 768px) { :root { --him-gutter: var(--him-space-12); } } @media (min-width: 1024px) { :root { --him-gutter: var(--him-space-16); } } /* ---------- Reduced motion ---------------------------------------------- ADR 0001 §8: all motion degrades to opacity-only at instant duration. */ @media (prefers-reduced-motion: reduce) { :root { --him-duration-base: var(--him-duration-instant); --him-duration-slow: var(--him-duration-instant); --him-duration-cinematic: var(--him-duration-instant); } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: var(--him-duration-instant) !important; scroll-behavior: auto !important; } }