/* ============================================================ MightyLoc token bridge ============================================================ theme.json is the single source of truth. WordPress emits its tokens as --wp--preset--* and --wp--custom--*. The locked design system (and every component ported from the claude.ai/design mockup) refers to short names like --color-brand-blue, --space-5, --ease-spring. This file aliases those short names onto the WordPress variables so design CSS works unchanged. Do NOT hard-code hex/sizes here; only alias. Edit values in theme.json. ------------------------------------------------------------ */ :root { /* ---------- Brand + neutrals ---------- */ --color-brand-blue: var(--wp--preset--color--brand-blue); --color-brand-blue-deep: var(--wp--preset--color--brand-blue-deep); --color-brand-blue-mid: var(--wp--preset--color--brand-blue-mid); --color-brand-red: var(--wp--preset--color--brand-red); --color-brand-red-deep: var(--wp--preset--color--brand-red-deep); --neutral-50: var(--wp--preset--color--neutral-50); --neutral-100: var(--wp--preset--color--neutral-100); --neutral-200: var(--wp--preset--color--neutral-200); --neutral-300: var(--wp--preset--color--neutral-300); --neutral-400: var(--wp--preset--color--neutral-400); --neutral-500: var(--wp--preset--color--neutral-500); --neutral-600: var(--wp--preset--color--neutral-600); --neutral-700: var(--wp--preset--color--neutral-700); --neutral-800: var(--wp--preset--color--neutral-800); --neutral-900: var(--wp--preset--color--neutral-900); /* ---------- Semantic ---------- */ --surface-page: var(--wp--preset--color--neutral-50); --surface-elevated: var(--wp--preset--color--white); --surface-overlay: rgba(25, 22, 64, 0.72); --text-primary: var(--wp--preset--color--neutral-900); --text-secondary: var(--wp--preset--color--neutral-600); --text-on-brand: var(--wp--preset--color--neutral-50); --border-subtle: var(--wp--preset--color--neutral-200); --border-strong: var(--wp--preset--color--neutral-400); --accent-primary: var(--wp--preset--color--brand-blue); --accent-attention: var(--wp--preset--color--brand-red); /* ---------- Type families ---------- */ --font-display: var(--wp--preset--font-family--display); --font-body: var(--wp--preset--font-family--body); --font-mono: var(--wp--preset--font-family--mono); --font-thai: var(--wp--preset--font-family--thai); /* ---------- Type sizes ---------- */ --text-display-1-size: var(--wp--preset--font-size--display-1); --text-display-2-size: var(--wp--preset--font-size--display-2); --text-display-3-size: var(--wp--preset--font-size--display-3); --text-h1-size: var(--wp--preset--font-size--h-1); --text-h2-size: var(--wp--preset--font-size--h-2); --text-h3-size: var(--wp--preset--font-size--h-3); --text-body-lg-size: var(--wp--preset--font-size--body-lg); --text-body-size: var(--wp--preset--font-size--body); --text-caption-size: var(--wp--preset--font-size--caption); --text-eyebrow-size: var(--wp--preset--font-size--eyebrow); /* ---------- Type line-height / tracking ---------- */ --text-display-1-lh: var(--wp--custom--line-height--display1); --text-display-2-lh: var(--wp--custom--line-height--display2); --text-display-3-lh: var(--wp--custom--line-height--display3); --text-h1-lh: var(--wp--custom--line-height--h1); --text-h2-lh: var(--wp--custom--line-height--h2); --text-h3-lh: var(--wp--custom--line-height--h3); --text-body-lh: var(--wp--custom--line-height--body); --text-caption-lh: var(--wp--custom--line-height--caption); --text-eyebrow-lh: var(--wp--custom--line-height--eyebrow); --text-display-1-tr: var(--wp--custom--tracking--display1); --text-display-2-tr: var(--wp--custom--tracking--display2); --text-display-3-tr: var(--wp--custom--tracking--display3); --text-h1-tr: var(--wp--custom--tracking--h1); --text-h2-tr: var(--wp--custom--tracking--h2); --text-eyebrow-tr: var(--wp--custom--tracking--eyebrow); /* ---------- Spacing (4px base) ---------- */ --space-1: var(--wp--preset--spacing--1); --space-2: var(--wp--preset--spacing--2); --space-3: var(--wp--preset--spacing--3); --space-4: var(--wp--preset--spacing--4); --space-5: var(--wp--preset--spacing--5); --space-6: var(--wp--preset--spacing--6); --space-7: var(--wp--preset--spacing--7); --space-8: var(--wp--preset--spacing--8); --space-9: var(--wp--preset--spacing--9); --space-10: var(--wp--preset--spacing--10); /* ---------- Motion ---------- */ --ease-spring: var(--wp--custom--easing--spring); --ease-out: var(--wp--custom--easing--out); --duration-fast: var(--wp--custom--duration--fast); --duration-base: var(--wp--custom--duration--base); --duration-slow: var(--wp--custom--duration--slow); /* ---------- Elevation ---------- */ --shadow-1: var(--wp--custom--shadow--1); --shadow-2: var(--wp--custom--shadow--2); --shadow-3: var(--wp--custom--shadow--3); --shadow-header: var(--wp--custom--shadow--header); /* ---------- Radii ---------- */ --radius-sm: var(--wp--custom--radius--sm); --radius-md: var(--wp--custom--radius--md); --radius-lg: var(--wp--custom--radius--lg); --radius-xl: var(--wp--custom--radius--xl); --radius-pill: var(--wp--custom--radius--pill); /* ---------- Layout ---------- */ --content-max: var(--wp--custom--site--content-max); --content-tight: var(--wp--custom--site--content-tight); --gutter-desktop: var(--wp--custom--site--gutter-desktop); --gutter-mobile: var(--wp--custom--site--gutter-mobile); --header-h: var(--wp--custom--site--header-height); --header-inset: var(--wp--custom--site--header-inset); } /* Honor reduced motion at the token level: zero out durations so any transition/animation referencing them collapses instantly. */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; } }