/* ============================================================================ Happy Monday — design tokens (theme layer) Ported from design-system/variant-b/tokens.css. Raw brand hex now lives ONLY in theme.json; the 9 role colours below resolve to the theme.json colour presets, and the type families to the theme.json font-family presets. Every derived tint, semantic role, chrome hook, type scale, spacing, radius and motion value is kept literal, so any prototype CSS using --hm-* works unchanged and no brand hex appears outside theme.json. ============================================================================ */ :root { /* ---- palette (raw, ROLE-based) → theme.json colour presets -------------- Named by role, NOT by hue. 8 independent knobs: 3 backgrounds, 2 CTAs, 2 accents, 1 ink. Values come from theme.json (the only place raw hex lives). */ --hm-bg-1: var(--wp--preset--color--bg-1); /* primary background — page */ --hm-bg-2: var(--wp--preset--color--bg-2); /* secondary background — panels / bands */ --hm-bg-3: var(--wp--preset--color--bg-3); /* third background — top announcement bar */ --hm-bg-4: var(--wp--preset--color--bg-4); /* fourth background — feature bar (deep) */ --hm-cta-1: var(--wp--preset--color--cta-1); /* primary CTA — buttons */ --hm-cta-2: var(--wp--preset--color--cta-2); /* secondary CTA — secondary buttons */ --hm-accent-1: var(--wp--preset--color--accent-1); /* primary accent */ --hm-accent-2: var(--wp--preset--color--accent-2); /* secondary accent */ --hm-ink: var(--wp--preset--color--ink); /* text / ink */ /* ---- derived tints & alpha --------------------------------------------- Each soft/deep tint derives ONLY from its own base (mixed with the neutral white/black keyword), so one slot never bleeds into another's role. */ --hm-bg-1-deep: color-mix(in srgb, var(--hm-bg-1) 93%, black); /* deeper primary-bg panel */ --hm-bg-2-soft: color-mix(in srgb, var(--hm-bg-2) 55%, white); /* pale secondary-bg panel */ --hm-cta-1-soft: color-mix(in srgb, var(--hm-cta-1) 55%, white); /* washed primary-CTA band */ --hm-ink-soft: rgba(0 0 0 / 0.62); /* muted body text = ink at alpha */ --hm-paper: var(--hm-bg-1); /* card/frame surface = primary bg */ --hm-shadow: rgba(0 0 0 / 0.14); --hm-shadow-soft: rgba(0 0 0 / 0.08); --hm-btn-shadow: rgba(0 0 0 / 0.20); /* ---- semantic roles ----------------------------------------------------- */ --hm-bg: var(--hm-bg-1); --hm-text: var(--hm-ink); --hm-text-muted: var(--hm-ink-soft); --hm-cta: var(--hm-cta-1); /* primary buttons */ --hm-cta-text: var(--hm-ink); /* readable text on the light primary CTA */ --hm-line: rgba(0 0 0 / 0.14); --hm-accent: var(--hm-accent-1); /* default italic accent */ --hm-accent-pink: var(--hm-accent-1); /* chrome hooks (consumed by the chrome section of style.css) Every hook below is overridable live from Customizer → Happy Monday → Header & footer colors (emitted at :root by hm_chrome_colors_css()). Each one chains to a role token, so leaving a control unset is a visual no-op. Link hooks default to their band's text colour, hover defaults to link. */ --hm-panel-soft: var(--hm-cta-1-soft); --hm-chrome-border: rgba(0 0 0 / 0.12); --hm-announce-bg: var(--hm-bg-3); /* top bar uses the 3rd background */ --hm-announce-text: var(--hm-ink); --hm-nav-bg: var(--hm-bg-1); /* sticky nav sits on the page ground */ --hm-nav-text: var(--hm-ink); --hm-nav-link: var(--hm-nav-text); --hm-nav-link-hover: var(--hm-nav-link); --hm-footer-bg: var(--hm-ink); --hm-footer-text: var(--hm-bg-1); --hm-footer-link: var(--hm-footer-text); --hm-footer-link-hover: var(--hm-footer-link); --hm-switcher-bg: var(--hm-paper); /* ---- type families → theme.json font-family presets --------------------- */ --hm-font-head: var(--wp--preset--font-family--fraunces); --hm-font-body: var(--wp--preset--font-family--dm-sans); /* eyebrow/price/label roles (set font-style/weight in style.css). */ --hm-font-script: var(--wp--preset--font-family--dm-sans); /* header emphasis (.hm-accent) uses a handwritten script. */ --hm-font-hand: var(--wp--preset--font-family--caveat); /* ---- per-role type controls (edited by the font picker) ------------------ scale = size multiplier (1 = 100%); weight = font-weight. Head scale drives the display tiers, body scale the base text, label scale the eyebrows/ labels, emph scale the handwritten accent. */ --hm-head-scale: 0.9; --hm-head-weight: 600; --hm-body-scale: 1.1; --hm-body-weight: 400; --hm-label-scale: 0.95; --hm-label-weight: 800; --hm-emph-scale: 0.7; --hm-emph-weight: 600; /* ---- fluid type scale (each tier scaled by its role's size control) ------ */ --hm-fs-sm: calc(clamp(0.8rem, 0.76rem + 0.2vw, 0.9rem) * var(--hm-body-scale)); --hm-fs-base: calc(clamp(1rem, 0.95rem + 0.25vw, 1.1rem) * var(--hm-body-scale)); --hm-fs-lg: calc(clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem) * var(--hm-label-scale)); --hm-fs-xl: calc(clamp(1.5rem, 1.25rem + 1.2vw, 2.15rem) * var(--hm-head-scale)); --hm-fs-2xl: calc(clamp(2rem, 1.55rem + 2.2vw, 3.25rem) * var(--hm-head-scale)); --hm-fs-3xl: calc(clamp(2.6rem, 1.9rem + 3.4vw, 4.5rem) * var(--hm-head-scale)); --hm-fs-script: calc(clamp(1.25rem, 1.05rem + 0.9vw, 1.85rem) * var(--hm-label-scale)); /* ---- spacing scale ------------------------------------------------------ */ --hm-sp-1: clamp(0.5rem, 0.4rem + 0.5vw, 0.85rem); --hm-sp-2: clamp(1rem, 0.8rem + 1vw, 1.6rem); --hm-sp-3: clamp(1.75rem, 1.3rem + 2.2vw, 3rem); --hm-sp-4: clamp(3rem, 2.2rem + 3.5vw, 5.5rem); --hm-sp-5: clamp(4.5rem, 3.2rem + 5vw, 8rem); /* ---- radii -------------------------------------------------------------- */ --hm-radius-sm: 6px; --hm-radius: 12px; --hm-radius-lg: 22px; --hm-radius-pill: 999px; /* ---- motion tuning (bouncy overshoot) ----------------------------------- */ --fx-dur: .6s; --fx-ease: cubic-bezier(.34, 1.56, .64, 1); --fx-marquee-dur: 22s; }