/*
* Design Tokens
* ─────────────────────────────────────────────────────────────────────────────
* This file extends theme.json tokens — it does not replace them.
* All site-specific custom properties live here at :root.
*
* Naming convention:
* --msk-{category}-{variant}
*
* theme.json tokens are available as:
* --wp--preset--color--{slug}
* --wp--preset--font-size--{slug}
* --wp--preset--spacing--{slug}
* etc.
*
* We reference those presets here to stay in sync.
* If theme.json changes a color, our tokens that reference it update automatically.
* ─────────────────────────────────────────────────────────────────────────────
*/
:root {
/* ── Colour Aliases ──────────────────────────────────────────────────
* Semantic names that map to theme.json palette slugs.
* To adopt a different theme palette, swap the var() references below
* to match the active theme's preset slugs.
*/
--msk-color-brand-primary: var(--wp--preset--color--primary, #1a1a2e);
--msk-color-brand-secondary: var(--wp--preset--color--secondary, #16213e);
--msk-color-accent: var(--wp--preset--color--accent, #991b1b);
--msk-color-surface: var(--wp--preset--color--base, #ffffff);
--msk-color-surface-alt: var(--wp--preset--color--base-2, #f6f6f6);
--msk-color-text-primary: var(--wp--preset--color--contrast, #111111);
--msk-color-text-muted: var(--wp--preset--color--contrast-2, #666666);
--msk-color-border: var(--wp--preset--color--contrast-3, #e0e0e0);
/* ── Emphasis-word accent (optional override hooks) ──────────────────
* Health/clinic pattern headlines colour one emphasised word with the
* Gutenberg core/text-color inline format:
* word
* The word stays per-word editable in the rich-text toolbar. These two
* tokens are NOT assigned a value here on purpose — when undefined, each
* pattern's own fallback colour renders (so service-page stays Maple-red,
* the sage patterns stay sage, etc.). Define ONE of them at :root (child
* theme / Global Styles → Additional CSS) to re-point every emphasis word
* on that background context at once:
* --msk-emphasis: ;
* --msk-emphasis-on-dark: ;
* For WCAG AAA on white, --msk-emphasis: #166534; (7.1:1) is a safe swap
* for the AA-only sage default.
*/
/* ── Gradient Palette ────────────────────────────────────────────────
* Reusable gradients built from token colours.
* One source of truth; use these in component CSS.
*/
--msk-gradient-hero: linear-gradient(
135deg,
var(--msk-color-brand-primary) 0%,
var(--msk-color-brand-secondary) 100%
);
--msk-gradient-accent: linear-gradient(
90deg,
var(--msk-color-accent) 0%,
color-mix(in oklch, var(--msk-color-accent) 70%, var(--msk-color-brand-primary)) 100%
);
--msk-gradient-surface: linear-gradient(
180deg,
var(--msk-color-surface) 0%,
var(--msk-color-surface-alt) 100%
);
/* ── Overlay & Scrim ─────────────────────────────────────────────────
* For hero images, card hovers, modals.
*/
--msk-overlay-dark: rgba(0, 0, 0, 0.45);
--msk-overlay-brand: color-mix(in oklch, var(--msk-color-brand-primary) 75%, transparent);
/* ── Typography Families ─────────────────────────────────────────────
* Maple Site Kit headlines (and the serif numerals) use --msk-serif; the
* lone monospace label uses --msk-mono. Block markup references these via
* the `.msk-serif` utility class (NOT a block `fontFamily` attribute —
* WordPress escapes the `--` in a saved style attribute to `u002du002d`,
* which invalidates the block). The class resolves the var from the
* cascade. Override ONE variable (child theme, Global Styles →
* Additional CSS, or a fonts plugin) to re-point EVERY headline with no
* per-block editing. To follow the active theme, point it at a font-family
* preset, e.g.:
* --msk-serif: var(--wp--preset--font-family--, Georgia, 'Times New Roman', serif);
*/
--msk-serif: Georgia, 'Times New Roman', serif;
--msk-mono: monospace;
/* ── Typography Scale ────────────────────────────────────────────────
* Fluid type using clamp(). Min / preferred / max.
* These extend theme.json font sizes — use for utility classes and
* components where block-level font sizes aren't available.
*/
--msk-font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--msk-font-size-sm: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
--msk-font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
--msk-font-size-md: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
--msk-font-size-lg: clamp(1.375rem, 1.1rem + 1vw, 2rem);
--msk-font-size-xl: clamp(1.75rem, 1.3rem + 1.5vw, 3rem);
--msk-font-size-2xl: clamp(2.25rem, 1.5rem + 2vw, 4rem);
/* ── Line Heights ────────────────────────────────────────────────────*/
--msk-leading-tight: 1.2;
--msk-leading-snug: 1.375;
--msk-leading-normal: 1.6;
--msk-leading-loose: 1.8;
/* ── Letter Spacing ──────────────────────────────────────────────────*/
--msk-tracking-tight: -0.03em;
--msk-tracking-normal: 0;
--msk-tracking-wide: 0.05em;
--msk-tracking-wider: 0.1em;
--msk-tracking-widest: 0.15em;
/* ── Spacing Scale ───────────────────────────────────────────────────
* Maps to a harmonic scale. Use these in component CSS.
* theme.json spacing presets are preferred for block-level spacing.
*/
--msk-space-1: 0.25rem;
--msk-space-2: 0.5rem;
--msk-space-3: 0.75rem;
--msk-space-4: 1rem;
--msk-space-5: 1.25rem;
--msk-space-6: 1.5rem;
--msk-space-8: 2rem;
--msk-space-10: 2.5rem;
--msk-space-12: 3rem;
--msk-space-16: 4rem;
--msk-space-20: 5rem;
--msk-space-24: 6rem;
/* ── Border Radius ───────────────────────────────────────────────────*/
--msk-radius-sm: 0.25rem;
--msk-radius-md: 0.5rem;
--msk-radius-lg: 1rem;
--msk-radius-xl: 1.5rem;
--msk-radius-full: 9999px;
/* ── Shadows ─────────────────────────────────────────────────────────
* Layered shadows for depth. Use sparingly — one level per element.
*/
--msk-shadow-sm:
0 1px 2px rgba(0, 0, 0, 0.06),
0 1px 3px rgba(0, 0, 0, 0.1);
--msk-shadow-md:
0 4px 6px rgba(0, 0, 0, 0.05),
0 10px 15px rgba(0, 0, 0, 0.1);
--msk-shadow-lg:
0 10px 20px rgba(0, 0, 0, 0.08),
0 30px 60px rgba(0, 0, 0, 0.12);
--msk-shadow-accent:
0 4px 20px color-mix(in oklch, var(--msk-color-accent) 35%, transparent);
/* ── Transitions ─────────────────────────────────────────────────────
* Standard easing curves for consistent motion feel.
*/
--msk-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
--msk-ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);
--msk-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--msk-ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--msk-duration-fast: 150ms;
--msk-duration-normal: 250ms;
--msk-duration-slow: 400ms;
--msk-duration-slower: 600ms;
/* ── Z-Index Scale ───────────────────────────────────────────────────
* Named layers prevent stacking context chaos.
*/
--msk-z-base: 0;
--msk-z-raised: 10;
--msk-z-dropdown: 100;
--msk-z-sticky: 200;
--msk-z-overlay: 300;
--msk-z-modal: 400;
--msk-z-toast: 500;
}