/* ═══════════════════════════════════════════ MĀSON — Theme Variables 4 themes. Switch by adding [data-theme="X"] to . Default = Noir & Gold. ═══════════════════════════════════════════ */ /* ── 1. NOIR & GOLD (default) ── */ :root, [data-theme="noir"] { --primary: #1a1a2e; --primary-light: #2d2d4a; --primary-dark: #0f0f1a; --accent: #c9a96e; --accent-light: #dfc28e; --accent-dark: #b08a4a; --bg: #faf9f6; --bg-alt: #f0eeea; --bg-dark: #1a1a2e; --text: #1a1a2e; --text-secondary: #4a4a5a; --text-muted: #8a8a9a; --text-inverse: #ffffff; --border: #d4d0c8; --border-light: #e8e5de; --success: #2d8a4e; --warning: #d4a017; --error: #c0392b; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 9999px; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.15); --font: 'Inter', system-ui, -apple-system, sans-serif; --dir: ltr; --navbar-bg: rgba(250, 249, 246, 0.92); --card-bg: #ffffff; } /* ── 2. COASTAL BREEZE ── */ [data-theme="coastal"] { --primary: #1b3a4b; --primary-light: #2a5a72; --primary-dark: #0e2633; --accent: #e8985a; --accent-light: #f0b37e; --accent-dark: #c97a3c; --bg: #f7f5f0; --bg-alt: #eef2f3; --bg-dark: #1b3a4b; --text: #1b3a4b; --text-secondary: #3d5a6e; --text-muted: #7a94a5; --text-inverse: #ffffff; --border: #c8d5dc; --border-light: #dfe8ec; --success: #3a9d6a; --warning: #d4a017; --error: #d45040; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --shadow-sm: 0 1px 4px rgba(27, 58, 75, 0.07); --shadow-md: 0 4px 16px rgba(27, 58, 75, 0.1); --shadow-lg: 0 12px 40px rgba(27, 58, 75, 0.14); --navbar-bg: rgba(247, 245, 240, 0.92); --card-bg: #ffffff; } /* ── 3. VERDANT EARTH ── */ [data-theme="verdant"] { --primary: #2c3e2d; --primary-light: #3e5a3f; --primary-dark: #1a261b; --accent: #c4a35a; --accent-light: #d9be7e; --accent-dark: #a68838; --bg: #f6f4ef; --bg-alt: #eae7df; --bg-dark: #2c3e2d; --text: #2c3e2d; --text-secondary: #4a5c4b; --text-muted: #7d8e7e; --text-inverse: #f6f4ef; --border: #c6c1b5; --border-light: #ddd9cf; --success: #498c52; --warning: #c49b2a; --error: #b5443a; --radius-sm: 3px; --radius-md: 6px; --radius-lg: 12px; --shadow-sm: 0 1px 3px rgba(44, 62, 45, 0.08); --shadow-md: 0 4px 14px rgba(44, 62, 45, 0.1); --shadow-lg: 0 10px 36px rgba(44, 62, 45, 0.14); --navbar-bg: rgba(246, 244, 239, 0.93); --card-bg: #ffffff; } /* ── 4. MIDNIGHT ROSE ── */ [data-theme="rose"] { --primary: #1e1e2a; --primary-light: #2e2e40; --primary-dark: #111118; --accent: #d4848c; --accent-light: #e4a4ab; --accent-dark: #b8636c; --bg: #faf8f8; --bg-alt: #f2eced; --bg-dark: #1e1e2a; --text: #1e1e2a; --text-secondary: #4a3f48; --text-muted: #9a8e95; --text-inverse: #ffffff; --border: #d8cdd0; --border-light: #ebe3e5; --success: #5a9e6e; --warning: #d4a55a; --error: #c45050; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 18px; --shadow-sm: 0 1px 4px rgba(30, 30, 42, 0.06); --shadow-md: 0 4px 14px rgba(30, 30, 42, 0.09); --shadow-lg: 0 10px 36px rgba(30, 30, 42, 0.13); --navbar-bg: rgba(250, 248, 248, 0.93); --card-bg: #ffffff; } /* ── RTL override ── */ html[dir="rtl"] { --dir: rtl; } /* ══════════════════════════════════════════════════════════════════════ PHASE 13 — Dark mode. Activated by [data-pb-theme="dark"] on . Each base theme keeps its accent palette but inverts the surface (bg/text/border) so the tenant's brand color stays recognizable. The toggle script in the master layout reads localStorage('pb_theme') early to prevent FOUC. ══════════════════════════════════════════════════════════════════════ */ [data-pb-theme="dark"]:root, [data-pb-theme="dark"][data-theme="noir"] { --bg: #0e0e1a; --bg-alt: #181828; --bg-dark: #08080f; --text: #f0eee5; --text-secondary: #c5bfb0; --text-muted: #8a8579; /* --text-inverse stays light in dark mode: every consumer of this token (.btn-primary, .section-dark, .slide-content, .newsletter, .theme-toggle-btn, .badge-dark, #modal-auth submit, --nav-fg) places text on an always-dark brand surface (--primary / --bg-dark), so it must remain light — not flip with the surface. The previous #1a1a2e collided with --primary. */ --text-inverse: #ffffff; --border: #2c2c40; --border-light: #232336; --navbar-bg: rgba(14, 14, 26, 0.82); --card-bg: #181828; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.55); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.6); } [data-pb-theme="dark"][data-theme="coastal"] { --bg: #0c1e29; --bg-alt: #142b39; --bg-dark: #061320; --text: #e8eef1; --text-secondary: #b3c4cf; --text-muted: #7d96a3; --border: #234253; --border-light: #1a3343; --navbar-bg: rgba(12, 30, 41, 0.84); --card-bg: #142b39; } [data-pb-theme="dark"][data-theme="verdant"] { --bg: #131a14; --bg-alt: #1c2620; --bg-dark: #08110a; --text: #ece8db; --text-secondary: #c2bca8; --text-muted: #8a8676; --border: #2c372e; --border-light: #232c25; --navbar-bg: rgba(19, 26, 20, 0.84); --card-bg: #1c2620; } [data-pb-theme="dark"][data-theme="rose"] { --bg: #131019; --bg-alt: #1d1822; --bg-dark: #0a060f; --text: #f0e7e9; --text-secondary: #c8b8be; --text-muted: #8a7e85; --border: #322a36; --border-light: #261f29; --navbar-bg: rgba(19, 16, 25, 0.84); --card-bg: #1d1822; } /* Reclaim the body surface in dark mode. When a tenant sets a custom store background (homepage_layout=custom + body_background_color/image), the shared base layout writes it as an INLINE style on — which wins over `body { background: var(--bg) }`. That inline color is a LIGHT-mode choice, so in dark mode it leaves the (now light) text on a light canvas: the filter group titles and other --text content become invisible. Force the dark surface here; !important is required to beat the inline style, and the image is cleared so a light custom backdrop can't reintroduce the same clash. */ [data-pb-theme="dark"] body { background-color: var(--bg) !important; background-image: none !important; } /* Apply once per scope. The unset !important ensures Phase-13 navbar tokens take precedence over the base .navbar background defined below. */ .navbar { background: var(--navbar-bg); } .card, .test-card, .cart-summary, .shipping-option, .theme-panel, .cart-drawer { background: var(--card-bg); }