/* =========================================== Generated by ~/component-library/tokens/build-css.php Source: tokens.json Generated: 2026-06-10T06:05:08+00:00 DO NOT EDIT — edit tokens.json and rebuild. =========================================== */ :root { /* ── Brand scales ── */ --ds-brand-primary-50: #F3F7F4; --ds-brand-primary-100: #E0EBE4; --ds-brand-primary-200: #C1D7CA; --ds-brand-primary-300: #95BCA5; --ds-brand-primary-500: #2F4A3A; /* ★ Supplied brand anchor. */ --ds-brand-primary-600: #1B2B22; --ds-brand-primary-700: #0B120E; --ds-brand-primary-800: #000000; --ds-brand-primary-900: #223729; --ds-brand-accent-50: #FAF2F0; --ds-brand-accent-100: #F3DFD8; --ds-brand-accent-200: #E6BFB2; --ds-brand-accent-300: #D5927C; --ds-brand-accent-500: #C5694A; /* ★ Supplied brand anchor. */ --ds-brand-accent-600: #A75235; --ds-brand-accent-700: #88432B; --ds-brand-accent-800: #693422; --ds-brand-accent-900: #4A2418; /* ── Neutrals ── */ --ds-neutral-white: #FFFFFF; --ds-neutral-paper: #F4EFE6; /* Default site background. */ --ds-neutral-ink: #2B2A26; /* Headings, highest emphasis. */ --ds-neutral-body: #2B2A26; /* Default body text. */ --ds-neutral-muted: #5E6B5C; /* Captions, metadata. */ --ds-neutral-line: #E5DDD0; /* Borders, dividers. */ --ds-neutral-line-soft: #F0EAE0; /* Faint dividers inside cards. */ /* ── Semantic states ── */ --ds-success: #4A7552; --ds-warning: #B47A1C; --ds-error: #8A3B3B; --ds-info: #3F5880; /* ── Role aliases (what components reference) ── */ --ds-primary: var(--ds-brand-primary-500); --ds-primary-hover: var(--ds-brand-primary-600); --ds-primary-light: var(--ds-brand-primary-100); --ds-primary-dark: var(--ds-brand-primary-900); --ds-secondary: var(--ds-brand-primary-700); --ds-secondary-hover: var(--ds-brand-primary-800); --ds-secondary-light: var(--ds-brand-primary-50); --ds-accent: var(--ds-brand-accent-500); --ds-accent-hover: var(--ds-brand-accent-600); --ds-dark: var(--ds-neutral-ink); --ds-light: var(--ds-brand-primary-50); --ds-body: var(--ds-neutral-body); --ds-body-light: var(--ds-neutral-muted); --ds-muted: var(--ds-neutral-muted); --ds-border: var(--ds-neutral-line); --ds-bg: var(--ds-neutral-paper); --ds-bg-elevated: var(--ds-neutral-white); --ds-white: var(--ds-neutral-white); --ds-paper: var(--ds-neutral-paper); /* ── Opacity helpers (color-mix) ── */ --ds-primary-10: color-mix(in srgb, var(--ds-primary) 10%, transparent); --ds-primary-15: color-mix(in srgb, var(--ds-primary) 15%, transparent); --ds-dark-60: color-mix(in srgb, var(--ds-dark) 60%, transparent); --ds-dark-70: color-mix(in srgb, var(--ds-dark) 70%, transparent); --ds-white-10: color-mix(in srgb, var(--ds-white) 10%, transparent); --ds-white-15: color-mix(in srgb, var(--ds-white) 15%, transparent); --ds-white-40: color-mix(in srgb, var(--ds-white) 40%, transparent); --ds-black-5: color-mix(in srgb, #000 5%, transparent); --ds-black-8: color-mix(in srgb, #000 8%, transparent); --ds-black-10: color-mix(in srgb, #000 10%, transparent); --ds-black-12: color-mix(in srgb, #000 12%, transparent); --ds-black-15: color-mix(in srgb, #000 15%, transparent); /* ── Type families ── */ --ds-heading: 'Fraunces', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --ds-heading-display: 'Fraunces', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; /* Optional display variant. Falls back to heading. */ --ds-body-font: 'Hanken Grotesk', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; /* ── Font weights ── */ --ds-fw-regular: 400; --ds-fw-semibold: 600; --ds-fw-bold: 700; /* ── Generic size scale ── */ --ds-fs-xs: 0.875rem; --ds-fs-sm: 0.875rem; --ds-fs-base: 1rem; --ds-fs-md: 1.125rem; --ds-fs-lg: 1.25rem; --ds-fs-xl: 1.5rem; --ds-fs-2xl: 2rem; --ds-fs-3xl: 2.5rem; --ds-fs-4xl: 3.5rem; /* ── Semantic heading sizes ── */ --ds-h1: 3.5rem; /* Hero / display heading. */ --ds-h2: 2.625rem; /* Section heading. */ --ds-h3: 2rem; /* Sub-section heading, card titles. */ --ds-h4: 1.375rem; /* FAQ questions, accordion titles. */ --ds-h5: 1rem; /* Eyebrow / small caps. */ --ds-h1-mobile: 2.5rem; --ds-h2-mobile: 2rem; /* ── Line heights ── */ --ds-lh-tight: 1; --ds-lh-heading: 1.2; --ds-lh-loose: 1.4; --ds-lh-body: 1.5; /* ── Letter spacing ── */ --ds-ls-tight: -0.01em; --ds-ls-normal: 0; --ds-ls-wide: 0.06em; --ds-ls-eyebrow: 0.18em; /* ── Spacing ── */ --ds-space-xs: 0.25rem; --ds-space-sm: 0.5rem; --ds-space-md: 1rem; --ds-space-lg: 1.5rem; --ds-space-xl: 2rem; --ds-space-2xl: 3rem; --ds-space-3xl: 5rem; --ds-section-pad: clamp(3rem, 6vw, 5rem); /* Section vertical padding (raw CSS value, not converted). */ /* ── Radius ── */ --ds-radius-sm: 4px; --ds-radius-md: 8px; --ds-radius-lg: 16px; --ds-radius-image: 8px; /* Hero + content imagery. Some brands go 30+, some go 8. */ --ds-radius-full: 9999px; /* ── Shadows ── */ --ds-shadow-sm: 0 1px 2px var(--ds-black-5); --ds-shadow-md: 0 4px 12px var(--ds-black-8); --ds-shadow-lg: 0 10px 30px var(--ds-black-12); --ds-shadow-xl: 0 20px 50px var(--ds-black-15); --ds-shadow-up-md: 0 -4px 12px var(--ds-black-10); /* Upward shadow for the sticky mobile bar. */ /* ── Transitions ── */ --ds-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ds-transition-fast: 0.15s var(--ds-ease); --ds-transition-base: 0.3s var(--ds-ease); --ds-transition-slow: 0.6s var(--ds-ease); /* ── Layout ── */ --ds-container: 1200px; /* Max content width in px. */ --ds-container-narrow: 720px; /* Long-form / legal / prose width. */ --ds-container-wide: 1400px; /* Galleries, wide heroes. */ --ds-header-height: 72px; /* Sticky header height in px. */ --ds-dropdown-width: 240px; /* Header dropdown min-width. */ --ds-dropdown-wide-width: 480px; /* Wide (multi-column) header dropdown min-width. */ --ds-tap-target: 44px; /* Minimum touch target (WCAG 2.5.5). */ /* ── Icon sizes ── */ --ds-icon-xs: 12px; --ds-icon-sm: 16px; --ds-icon-md: 24px; --ds-icon-lg: 32px; --ds-icon-xl: 40px; }