/*
* ShowZone Design Tokens — single source of truth for color across the member theme.
* Values mirror ShowZone_Master_Color_UI_Design_System_v1.0.md (light §56 / dark §57).
* Do not hardcode hex values in component CSS — consume these custom properties instead.
*
* This file also bridges the theme's pre-existing legacy variable names
* (--accent, --bg, --text-h, --gst-sidebar-bg, ...) to the correct doc values so the
* large body of existing CSS (site.css, premium-dashboard.css, inline layout styles)
* keeps working without a full rename pass.
*/
:root {
/* ---- Canonical brand tokens ---- */
--brand-primary: #6D28D9;
--brand-hover: #5B21B6;
--brand-active: #4C1D95;
--brand-soft: #F7F3FF;
--brand-soft-hover: #EEE7FF;
--brand-border: #DDD0FF;
--brand-focus: #A78BFA;
--brand-rgb: 109, 40, 217;
/* ---- Canonical surfaces ---- */
--bg-page: #F8FAFC;
--bg-surface: #FFFFFF;
--bg-surface-subtle: #F1F5F9;
--bg-surface-raised: #FFFFFF;
--bg-surface-hover: #F8FAFC;
--bg-surface-selected: #F7F3FF;
/* ---- Canonical typography ---- */
--text-heading: #0F172A;
--text-primary: #1E293B;
--text-secondary: #475569;
--text-muted: #64748B;
--text-disabled: #94A3B8;
--text-inverse: #FFFFFF;
--text-brand: #6D28D9;
--text-link: #6D28D9;
--text-link-hover: #5B21B6;
/* ---- Canonical borders ---- */
--border-subtle: #E2E8F0;
--border-default: #CBD5E1;
--border-strong: #94A3B8;
--border-brand: #6D28D9;
/* ---- Semantic colors ---- */
--success: #15803D; --success-bg: #F0FDF4; --success-border: #BBF7D0; --success-text: #166534;
--warning: #B45309; --warning-bg: #FFFBEB; --warning-border: #FDE68A; --warning-text: #92400E;
--danger: #DC2626; --danger-bg: #FEF2F2; --danger-border: #FECACA; --danger-text: #B91C1C;
--info: #0369A1; --info-bg: #F0F9FF; --info-border: #BAE6FD; --info-text: #075985;
--overlay: rgba(8, 11, 18, 0.55);
/* ---- Neutral elevation (no colored/decorative glow) ---- */
--shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
--shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
--shadow-lg: 0 12px 30px rgba(15, 23, 42, 0.12);
/* Used sparingly for a primary CTA's own elevation — a contained offset shadow, not a halo/glow. */
--shadow-brand: 0 8px 20px -4px rgba(109, 40, 217, 0.18);
/* ---- Structural (non-color) ---- */
--sidebar-w: 260px;
--topbar-h: 64px;
/* ================= Legacy variable bridge (member/layout.phtml + layout.phtml) ================= */
--bg: var(--bg-page);
--surface: var(--bg-surface);
--surface2: var(--bg-surface-subtle);
--surface3: var(--bg-surface-hover);
--accent: var(--brand-primary);
--accent-dk: var(--brand-hover);
--accent-lt: rgba(109, 40, 217, 0.08);
--accent-md: rgba(109, 40, 217, 0.15);
--accent-glow: rgba(109, 40, 217, 0.20);
--accent-ring: rgba(109, 40, 217, 0.12);
--text-h: var(--text-heading);
--text-body: var(--text-primary);
--text-accent: var(--text-brand);
--text-on-acc: #FFFFFF;
--border: var(--border-subtle);
--border-hov: var(--border-strong);
--green: var(--success); --green-bg: var(--success-bg); --green-border: var(--success-border);
--amber: var(--warning); --amber-bg: var(--warning-bg);
--red: var(--danger); --red-bg: var(--danger-bg);
--blue: var(--info); --blue-bg: var(--info-bg);
--shadow-acc: var(--shadow-brand);
--gst-sidebar-bg: #0F172A;
--gst-sidebar-active-start: rgb(88, 46, 166);
--gst-sidebar-active-end: #7C3AED;
--gst-accent-blue: var(--brand-focus);
--custom-bg: var(--bg-page);
--sidebar-bg: var(--gst-sidebar-bg);
--sidebar-active-start: var(--gst-sidebar-active-start);
--sidebar-active-end: var(--gst-sidebar-active-end);
--accent-blue: var(--brand-focus);
--title-blue: var(--text-heading);
color-scheme: light;
}
/*
* Dark theme — applied when .
* Set by the no-flash inline script in each layout and toggled by theme-toggle.js.
*
* DEVIATION FROM THE DESIGN DOC (deliberate, by request): §57's exact hex values put --bg-page and
* --bg-surface too close together perceptually — cards barely separated from the page behind them,
* reading as flat/muddy rather than layered. The doc's own intent (§12: "near-black charcoal/slate,
* not neon; dark surfaces separated primarily by subtle changes in value") is preserved — same hue
* family, same restraint — but the value ladder below is widened so each surface actually reads as
* a distinct elevation instead of one undifferentiated dark mass.
*/
:root[data-theme="dark"] {
--brand-primary: #7C3AED;
--brand-hover: #8B5CF6;
--brand-active: #6D28D9;
--brand-soft: #2A1B4D;
--brand-soft-hover: #35225F;
--brand-border: #5B21B6;
--brand-focus: #A78BFA;
--brand-rgb: 139, 92, 246; /* corrects a gap in design doc §57 — keeps the dark-mode focus ring on-brand */
--bg-page: #0A0E16;
--bg-surface: #141B29;
--bg-surface-subtle: #1B2434;
--bg-surface-raised: #232D40;
--bg-surface-hover: #1E2839;
--bg-surface-selected: #2A1B4D;
--text-heading: #F8FAFC;
--text-primary: #E2E8F0;
--text-secondary: #CBD5E1;
--text-muted: #94A3B8;
--text-disabled: #64748B;
--text-inverse: #0F172A;
--text-brand: #C4ADFF;
--text-link: #C4ADFF;
--text-link-hover: #DDD0FF;
--border-subtle: #253046;
--border-default: #3C4A63;
--border-strong: #58667F;
--border-brand: #8B5CF6;
--overlay: rgba(0, 0, 0, 0.68);
/* Dark semantic surfaces (§58) */
--success-bg: #0F2E1D; --success-border: #1E7A47; --success-text: #86EFAC;
--warning-bg: #332107; --warning-border: #A2530E; --warning-text: #FCD34D;
--danger-bg: #391818; --danger-border: #A32626; --danger-text: #FCA5A5;
--info-bg: #0D3247; --info-border: #0E6690; --info-text: #7DD3FC;
/* Dark surfaces rely on borders/value shifts, not shadows (§25) — but a soft shadow still helps a
raised card separate from the page now that surfaces are lighter than before. */
--shadow-xs: none;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
--shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.5);
--shadow-brand: 0 8px 20px -4px rgba(139, 92, 246, 0.3);
/* Legacy bridge, dark values */
--accent-lt: rgba(139, 92, 246, 0.14);
--accent-md: rgba(139, 92, 246, 0.22);
--accent-glow: rgba(139, 92, 246, 0.28);
--accent-ring: rgba(139, 92, 246, 0.18);
--shadow-acc: var(--shadow-brand);
/* Kept distinct from regular card surfaces (darker, an anchor rail) — mirrors its light-mode role
as the one element that's deliberately different from everything else on the page. */
--gst-sidebar-bg: #0D1420;
--gst-sidebar-active-start: #6D28D9;
--gst-sidebar-active-end: #8B5CF6;
/* Lets the browser render native checkboxes/radios/selects/scrollbars/date-pickers in their dark
variant automatically — this alone fixes most "native control looks wrong in dark mode" issues
that no amount of custom CSS can fully override. */
color-scheme: dark;
}
/* Respect OS-level preference until the visitor makes an explicit choice (theme-toggle.js sets data-theme and short-circuits this block). */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]):not([data-theme="dark"]) {
--brand-primary: #7C3AED;
--brand-hover: #8B5CF6;
--brand-active: #6D28D9;
--brand-soft: #2A1B4D;
--brand-soft-hover: #35225F;
--brand-border: #5B21B6;
--brand-focus: #A78BFA;
--brand-rgb: 139, 92, 246;
--bg-page: #0A0E16;
--bg-surface: #141B29;
--bg-surface-subtle: #1B2434;
--bg-surface-raised: #232D40;
--bg-surface-hover: #1E2839;
--bg-surface-selected: #2A1B4D;
--text-heading: #F8FAFC;
--text-primary: #E2E8F0;
--text-secondary: #CBD5E1;
--text-muted: #94A3B8;
--text-disabled: #64748B;
--text-inverse: #0F172A;
--text-brand: #C4ADFF;
--text-link: #C4ADFF;
--text-link-hover: #DDD0FF;
--border-subtle: #253046;
--border-default: #3C4A63;
--border-strong: #58667F;
--border-brand: #8B5CF6;
--overlay: rgba(0, 0, 0, 0.68);
--success-bg: #0F2E1D; --success-border: #1E7A47; --success-text: #86EFAC;
--warning-bg: #332107; --warning-border: #A2530E; --warning-text: #FCD34D;
--danger-bg: #391818; --danger-border: #A32626; --danger-text: #FCA5A5;
--info-bg: #0D3247; --info-border: #0E6690; --info-text: #7DD3FC;
--shadow-xs: none;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
--shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.5);
--shadow-brand: 0 8px 20px -4px rgba(139, 92, 246, 0.3);
--accent-lt: rgba(139, 92, 246, 0.14);
--accent-md: rgba(139, 92, 246, 0.22);
--accent-glow: rgba(139, 92, 246, 0.28);
--accent-ring: rgba(139, 92, 246, 0.18);
--shadow-acc: var(--shadow-brand);
--gst-sidebar-bg: #0D1420;
--gst-sidebar-active-start: #6D28D9;
--gst-sidebar-active-end: #8B5CF6;
color-scheme: dark;
}
}
/*
* ---- Theme toggle: a track+thumb switch (dashboard header only — auth pages are light-only). ----
* Deliberately NOT an icon button: an earlier icon version depended on `stroke: currentColor`,
* and a vendor rule elsewhere was forcing that color to white, making the icon invisible in light
* mode (white-on-white) while looking fine in dark mode (white-on-dark) — a confusing, hard-to-spot
* bug. A plain background-color switch has nothing for vendor CSS to silently override.
*/
.sz-theme-toggle {
all: unset;
display: inline-flex !important;
align-items: center;
cursor: pointer;
flex-shrink: 0;
padding: 4px;
}
.sz-theme-toggle .sz-toggle-track {
display: block;
width: 42px;
height: 24px;
border-radius: 999px;
background: var(--border-default) !important;
border: 1px solid var(--border-strong) !important;
position: relative;
transition: background 0.2s ease, border-color 0.2s ease;
box-sizing: border-box;
}
.sz-theme-toggle .sz-toggle-thumb {
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #FFFFFF !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
transition: transform 0.2s ease;
}
:root[data-theme="dark"] .sz-theme-toggle .sz-toggle-track {
background: var(--brand-primary) !important;
border-color: var(--brand-primary) !important;
}
:root[data-theme="dark"] .sz-theme-toggle .sz-toggle-thumb {
transform: translateX(18px);
}
/*
* ==============================================================================
* Dark-mode catch-all for native aMember markup (profile form, payment history,
* help desk, etc.) that this theme never individually re-skins per page.
* These pages render aMember's own default containers/classes, whose bundled CSS
* only knows a light-mode white/gray palette. Rather than chasing every page one
* at a time, force every common native container + form control into the dark
* surface tokens whenever dark mode is active. Deliberately broad + !important:
* this is what actually stops "white card floating in a black page" patchwork.
* ==============================================================================
*/
:root[data-theme="dark"] .am-form,
:root[data-theme="dark"] .am-form form,
:root[data-theme="dark"] .am-widget,
:root[data-theme="dark"] .am-block,
:root[data-theme="dark"] .am-block .alert,
:root[data-theme="dark"] .alert,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .well,
:root[data-theme="dark"] .list-group-item,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .am-helpdesk-ticket,
:root[data-theme="dark"] .helpdesk-ticket,
:root[data-theme="dark"] .resource-card,
:root[data-theme="dark"] .am-body .am-body-content-wrapper,
:root[data-theme="dark"] .am-notice,
:root[data-theme="dark"] .am-notification,
:root[data-theme="dark"] .am-popup,
:root[data-theme="dark"] .am-invoice-summary,
:root[data-theme="dark"] .am-input-filter-wrapper,
:root[data-theme="dark"] .am-input-filter-wrapper .am-input-filter-inner-wrapper,
:root[data-theme="dark"] .am-helpdesk-message-inbound,
:root[data-theme="dark"] .am-helpdesk-message-outbound {
background: var(--bg-surface) !important;
color: var(--text-primary) !important;
border-color: var(--border-subtle) !important;
box-shadow: none !important;
}
/*
* .am-form form: aMember's own bundled amember.css (loaded automatically via printLayoutHead(), not
* one of our own tags — easy to miss) styles the