/* * Meridian — Color Scheme Layer * * Wires semantic CSS custom properties to theme.json palette tokens for both * light and dark color schemes. Two triggers are supported with zero JavaScript: * * 1. OS-level: responds automatically to `prefers-color-scheme: dark` * 2. Manual: the `.is-dark-mode` class on overrides the OS setting * so a user-facing toggle can force dark mode independently. * * Semantic properties (--meridian-*) are intentionally separate from the * raw --wp--preset--color--* tokens so downstream CSS can reference a single * property rather than duplicating media-query logic everywhere. * * Raw dark palette values are defined once as --meridian-dark-* on :root and * referenced in both the @media block and the .is-dark-mode block — no * duplicated hex strings. */ /* ------------------------------------------------------------------------- * Step 1 — Raw dark palette, defined once on :root * These are the "source of truth" for dark-mode colours. Downstream blocks * reference these variables rather than repeating hex values. * ---------------------------------------------------------------------- */ :root { --meridian-dark-bg: #111110; --meridian-dark-surface: #1A1A18; --meridian-dark-text: #F0EFE8; --meridian-dark-text-muted: #9E9D96; --meridian-dark-text-subtle: #6B6A63; --meridian-dark-border: #2E2E2B; --meridian-dark-border-strong: #4A4A45; --meridian-dark-accent: #C4A882; --meridian-dark-accent-deep: #D4BB98; --meridian-dark-success: #4D9A72; --meridian-dark-error: #D94F44; --meridian-dark-footer-bg: #0A0A09; --meridian-dark-footer-text: #6B6A63; --meridian-dark-overlay: rgba(0, 0, 0, 0.64); } /* ------------------------------------------------------------------------- * Step 2 — Light scheme defaults (base; applied unconditionally) * ---------------------------------------------------------------------- */ :root { --meridian-bg: var(--wp--preset--color--parchment); --meridian-surface: var(--wp--preset--color--surface); --meridian-text: var(--wp--preset--color--ink); --meridian-text-muted: var(--wp--preset--color--neutral-600); --meridian-text-subtle: var(--wp--preset--color--neutral-400); --meridian-border: var(--wp--preset--color--neutral-200); --meridian-border-strong: var(--wp--preset--color--neutral-400); --meridian-accent: var(--wp--preset--color--accent); --meridian-accent-deep: var(--wp--preset--color--accent-deep); --meridian-success: var(--wp--preset--color--success); --meridian-error: var(--wp--preset--color--error); --meridian-sale: var(--wp--preset--color--sale); /* Component-level aliases */ --meridian-header-bg: transparent; --meridian-header-text: var(--wp--preset--color--ink); --meridian-footer-bg: var(--wp--preset--color--ink); --meridian-footer-text: var(--wp--preset--color--neutral-400); --meridian-card-bg: var(--wp--preset--color--surface); --meridian-card-border: var(--wp--preset--color--neutral-100); --meridian-input-bg: var(--wp--preset--color--surface); --meridian-input-border: var(--wp--preset--color--neutral-200); --meridian-input-text: var(--wp--preset--color--ink); --meridian-overlay-bg: rgba(15, 15, 15, 0.48); } /* ------------------------------------------------------------------------- * Step 3 — Dark scheme: OS-level trigger * Skipped when .is-light-mode is present (manual light-mode override). * ---------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not(.is-light-mode) { --meridian-bg: var(--meridian-dark-bg); --meridian-surface: var(--meridian-dark-surface); --meridian-text: var(--meridian-dark-text); --meridian-text-muted: var(--meridian-dark-text-muted); --meridian-text-subtle: var(--meridian-dark-text-subtle); --meridian-border: var(--meridian-dark-border); --meridian-border-strong: var(--meridian-dark-border-strong); --meridian-accent: var(--meridian-dark-accent); --meridian-accent-deep: var(--meridian-dark-accent-deep); --meridian-success: var(--meridian-dark-success); --meridian-error: var(--meridian-dark-error); --meridian-sale: var(--meridian-dark-error); --meridian-header-bg: transparent; --meridian-header-text: var(--meridian-dark-text); --meridian-footer-bg: var(--meridian-dark-footer-bg); --meridian-footer-text: var(--meridian-dark-footer-text); --meridian-card-bg: var(--meridian-dark-surface); --meridian-card-border: var(--meridian-dark-border); --meridian-input-bg: var(--meridian-dark-surface); --meridian-input-border: var(--meridian-dark-border); --meridian-input-text: var(--meridian-dark-text); --meridian-overlay-bg: var(--meridian-dark-overlay); } } /* ------------------------------------------------------------------------- * Step 4 — Dark scheme: manual class trigger (.is-dark-mode on ) * Overrides OS preference — used by a theme toggle or stored user preference. * References the same --meridian-dark-* raw values, no duplicated hex. * ---------------------------------------------------------------------- */ .is-dark-mode { --meridian-bg: var(--meridian-dark-bg); --meridian-surface: var(--meridian-dark-surface); --meridian-text: var(--meridian-dark-text); --meridian-text-muted: var(--meridian-dark-text-muted); --meridian-text-subtle: var(--meridian-dark-text-subtle); --meridian-border: var(--meridian-dark-border); --meridian-border-strong: var(--meridian-dark-border-strong); --meridian-accent: var(--meridian-dark-accent); --meridian-accent-deep: var(--meridian-dark-accent-deep); --meridian-success: var(--meridian-dark-success); --meridian-error: var(--meridian-dark-error); --meridian-sale: var(--meridian-dark-error); --meridian-header-bg: transparent; --meridian-header-text: var(--meridian-dark-text); --meridian-footer-bg: var(--meridian-dark-footer-bg); --meridian-footer-text: var(--meridian-dark-footer-text); --meridian-card-bg: var(--meridian-dark-surface); --meridian-card-border: var(--meridian-dark-border); --meridian-input-bg: var(--meridian-dark-surface); --meridian-input-border: var(--meridian-dark-border); --meridian-input-text: var(--meridian-dark-text); --meridian-overlay-bg: var(--meridian-dark-overlay); } /* ------------------------------------------------------------------------- * Step 5 — Light scheme: manual class trigger (.is-light-mode on ) * Forces light mode even when OS prefers dark. * ---------------------------------------------------------------------- */ .is-light-mode { --meridian-bg: var(--wp--preset--color--parchment); --meridian-surface: var(--wp--preset--color--surface); --meridian-text: var(--wp--preset--color--ink); --meridian-text-muted: var(--wp--preset--color--neutral-600); --meridian-text-subtle: var(--wp--preset--color--neutral-400); --meridian-border: var(--wp--preset--color--neutral-200); --meridian-border-strong: var(--wp--preset--color--neutral-400); --meridian-accent: var(--wp--preset--color--accent); --meridian-accent-deep: var(--wp--preset--color--accent-deep); --meridian-success: var(--wp--preset--color--success); --meridian-error: var(--wp--preset--color--error); --meridian-sale: var(--wp--preset--color--sale); --meridian-header-bg: transparent; --meridian-header-text: var(--wp--preset--color--ink); --meridian-footer-bg: var(--wp--preset--color--ink); --meridian-footer-text: var(--wp--preset--color--neutral-400); --meridian-card-bg: var(--wp--preset--color--surface); --meridian-card-border: var(--wp--preset--color--neutral-100); --meridian-input-bg: var(--wp--preset--color--surface); --meridian-input-border: var(--wp--preset--color--neutral-200); --meridian-input-text: var(--wp--preset--color--ink); --meridian-overlay-bg: rgba(15, 15, 15, 0.48); } /* ------------------------------------------------------------------------- * Apply semantic properties to document elements * ---------------------------------------------------------------------- */ body { background-color: var(--meridian-bg); color: var(--meridian-text); } /* WooCommerce + block form inputs inherit the scheme */ .woocommerce input[type="text"], .woocommerce input[type="email"], .woocommerce input[type="tel"], .woocommerce input[type="number"], .woocommerce input[type="password"], .woocommerce input[type="search"], .woocommerce textarea, .woocommerce select, .wc-block-components-text-input input, .wc-block-components-select select, .wc-block-components-textarea textarea { background-color: var(--meridian-input-bg); border-color: var(--meridian-input-border); color: var(--meridian-input-text); } /* Product card surfaces */ .wc-block-product-template .wc-block-grid__product { background-color: var(--meridian-card-bg); border-color: var(--meridian-card-border); } /* ------------------------------------------------------------------------- * Accessibility: respect reduced-motion preference * ---------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }