/* =========================================== Generated by ~/component-library/tokens/build-css.php Source: tokens.json Generated: 2026-07-21T04:47:49+00:00 DO NOT EDIT — edit tokens.json and rebuild. =========================================== */ :root { /* ── Brand scales ── */ --ds-brand-primary-50: #F0F5FA; --ds-brand-primary-100: #DAE5F1; --ds-brand-primary-200: #B4CBE4; --ds-brand-primary-300: #80A7D1; --ds-brand-primary-500: #16293D; /* ★ Supplied brand anchor. */ --ds-brand-primary-600: #132436; --ds-brand-primary-700: #112030; --ds-brand-primary-800: #0F1C2A; --ds-brand-primary-900: #0E1C2B; --ds-brand-accent-50: #FEFAEB; --ds-brand-accent-100: #FDF4CE; --ds-brand-accent-200: #FCE89C; --ds-brand-accent-300: #F9D957; --ds-brand-accent-500: #F7CA17; /* ★ Supplied brand anchor. */ --ds-brand-accent-600: #D4AB07; --ds-brand-accent-700: #AC8B06; --ds-brand-accent-800: #846A05; --ds-brand-accent-900: #635003; /* ── Neutrals ── */ --ds-neutral-white: #FFFFFF; --ds-neutral-paper: #FAFAF9; /* Default site background. */ --ds-neutral-ink: #0E0B1A; /* Headings, highest emphasis. */ --ds-neutral-body: #333044; /* Default body text. */ --ds-neutral-muted: #6A6378; /* Captions, metadata. */ --ds-neutral-line: #E4E1E9; /* Borders, dividers. */ --ds-neutral-line-soft: #F0EDF3; /* 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-accent-ink: var(--ds-brand-primary-900); /* readable navy text on bright gold CTAs */ --ds-accent-on-dark: var(--ds-brand-accent-500); /* accent-as-text on dark bands: bright gold */ --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: 'Sora', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --ds-heading-display: 'Sora', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; /* Optional display variant. Falls back to heading. */ --ds-body-font: 'Inter', 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: 16px; /* 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), 0 0 0 1px var(--ds-black-5); /* Subtle elevation + hairline ring (replaces a 1px border). */ --ds-shadow-md: 0 1px 2px var(--ds-black-5), 0 2px 6px var(--ds-black-5), 0 0 0 1px var(--ds-black-8); /* Card resting. Layered light, not one drop shadow. */ --ds-shadow-lg: 0 2px 4px var(--ds-black-5), 0 8px 16px var(--ds-black-8), 0 16px 32px var(--ds-black-8), 0 0 0 1px var(--ds-black-8); /* Card hover / lifted. */ --ds-shadow-xl: 0 4px 8px var(--ds-black-5), 0 12px 24px var(--ds-black-8), 0 24px 48px var(--ds-black-10), 0 0 0 1px var(--ds-black-8); /* Modal / hero panel. */ --ds-shadow-up-md: 0 -4px 12px var(--ds-black-10); /* Upward shadow for the sticky mobile bar. */ /* ── Transitions ── */ --ds-ease: cubic-bezier(0.22, 1, 0.36, 1); /* House default ease. Soft settle, never the browser-default ease. */ --ds-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Overshoot curve for pops — badges, chips, things that should bounce in. */ --ds-transition-fast: 0.15s var(--ds-ease); --ds-transition-base: 0.3s var(--ds-ease); --ds-transition-slow: 0.6s var(--ds-ease); --ds-duration-fast: 150ms; /* Raw duration for utilities that compose their own duration + ease (press, blur-in). */ --ds-duration-normal: 200ms; --ds-duration-slow: 280ms; /* ── Layout ── */ --ds-container: 1440px; /* Max content width in px (wider desktop measure). */ --ds-container-narrow: 720px; /* Long-form / legal / prose width. */ --ds-container-wide: 1600px; /* Galleries, wide heroes. Stays above --ds-container. */ --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; }