/* ============================================================ Dot Experience — Design tokens ============================================================ Ported verbatim from aph-v27-next/app/globals.css (the :root and [data-theme] blocks only — base resets, utilities, and Tailwind directives from the source file are NOT included here; they belong to the Next.js prototype, not this theme). These custom-property names and the three theme-variant selectors (default / high-contrast / dark) are a shared public contract with the accessibility-preferences plugin (built separately), which toggles [data-theme] on at runtime and applies continuous tokens (--font-scale, letter-spacing) as inline styles. DO NOT rename these variables or the [data-theme] values — the plugin depends on these exact names. Values may be themed here; everything else in this theme's CSS should reference these via var(--token-name) so runtime overrides keep working. ============================================================ */ :root { /* Color — default editorial theme (off-white / jet black) */ --bg: #faf8f2; --surface: #ffffff; --ink: #0b0b0b; --muted: #6b6760; --line: rgba(11, 11, 11, 0.08); --accent: #0b0b0b; /* jet black — strictly monochrome model */ --accent-ink: #faf8f2; /* off-white text/icon on jet accent */ --placeholder-stripe: rgba(11, 11, 11, 0.08); --placeholder-base: rgba(11, 11, 11, 0.035); --focus: #0b0b0b; /* Radius tokens — generous, nothing square */ --r-sm: 12px; --r-md: 20px; --r-lg: 28px; --r-xl: 40px; /* Type — fluid scale. --font-scale is applied once, globally, via the `html { font-size: ... }` rule below; every rem-based value in this theme (these steps included, since clamp()'s rem components are root- relative) inherits it automatically through the rem cascade. Do NOT also multiply these clamp()s by var(--font-scale) directly — that would double-apply the scale on top of the rem inheritance once something starts consuming --step-*. (Confirmed as of this pass that nothing in this theme's CSS/patterns/templates consumes --step--1 through --step-5 yet — they were ported but never wired up — so this is a latent-bug fix, not a behavior change.) */ --font-scale: 1; --letter-spacing-display: -0.02em; /* Baseline for the accessibility-preferences plugin's live override. The plugin sets this as an inline style on (e.g. "0.03em") when a visitor picks a wider-letter-spacing profile; 0 matches the original app's default/no-preference fallback. */ --letter-spacing-body: 0; --link-decoration: none; --step--1: clamp(0.82rem, 0.78rem + 0.2vw, 0.95rem); --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem); --step-2: clamp(1.5rem, 1.3rem + 1vw, 2rem); --step-3: clamp(2rem, 1.6rem + 2vw, 3rem); --step-4: clamp(2.6rem, 2rem + 3.2vw, 4.5rem); --step-5: clamp(3.2rem, 2.4rem + 4.5vw, 6rem); /* Motion */ --motion-fast: 160ms; --motion-med: 300ms; --motion-slow: 520ms; --ease: cubic-bezier(0.22, 1, 0.36, 1); /* Shadow scale — reserved for floating/overlay UI only (dropdowns, popovers, drawers, modals). Never apply these to resting cards, sections, or grid tiles — those use a 1px solid var(--line) hairline border instead (see base.css, "Borders not shadows"). Blur/spread/opacity scale with z-order/urgency: dropdown < popover < drawer < modal. Consuming rules live in base.css (.shadow-* utility classes) and in the per-surface stylesheets that already have overlay UI (woocommerce-mini-cart.css's drawer, style.css's search-suggestions dropdown). */ --shadow-dropdown: 0 24px 50px rgba(0, 0, 0, 0.1); --shadow-popover: 0 12px 32px rgba(0, 0, 0, 0.16); --shadow-drawer: -24px 0 70px rgba(0, 0, 0, 0.22); --shadow-modal: 0 30px 90px rgba(0, 0, 0, 0.35); } /* ---- High contrast: pure black on pure white ---- */ [data-theme="high-contrast"] { --bg: #ffffff; --surface: #ffffff; --ink: #000000; --muted: #1a1a1a; --line: rgba(0, 0, 0, 0.55); --accent: #000000; --accent-ink: #ffffff; --placeholder-stripe: rgba(0, 0, 0, 0.32); --placeholder-base: rgba(0, 0, 0, 0.06); --focus: #000; } /* ---- Dark — monochrome (off-white on jet) ---- */ [data-theme="dark"] { --bg: #0d0e10; --surface: #17191c; --ink: #f4f2ec; --muted: #a4a098; --line: rgba(244, 242, 236, 0.12); --accent: #f4f2ec; /* off-white accent */ --accent-ink: #0d0e10; /* jet text/icon on accent */ --placeholder-stripe: rgba(244, 242, 236, 0.12); --placeholder-base: rgba(244, 242, 236, 0.04); --focus: #f4f2ec; } /* ============================================================ Consuming rules ============================================================ The tokens above were ported from aph-v27-next, but nothing in this theme actually read several of them yet. These rules wire the live, plugin-driven tokens (--font-scale, --letter-spacing-body, --link-decoration, [data-motion]) to real elements so the accessibility-preferences plugin's wizard has an observable effect. ============================================================ */ /* Font scale — applied once, at the root, so every rem-based value in the theme (WordPress's fluid preset font sizes, the --step-* tokens above, spacing, etc.) scales consistently through the rem cascade. Do not also apply --font-scale anywhere else multiplicatively. */ html { font-size: calc(100% * var(--font-scale, 1)); } /* Letter spacing — plugin sets --letter-spacing-body inline on ; 0 (defined in :root above) is the no-preference baseline. */ body { letter-spacing: var(--letter-spacing-body, 0); } /* Link decoration — plugin toggles this between "underline" and "none". Loads before style.css's `a { text-decoration-color / -thickness; text-underline-offset }` rule (see functions.php dependency order), so those longhand refinements are layered on top of whichever line style is chosen here rather than being reset by it. */ a { text-decoration: var(--link-decoration, none); } /* Reduced motion — the plugin's explicit choice (data-motion="reduce") always takes precedence. When a visitor hasn't run the wizard yet (no data-motion attribute at all), fall back to the OS-level prefers-reduced-motion setting instead of assuming motion is fine. */ @media (prefers-reduced-motion: reduce) { html:not([data-motion]) *, html:not([data-motion]) *::before, html:not([data-motion]) *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }