/* ========================================================= Tokens — Manzo design system Foundation: warm paper neutrals; ink near-black with warm undertone; one brand red (#e41f21) reserved for CTAs/identity; one accent orange (#f08019) reserved for stock & urgency. Depth: borders only. Hue: single warm hue, lightness shifts only. Theme model: - `:root` carries the light (warm-paper) tokens. Default. - `[data-theme="dark"]` forces dark, regardless of system. - `@media (prefers-color-scheme: dark)` swaps the same dark tokens for `[data-theme="auto"]` (and for documents with no attribute, as a defensive fallback if PHP fails to emit one). - `[data-theme="light"]` does nothing extra: :root already paints light. The PHP cookie-read in inc/theme-toggle.php emits one of `auto|light|dark` on server-side, so the resolution happens before the first paint (no FOUC). The toggle JS only cycles the attribute on click. ========================================================= */ :root { /* Surfaces — warm paper, not cold steel */ --paper: #FAFAF7; /* canvas */ --paper-2: #F3F1EB; /* raised: cards, header, dropdowns */ --paper-3: #E9E6DD; /* sunken: inputs, code chips */ --paper-ink: #1E1E1E; /* inverse surface (utility bar, footer, trust bar) */ /* Text hierarchy — four levels, all from the ink */ --ink-1: #1E1E1E; /* primary */ --ink-2: #494845; /* secondary */ --ink-3: #7A7872; /* tertiary / metadata */ --ink-4: #B0ADA4; /* muted / placeholder */ --ink-on-dark: #F2F0EA; /* primary on dark surfaces (utility bar, footer) */ /* Borders — low-opacity ink, four levels */ --border-soft: rgba(30,30,30,0.06); --border: rgba(30,30,30,0.12); --border-strong: rgba(30,30,30,0.22); --border-focus: #E41F21; /* Borders that sit *inside* always-dark surfaces (utility bar, footer). Light-ink-on-dark instead of dark-ink-on-light. Stays the same in dark mode because the surface beneath it stays a dark band. */ --border-on-dark-soft: rgba(255,255,255,0.06); --border-on-dark: rgba(255,255,255,0.12); --border-on-dark-strong: rgba(255,255,255,0.22); /* Brand & semantic — every color earns its place */ --brand: #E41F21; /* primary CTAs, wordmark, active fitment */ --brand-ink: #B81618; /* hover/active deepen */ --brand-tint: #FBE7E7; /* very subtle wash for selected states */ --accent: #F08019; /* stock / "spedizione oggi" / hot deal */ --accent-ink: #C46410; --accent-tint: #FDEEDD; --success: #2F7A3F; /* "in magazzino" — desaturated to sit beside the warm palette */ --warning: #C46410; /* aliases accent-ink intentionally */ --danger: #B81618; /* aliases brand-ink intentionally */ /* Spacing — 4px base, tight */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 48px; --s-9: 64px; --s-10: 96px; /* Radius — sharp = technical = trustworthy */ --r-1: 2px; --r-2: 4px; --r-3: 6px; /* cap — never rounder than this */ /* Typography */ --ff-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ff-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; --t-xs: 11px; --lh-xs: 1.4; --t-sm: 13px; --lh-sm: 1.5; --t-base: 15px; --lh-base: 1.55; --t-md: 17px; --lh-md: 1.4; --t-lg: 22px; --lh-lg: 1.25; --t-xl: 32px; --lh-xl: 1.15; --t-2xl: clamp(36px, 5.2vw, 56px); --lh-2xl: 1.04; /* Tracking — tight on display, loose on micro labels */ --tr-tight: -0.02em; --tr-label: 0.06em; --tr-micro: 0.10em; /* Controls (dedicated, not reusing surface tokens) */ --ctl-bg: #FFFFFF; --ctl-bg-sunken: var(--paper-3); --ctl-border: rgba(30,30,30,0.18); --ctl-border-h: rgba(30,30,30,0.34); /* Media well — backdrop for transparent product PNGs. In light it's just paper-2 (warm raised surface) since `mix-blend-mode: multiply` carries soft edges nicely. In dark it shifts to a near-light "photo paper" tint so PNGs mastered against light still read; the blend mode keeps the trick honest on either background. */ --media-frame: var(--paper-2); --media-frame-border: var(--border-soft); /* Motion — fast, deceleration easing only */ --ease: cubic-bezier(0.2, 0.6, 0.2, 1); --d-1: 120ms; --d-2: 200ms; /* WooCommerce semantic overrides. WC core ships --wc-primary: #720eec (vibrant purple). Without these overrides every WC .button.alt — checkout CTA, place-order, "apply coupon" — inherits that purple and fights the brand red. Re-pointing the variables here turns the whole WC button system into Rosso Manzo without hunting selectors. */ --woocommerce: #E41F21; --wc-primary: #E41F21; --wc-primary-text: #FFFFFF; --wc-secondary: #F3F1EB; --wc-secondary-text: #1E1E1E; --wc-content-bg: #FAFAF7; --wc-form-border-color: rgba(30,30,30,0.18); --wc-form-border-radius: 4px; --wc-form-border-width: 1px; } /* ========================================================= Dark theme — explicit override. Single warm hue, lightness shifts only (no cold neutrals). Hierarchy is preserved by *lifting* dark surfaces (paper-2-dark > paper-dark) instead of inverting the light ladder. The always-dark band (utility bar, footer) becomes a *raised* band slightly lighter than canvas, so it stays distinguishable in a dark page. Brand red and accent orange shift to oklch(63%) / oklch(74%) with reduced chroma. Same identity, calibrated for AA on dark surfaces. ========================================================= */ [data-theme="dark"] { /* Surfaces — warm dark, hue 80° preserved, lightness only */ --paper: oklch(13% 0.010 80); /* canvas, warm near-black */ --paper-2: oklch(17% 0.012 80); /* raised: hero finder panel, header */ --paper-3: oklch(22% 0.014 80); /* sunken: code chips, input wells */ --paper-ink: oklch(19% 0.013 80); /* lifted band: utility bar, footer, trust bar, cart sticky */ /* Text hierarchy — inverted ramp */ --ink-1: oklch(94% 0.007 80); --ink-2: oklch(75% 0.005 80); --ink-3: oklch(58% 0.005 80); --ink-4: oklch(38% 0.006 80); --ink-on-dark: oklch(94% 0.007 80); /* used on the lifted band — same as ink-1 in dark */ /* Borders — light-tinted ink-rgba on dark surfaces. Slightly more visible than light mode (white-on-dark contrasts more than dark-on-light at equal alpha, but the eye still wants more line in dark UIs). */ --border-soft: rgba(242,240,234,0.08); --border: rgba(242,240,234,0.14); --border-strong: rgba(242,240,234,0.24); --border-focus: oklch(63% 0.205 27); /* On-dark borders (inside utility bar / footer) stay white-rgba in both modes. */ /* Brand & accent — lifted lightness, reduced chroma. AA against dark surfaces. */ --brand: oklch(63% 0.205 27); --brand-ink: oklch(70% 0.180 27); /* hover lightens in dark (vs deepens in light) */ --brand-tint: oklch(24% 0.055 27); /* dark warm-red wash for selected fitment state */ --accent: oklch(74% 0.155 50); --accent-ink: oklch(80% 0.140 50); --accent-tint: oklch(24% 0.050 60); --success: oklch(62% 0.135 145); --warning: oklch(80% 0.140 50); --danger: oklch(70% 0.180 27); /* Controls — inputs become *raised* dark wells (lighter than canvas), so they feel interactive against the page. */ --ctl-bg: oklch(17% 0.012 80); --ctl-bg-sunken: oklch(22% 0.014 80); --ctl-border: rgba(242,240,234,0.20); --ctl-border-h: rgba(242,240,234,0.40); /* Media well becomes a near-light "photo paper" frame, so transparent PNGs mastered against light surfaces still read through multiply. */ --media-frame: oklch(85% 0.012 80); --media-frame-border: rgba(30,30,30,0.10); /* WooCommerce bridge */ --woocommerce: oklch(63% 0.205 27); --wc-primary: oklch(63% 0.205 27); --wc-primary-text: #FFFFFF; --wc-secondary: oklch(17% 0.012 80); --wc-secondary-text: oklch(94% 0.007 80); --wc-content-bg: oklch(13% 0.010 80); --wc-form-border-color: rgba(242,240,234,0.20); color-scheme: dark; } /* Auto mode — defer to the system. Also catches documents with no data-theme attribute, so a missing cookie doesn't trap system-dark users on the light palette. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --paper: oklch(13% 0.010 80); --paper-2: oklch(17% 0.012 80); --paper-3: oklch(22% 0.014 80); --paper-ink: oklch(19% 0.013 80); --ink-1: oklch(94% 0.007 80); --ink-2: oklch(75% 0.005 80); --ink-3: oklch(58% 0.005 80); --ink-4: oklch(38% 0.006 80); --ink-on-dark: oklch(94% 0.007 80); --border-soft: rgba(242,240,234,0.08); --border: rgba(242,240,234,0.14); --border-strong: rgba(242,240,234,0.24); --border-focus: oklch(63% 0.205 27); --brand: oklch(63% 0.205 27); --brand-ink: oklch(70% 0.180 27); --brand-tint: oklch(24% 0.055 27); --accent: oklch(74% 0.155 50); --accent-ink: oklch(80% 0.140 50); --accent-tint: oklch(24% 0.050 60); --success: oklch(62% 0.135 145); --warning: oklch(80% 0.140 50); --danger: oklch(70% 0.180 27); --ctl-bg: oklch(17% 0.012 80); --ctl-bg-sunken: oklch(22% 0.014 80); --ctl-border: rgba(242,240,234,0.20); --ctl-border-h: rgba(242,240,234,0.40); --media-frame: oklch(85% 0.012 80); --media-frame-border: rgba(30,30,30,0.10); --woocommerce: oklch(63% 0.205 27); --wc-primary: oklch(63% 0.205 27); --wc-primary-text: #FFFFFF; --wc-secondary: oklch(17% 0.012 80); --wc-secondary-text: oklch(94% 0.007 80); --wc-content-bg: oklch(13% 0.010 80); --wc-form-border-color: rgba(242,240,234,0.20); color-scheme: dark; } } :root { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } /* ========================================================= Theme transition — only during the click->flip window. The toggle JS adds .mz-theme-transitioning to for ~200ms so the whole tree cross-fades color/background/border instead of snapping. The class is removed automatically so per-element hover transitions stay clean at rest. `prefers-reduced-motion` users get no transition, ever. ========================================================= */ .mz-theme-transitioning, .mz-theme-transitioning *, .mz-theme-transitioning *::before, .mz-theme-transitioning *::after { transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1), color 160ms cubic-bezier(0.22, 1, 0.36, 1), border-color 160ms cubic-bezier(0.22, 1, 0.36, 1), fill 160ms cubic-bezier(0.22, 1, 0.36, 1), stroke 160ms cubic-bezier(0.22, 1, 0.36, 1) !important; } @media (prefers-reduced-motion: reduce) { .mz-theme-transitioning, .mz-theme-transitioning *, .mz-theme-transitioning *::before, .mz-theme-transitioning *::after { transition: none !important; } }