/* * Design tokens. * * --mkt-primary / --mkt-secondary and their derived shades (-hover, -light, * -tint, -on) are printed inline in by inc/customizer.php * (mkt_output_dynamic_css) BEFORE this file loads, from the admin's two * Customizer color pickers. Everything else — spacing, type scale, neutral * surfaces for light/dark mode — lives here as static tokens. */ :root { /* Fallbacks in case the inline color block hasn't rendered (e.g. this file cached separately). Overridden by the inline block in normal use. */ --mkt-primary: #18c1d9; --mkt-primary-hover: #12a3b8; --mkt-primary-light: #4dd3e6; --mkt-primary-tint: #e8fafc; --mkt-primary-on: #ffffff; --mkt-secondary: #232733; --mkt-secondary-hover: #14161d; --mkt-secondary-light: #3a3f52; --mkt-secondary-tint: #ececee; --mkt-secondary-on: #ffffff; /* Light mode neutrals */ --mkt-bg: #ffffff; --mkt-bg-alt: #f5f6f8; --mkt-surface: #ffffff; --mkt-text: #262a33; --mkt-text-muted: #6b7280; --mkt-border: #e7e9ee; /* Type scale */ --mkt-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --mkt-font-heading: var(--mkt-font-body); --mkt-fs-eyebrow: 0.8125rem; --mkt-fs-body: 1rem; --mkt-fs-h1: clamp(2rem, 4vw, 3rem); --mkt-fs-h2: clamp(1.5rem, 2.6vw, 2rem); --mkt-fs-h3: 1.125rem; /* Spacing / layout */ --mkt-container: 1200px; --mkt-gap: 1.75rem; --mkt-section-pad: clamp(3rem, 6vw, 5.5rem); --mkt-radius: 6px; --mkt-radius-round: 999px; --mkt-shadow: 0 10px 30px rgba(20, 22, 30, 0.08); --mkt-transition: 180ms ease; } /* Dark mode: same primary/secondary hues, different neutral surfaces. Triggered by data-theme="dark" on (see assets/js/main.js). */ :root[data-theme='dark'] { --mkt-bg: #14161d; --mkt-bg-alt: #1b1e28; --mkt-surface: #1e212b; --mkt-text: #eef0f4; --mkt-text-muted: #9aa0ad; --mkt-border: #2c303c; --mkt-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); /* Light tints need to read as dark-surface tints in dark mode instead of near-white, or cards/badges built from -tint vanish into the bg. */ --mkt-primary-tint: color-mix(in srgb, var(--mkt-primary) 18%, var(--mkt-bg-alt)); --mkt-secondary-tint: color-mix(in srgb, var(--mkt-secondary) 35%, var(--mkt-bg-alt)); }