/* ════════════════════════════════════════════════════════════════ THEME-CORE.CSS Global design tokens for the AX XPRESS partner panel. Load this file FIRST, before every other page-specific CSS file, on every page (head-section.php is the right place). Usage: or The value is rendered server-side from the seller's saved theme_preference so there is no flash of the wrong theme. ════════════════════════════════════════════════════════════════ */ :root { /* ── Surfaces ─────────────────────────────────────────────── */ --bg-page: #f2f3f7; /* overall page background */ --bg-page-alt: #f9fafb; /* secondary page background variant */ --bg-surface: #ffffff; /* cards, headers, modals */ --bg-subtle: #f3f4f6; /* subtle fill — pills, table head, hover bg */ --bg-subtle-2: #f5f5fa; /* secondary subtle fill */ --bg-elevated: #ffffff; /* dropdowns, popovers */ /* ── Text ─────────────────────────────────────────────────── */ --text-primary: #16162a; /* headings, high-emphasis text */ --text-secondary: #6b7280; /* body copy, descriptions */ --text-secondary-strong: #374151; /* slightly darker secondary */ --text-muted: #9ca3af; /* labels, captions, placeholders */ --text-faint: #c4c4d8; /* least emphasis (arrows, dividers) */ --text-on-accent: #ffffff; /* text sitting on solid accent bg */ /* ── Borders & shadows ────────────────────────────────────── */ --border-color: #e6e6f0; --border-strong: #d1d5db; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.08); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.14); /* ── Brand accent (purple) — same hue both themes ─────────── Two near-identical purples exist across the codebase (#4f35e8 in product/live pages, #7c3aed / #5b3af7 in BMB & import-list). Kept as separate tokens so each area's identity is preserved; only surfaces/text adapt to theme. */ --accent: #4f35e8; --accent-2: #7058f5; --accent-alt: #7c3aed; --accent-alt-2: #a855f7; --accent-pale-bg: #eceaff; /* ── Semantic colors ──────────────────────────────────────── */ --success: #059669; --success-2: #10b981; --success-alt: #16a34a; --success-text-dark: #065f46; --success-pale-bg: #d1fae5; --danger: #ef4444; --danger-2: #dc2626; --danger-pale-bg: #fee2e2; --gold: #f59e0b; --gold-2: #d97706; --gold-text-dark: #92400e; --gold-pale-bg: #fef3c7; --info: #3b82f6; --info-pale-bg: #eff6ff; --orange: #ea580c; /* ── Shadow color components (used inside box-shadow shorthand) ── */ --shadow-color-sm: rgba(0, 0, 0, 0.05); --shadow-color-md: rgba(0, 0, 0, 0.1); --shadow-color-lg: rgba(0, 0, 0, 0.18); /* RGB triplet (no alpha) for rgba(var(--rgb-surface-tint), X) usage — lets glassmorphism/overlay rgba() calls with a hardcoded alpha flip color between themes while keeping each rule's original opacity untouched. */ --rgb-surface-tint: 255, 255, 255; /* ── Spacing scale — standardized across shared cards/pages ───── Applied to the reused card/page-wrapper classes (.pc-card, .sp-card, .lp-card, .stg-card, .analytics-card, page headers, etc). Component-specific one-off spacing (badge padding, pill padding, icon gaps) is left untouched — this scale targets only the repeated "card" and "page container" pattern. */ --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 20px; --space-xl: 24px; --space-2xl: 32px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; } [data-theme="dark"] { /* ── Surfaces ─────────────────────────────────────────────── */ /* CHANGED — page is now noticeably darker than surfaces (was nearly the same tone, which is why cards felt "flat" and never visually lifted off the page). Also shifted from cool blue-gray to a warmer, slightly violet-tinted black — closer to the Linear/Raycast look than the previous neutral charcoal. */ --bg-page: #121214; --bg-page-alt: #17171b; --bg-surface: #1c1c22; --bg-subtle: #26262e; --bg-subtle-2: #2c2c35; --bg-elevated: #202027; /* ── Text ─────────────────────────────────────────────────── */ --text-primary: #f2f1f5; --text-secondary: #a8a4b5; --text-secondary-strong: #c7c3d1; --text-muted: #827d90; --text-faint: #56505f; --text-on-accent: #ffffff; /* ── Borders & shadows ────────────────────────────────────── */ --border-color: #38363f; --border-strong: #4a4650; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); /* ── Brand accent — brightened slightly for more "pop" against the richer dark surfaces */ --accent: #7c66ff; --accent-2: #9484ff; --accent-alt: #a382f7; --accent-alt-2: #c896ff; --accent-pale-bg: #2f2860; /* ── Semantic colors — slightly richer/warmer than before ──── */ --success: #3ddb9d; --success-2: #3ddb9d; --success-alt: #4ade80; --success-text-dark: #86efac; --success-pale-bg: #113328; --danger: #fb8281; --danger-2: #fca5a5; --danger-pale-bg: #3a1616; --gold: #ffc94d; --gold-2: #fcd34d; --gold-text-dark: #fde68a; --gold-pale-bg: #3a2c0f; --info: #6fb0ff; --info-pale-bg: #12233d; --orange: #ff9d57; --shadow-color-sm: rgba(0, 0, 0, 0.35); --shadow-color-md: rgba(0, 0, 0, 0.45); --shadow-color-lg: rgba(0, 0, 0, 0.55); --rgb-surface-tint: 28, 28, 34; } /* ── Safety net ─────────────────────────────────────────────────── Guards against any stray hardcoded white background (a vendor file like bootstrap-5.min.css, or a bg-white/bg-light utility class sitting directly on in a page template) silently winning over the themed body background by specificity. This is the one deliberate !important in the whole system — body/html are foundational enough that a hard guarantee here is worth it. */ [data-theme="dark"] html, [data-theme="dark"] body { background-color: var(--bg-page) !important; color: var(--text-primary) !important; } /* ── Bootstrap component safety net ────────────────────────────── bootstrap-5.min.css is a vendor file, never touched by any conversion pass — it hardcodes white backgrounds on these components. Without this, dark-mode text (correctly themed via var(--text-primary) etc.) ends up light-on-white and invisible, since Bootstrap's own rule still wins for the background. This covers every modal, dropdown, card, and popover panel-wide. */ .modal-content, .dropdown-menu, .popover, .toast, .offcanvas, .list-group-item { background-color: var(--bg-surface); color: var(--text-primary); border-color: var(--border-color); } .modal-header, .modal-footer { border-color: var(--border-color); } .form-control, .form-select { background-color: var(--bg-surface); color: var(--text-primary); border-color: var(--border-color); } .form-control:focus, .form-select:focus { background-color: var(--bg-surface); color: var(--text-primary); } /* Smooth theme transitions on elements that commonly flip color */ body, .card, [class*="-card"], [class*="-surface"], [class$="-box"], [class$="-wrap"], [class$="-panel"] { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }