/* ========================================================================== CSS CUSTOM PROPERTIES - Design Token System theme.json is the single source of truth for design values: palette, font families, font sizes and spacing are WordPress presets (--wp--preset--*), everything else (extra colors, radii, shadows) is under settings.custom (--wp--custom--*). The short names below (--color-*, --space-*, ...) are aliases so component CSS stays readable. To change a color, size or radius: edit theme.json, not this file. Only transitions, z-index and layout measurements are defined here. ========================================================================== */ :root { /* Core Color Variables - Light Mode (Default) */ --color-base: var(--wp--preset--color--base); --color-surface: var(--wp--preset--color--surface); --color-surface-elevated: var(--wp--preset--color--surface-elevated); --color-surface-higher: var(--wp--custom--color--surface-higher); --color-text-primary: var(--wp--preset--color--text-primary); --color-text-secondary: var(--wp--preset--color--text-secondary); /* Darkened from #9ca3af (2.5:1) - small eyebrows, breadcrumbs, captions and footer copy sit on this token and need 4.5:1 on white/surface/elevated */ --color-text-tertiary: var(--wp--preset--color--text-tertiary); /* Near-white ink for headlines that sit on a dark band (hero, proof band, closing) - replaces the old white->grey gradient-clip that read as washed */ --color-ink-invert: var(--wp--custom--color--ink-invert); /* Faint warm fill for the single focal card in a grid (first service card, featured testimonial, lead bento cell) so a grid isn't all identical boxes */ --color-surface-warm: var(--wp--custom--color--surface-warm); /* Primary Brand Colors - Telescope Orange, plus the Blue/Green from the redesign doc's palette spec (comment [c]) */ --color-accent-orange: var(--wp--preset--color--accent-orange); --color-accent-yellow: var(--wp--preset--color--accent-yellow); --color-accent-orange-rgb: var(--wp--custom--color--accent-orange-rgb); --color-accent-yellow-rgb: var(--wp--custom--color--accent-yellow-rgb); --color-brand-blue: var(--wp--preset--color--brand-blue); --color-brand-blue-rgb: var(--wp--custom--color--brand-blue-rgb); --color-brand-green: var(--wp--preset--color--brand-green); --color-brand-green-rgb: var(--wp--custom--color--brand-green-rgb); /* The theme green, always exactly #528276 - fills, borders, icons and accents */ --color-green-text: var(--color-brand-green); /* Generic accent aliases - several components reference these directly */ --color-accent: var(--color-accent-orange); --color-accent-hover: var(--wp--custom--color--accent-hover); /* Orange used as TEXT. Clients require the brand orange for text, so these roles currently resolve to --color-accent-orange (theme.json, settings.custom .color.accent-text / accent-display). They stay separate tokens so a more accessible shade can be dropped in later in one place: #ac4a16 (4.5:1 on light surfaces) for small text, #da5e1c (3:1) for large display text. Brand orange on white is 2.8:1, which fails WCAG AA at any text size. */ --color-accent-text: var(--wp--custom--color--accent-text); --color-accent-text-hover: var(--wp--custom--color--accent-text-hover); --color-accent-display: var(--wp--custom--color--accent-display); /* Ink on solid orange fills (buttons). White on #e77e46 is 2.8:1; this is 6.3:1 and keeps the brighter brand orange as the fill. */ --color-on-accent: var(--wp--custom--color--on-accent); --color-accent-rgb: var(--color-accent-orange-rgb); --color-border: var(--wp--preset--color--border); /* Status colors (form errors, admin notices) */ --color-error: var(--wp--custom--color--error); --color-error-rgb: var(--wp--custom--color--error-rgb); --color-warning-bg: var(--wp--custom--color--warning-bg); --color-warning-text: var(--wp--custom--color--warning-text); --color-border-hover: rgba(var(--color-accent-orange-rgb), 0.4); /* Typography Scale - Georgia (primary) / Roboto (secondary) per the redesign doc's font spec (comment [j]) */ --font-heading: var(--wp--preset--font-family--heading); --font-body: var(--wp--preset--font-family--body); --font-accent: var(--wp--preset--font-family--heading); --font-size-xs: var(--wp--preset--font-size--xs); --font-size-sm: var(--wp--preset--font-size--sm); --font-size-base: var(--wp--preset--font-size--base); --font-size-md: var(--wp--preset--font-size--md); --font-size-lg: var(--wp--preset--font-size--lg); --font-size-xl: var(--wp--preset--font-size--xl); --font-size-2xl: var(--wp--preset--font-size--2-xl); /* Large sizes are fluid so display type scales with the viewport instead of jumping at breakpoints - keeps headlines confident on every screen */ --font-size-3xl: var(--wp--preset--font-size--3-xl); --font-size-4xl: var(--wp--preset--font-size--4-xl); --font-size-5xl: var(--wp--preset--font-size--5-xl); --font-size-6xl: var(--wp--preset--font-size--6-xl); /* Display type tuning - tighter tracking + leading on the big sizes */ --tracking-tight: -0.03em; --tracking-snug: -0.02em; --leading-display: 1.04; /* Spacing System */ --space-xs: var(--wp--preset--spacing--xs); --space-sm: var(--wp--preset--spacing--sm); --space-md: var(--wp--preset--spacing--md); --space-lg: var(--wp--preset--spacing--lg); --space-xl: var(--wp--preset--spacing--xl); --space-2xl: var(--wp--preset--spacing--2-xl); --space-3xl: var(--wp--preset--spacing--3-xl); --space-4xl: var(--wp--preset--spacing--4-xl); /* Layout */ --container-max: 1280px; --navbar-height: 72px; /* One fluid vertical rhythm every section uses - premium layouts breathe more than the old fixed 4rem/6rem steps allowed */ --section-padding: clamp(4rem, 8vw, 7.5rem); /* Strip of page background between a tinted panel and whatever sits above or below it (page header above, footer below) */ --band-gap: 20px; --section-padding-md: var(--section-padding); --section-padding-lg: var(--section-padding); /* Border Radius */ /* Radius scale: sm/md = inputs and small controls, lg (12) = cards and boxes, xl (16) = large panels, 2xl (24) = the bottom edge of hero bands, full = pills (buttons, tabs). No square corners on framed elements. */ --radius-sm: var(--wp--custom--border-radius--sm); --radius-md: var(--wp--custom--border-radius--md); --radius-lg: var(--wp--custom--border-radius--lg); --radius-xl: var(--wp--custom--border-radius--xl); --radius-2xl: var(--wp--custom--border-radius--2-xl); --radius-full: var(--wp--custom--border-radius--full); /* Shadows - soft, diffuse, low-contrast. Premium reads quiet: wide blur, small offset, low alpha. Values live in theme.json (settings.custom.boxShadow). */ --shadow-sm: var(--wp--custom--box-shadow--sm); --shadow-md: var(--wp--custom--box-shadow--md); --shadow-lg: var(--wp--custom--box-shadow--lg); --shadow-xl: var(--wp--custom--box-shadow--xl); --shadow-glow: var(--wp--custom--box-shadow--glow); /* Transitions */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1); /* Z-Index Scale */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; } /* Dark Band - scoped override for sections that stay dark on the light base (hero, closing CTA, the differentiators band) */ .dark-band { --color-base: var(--wp--custom--color--dark-base); --color-surface: var(--wp--custom--color--dark-surface); --color-surface-elevated: var(--wp--custom--color--dark-surface-elevated); --color-surface-higher: var(--wp--custom--color--dark-surface-higher); --color-text-primary: var(--wp--custom--color--dark-text-primary); --color-text-secondary: var(--wp--custom--color--dark-text-secondary); --color-text-tertiary: var(--wp--custom--color--dark-text-tertiary); --color-accent-text: var(--color-accent-orange); --color-accent-text-hover: var(--wp--custom--color--dark-accent-text-hover); --color-accent-display: var(--color-accent-orange); /* On a dark band the "warm focal" surface is a lifted slate with a warm cast rather than a near-white tint */ --color-surface-warm: var(--wp--custom--color--dark-surface-warm); --color-border: rgba(255, 255, 255, 0.08); /* WordPress core generates .has-*-color utilities bound to these preset variables directly (with !important) - override them too so blocks using backgroundColor/textColor attributes stay legible inside a dark band */ --wp--preset--color--base: var(--color-base); --wp--preset--color--surface: var(--color-surface); --wp--preset--color--surface-elevated: var(--color-surface-elevated); --wp--preset--color--text-primary: var(--color-text-primary); --wp--preset--color--text-secondary: var(--color-text-secondary); --wp--preset--color--text-tertiary: var(--color-text-tertiary); --wp--preset--color--border: var(--color-border); background-color: var(--color-base); color: var(--color-text-primary); }