/** * Reseller theme presets. Loaded on index.html, login.html, dashboard.html, * and reseller.html (never admin.html — the platform's own panel stays * consistent regardless of any reseller's choice). * * Each preset overrides only the accent-color, font, and radius custom * properties already defined in each page's own :root block — background/ * surface/text colors, shadows, and semantic status colors (green/yellow/ * red) are intentionally left alone so every theme still reads as "the * same dark app," just with a different personality layered on top. * * Applied via a `data-theme=""` attribute on , set by * branding.js from the tenant's `theme` field. No attribute (or an * unrecognized value) falls through to each page's own default look — * existing resellers and the master site are unaffected until a reseller * actively picks one. * * A reseller's custom accent color (brand_color), if set, is applied by * branding.js AFTER data-theme, so it always wins over a theme's default * accent — the theme sets the overall mood, brand_color fine-tunes the hue. */ /* ── Midnight Minimal ──────────────────────────────────────── Near-monochrome, sharp corners, flat/subtle shadows, no display font — understated, corporate-minimal feel. */ [data-theme="minimal"] { --indigo: #52525b; --indigo-h: #3f3f46; --indigo-light: rgba(82,82,91,0.13); --indigo-dim: rgba(82,82,91,0.10); --indigo-mid: rgba(82,82,91,0.22); --indigo-border: rgba(82,82,91,0.30); --indigo-100: #e4e4e7; --indigo-50: #fafafa; --indigo-glow: rgba(82,82,91,0.18); --radius: 6px; --radius-sm: 4px; --radius-lg: 10px; --font-heading: 'Inter', sans-serif; --font-body: 'Inter', sans-serif; } /* ── Bold Gradient ──────────────────────────────────────────── Vibrant rose accent, large radius, pronounced shadows, leans into the display font — energetic, consumer-brand feel. */ [data-theme="bold"] { --indigo: #e11d48; --indigo-h: #be123c; --indigo-light: rgba(225,29,72,0.15); --indigo-dim: rgba(225,29,72,0.10); --indigo-mid: rgba(225,29,72,0.24); --indigo-border: rgba(225,29,72,0.35); --indigo-100: #fecdd3; --indigo-50: #fff1f2; --indigo-glow: rgba(225,29,72,0.22); --radius: 20px; --radius-sm: 14px; --radius-lg: 28px; --font-heading: 'Sora', sans-serif; --font-body: 'Inter', sans-serif; } /* ── Corporate Navy ─────────────────────────────────────────── Deep navy accent, moderate radius, conservative shadows — professional/enterprise feel. */ [data-theme="navy"] { --indigo: #1d4ed8; --indigo-h: #1e40af; --indigo-light: rgba(29,78,216,0.12); --indigo-dim: rgba(29,78,216,0.09); --indigo-mid: rgba(29,78,216,0.20); --indigo-border: rgba(29,78,216,0.28); --indigo-100: #dbeafe; --indigo-50: #eff6ff; --indigo-glow: rgba(29,78,216,0.18); --radius: 8px; --radius-sm: 6px; --radius-lg: 12px; --font-heading: 'Sora', sans-serif; --font-body: 'Inter', sans-serif; } /* ── Sunset Warm ────────────────────────────────────────────── Warm amber/orange accent, medium radius — friendly, approachable feel. */ [data-theme="sunset"] { --indigo: #ea580c; --indigo-h: #c2410c; --indigo-light: rgba(234,88,12,0.14); --indigo-dim: rgba(234,88,12,0.10); --indigo-mid: rgba(234,88,12,0.22); --indigo-border: rgba(234,88,12,0.32); --indigo-100: #fed7aa; --indigo-50: #fff7ed; --indigo-glow: rgba(234,88,12,0.20); --radius: 14px; --radius-sm: 10px; --radius-lg: 20px; --font-heading: 'Sora', sans-serif; --font-body: 'Inter', sans-serif; }