/* Theme variables — chosen by body class. Drop-in replacement for the * old `tailwind.config = { theme: { extend: { colors: {...} }}}` blocks * that JIT Tailwind CDN compiled at runtime. Matches: * - Auth pages (login/register/forgot/reset): blue/purple * - Dashboard / app pages: emerald/cyan */ :root { /* Default = dashboard scheme (most pages use this). */ --color-primary: 16 185 129; /* #10b981 emerald */ --color-accent: 6 182 212; /* #06b6d4 cyan */ --color-bg-dark: 15 17 21; /* #0f1115 */ --color-surface: 30 34 40; /* #1e2228 */ --color-surface-dark: 24 27 33; /* #181b21 */ --color-border-dark: 40 46 57; /* #282e39 */ } /* Auth-page override (login.php, register.php, forgot/reset). * Apply via or wrapper element. */ .theme-auth, body.theme-auth { --color-primary: 19 91 236; /* #135bec blue */ --color-accent: 139 92 246; /* #8b5cf6 purple */ } /* Marketing site brand (legacy login config used #137fec). */ .theme-marketing { --color-primary: 19 127 236; /* #137fec */ --color-accent: 139 92 246; } /* ─── Mobile fallback (2026-05-09) ────────────────────────────────────────── * Force dark background on html/body BEFORE any Tailwind class applies. * Fixes: white-flash on mobile when Tailwind is slow to load, OR when * class `bg-background-light dark:bg-background-dark` falls to light branch * because isn't applied yet. * Works because this CSS file loads in after tailwind.min.css with * higher specificity rules. */ html, body { background-color: rgb(15 17 21); /* #0f1115 — same as --color-bg-dark */ color: rgb(203 213 225); /* slate-300 */ -webkit-text-size-adjust: 100%; /* prevent iOS auto-zoom on rotate */ } /* Auth pages override: slightly different dark for blue/purple theme */ body.theme-auth { background-color: rgb(15 17 21); /* keep same dark base */ } /* ─── Tailwind-config compat layer (2026-05-11) ───────────────────────────── * Replaces the JIT utilities the old CDN config generated for our custom * theme colors and font families. Without this, classes like `bg-primary`, * `text-accent`, `font-display`, `bg-primary/10` (opacity), and gradient * stops (`from-primary`, `to-accent`) render unstyled. * Each color uses `rgb(... / )` so opacity modifiers still work. * Reference: matches the removed `tailwind.config.extend.colors / fontFamily`. */ /* ── Color: primary ── */ .bg-primary { background-color: rgb(var(--color-primary)); } .bg-primary\/5 { background-color: rgb(var(--color-primary) / 0.05); } .bg-primary\/10 { background-color: rgb(var(--color-primary) / 0.10); } .bg-primary\/20 { background-color: rgb(var(--color-primary) / 0.20); } .bg-primary\/30 { background-color: rgb(var(--color-primary) / 0.30); } .bg-primary\/50 { background-color: rgb(var(--color-primary) / 0.50); } .bg-primary\/80 { background-color: rgb(var(--color-primary) / 0.80); } .bg-primary\/90 { background-color: rgb(var(--color-primary) / 0.90); } .text-primary { color: rgb(var(--color-primary)); } .text-primary\/80 { color: rgb(var(--color-primary) / 0.80); } .border-primary { border-color: rgb(var(--color-primary)); } .border-primary\/20 { border-color: rgb(var(--color-primary) / 0.20); } .border-primary\/30 { border-color: rgb(var(--color-primary) / 0.30); } .border-primary\/50 { border-color: rgb(var(--color-primary) / 0.50); } .ring-primary { --tw-ring-color: rgb(var(--color-primary)); } .fill-primary { fill: rgb(var(--color-primary)); } .stroke-primary { stroke: rgb(var(--color-primary)); } .hover\:bg-primary:hover { background-color: rgb(var(--color-primary)); } .hover\:bg-primary\/10:hover { background-color: rgb(var(--color-primary) / 0.10); } .hover\:bg-primary\/20:hover { background-color: rgb(var(--color-primary) / 0.20); } .hover\:bg-primary\/30:hover { background-color: rgb(var(--color-primary) / 0.30); } .hover\:bg-primary\/90:hover { background-color: rgb(var(--color-primary) / 0.90); } .hover\:text-primary:hover { color: rgb(var(--color-primary)); } .hover\:text-primary\/80:hover { color: rgb(var(--color-primary) / 0.80); } .hover\:border-primary:hover { border-color: rgb(var(--color-primary)); } .hover\:border-primary\/50:hover { border-color: rgb(var(--color-primary) / 0.50); } .focus\:ring-primary:focus { --tw-ring-color: rgb(var(--color-primary)); } .focus\:border-primary:focus { border-color: rgb(var(--color-primary)); } /* ── Color: accent ── */ .bg-accent { background-color: rgb(var(--color-accent)); } .bg-accent\/10 { background-color: rgb(var(--color-accent) / 0.10); } .bg-accent\/20 { background-color: rgb(var(--color-accent) / 0.20); } .text-accent { color: rgb(var(--color-accent)); } .text-accent\/80 { color: rgb(var(--color-accent) / 0.80); } .border-accent { border-color: rgb(var(--color-accent)); } .border-accent\/20 { border-color: rgb(var(--color-accent) / 0.20); } .hover\:text-accent:hover { color: rgb(var(--color-accent)); } .hover\:bg-accent:hover { background-color: rgb(var(--color-accent)); } /* ── Color: background/surface/border dark tokens ── */ .bg-background-dark { background-color: rgb(var(--color-bg-dark)); } .bg-background-dark\/50 { background-color: rgb(var(--color-bg-dark) / 0.50); } .bg-background-dark\/80 { background-color: rgb(var(--color-bg-dark) / 0.80); } .bg-surface-dark { background-color: rgb(var(--color-surface-dark)); } .bg-surface-dark\/30 { background-color: rgb(var(--color-surface-dark) / 0.30); } .bg-surface-dark\/50 { background-color: rgb(var(--color-surface-dark) / 0.50); } .bg-surface-dark\/60 { background-color: rgb(var(--color-surface-dark) / 0.60); } .bg-surface-dark\/80 { background-color: rgb(var(--color-surface-dark) / 0.80); } .bg-surface { background-color: rgb(var(--color-surface)); } .hover\:bg-surface-dark:hover { background-color: rgb(var(--color-surface-dark)); } .border-border-dark { border-color: rgb(var(--color-border-dark)); } .text-background-dark { color: rgb(var(--color-bg-dark)); } /* ── Gradient stops (from-/via-/to-) for primary + accent ── */ .from-primary { --tw-gradient-from: rgb(var(--color-primary)) var(--tw-gradient-from-position); --tw-gradient-to: rgb(var(--color-primary) / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-primary\/10 { --tw-gradient-from: rgb(var(--color-primary) / 0.10) var(--tw-gradient-from-position); --tw-gradient-to: rgb(var(--color-primary) / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-accent { --tw-gradient-from: rgb(var(--color-accent)) var(--tw-gradient-from-position); --tw-gradient-to: rgb(var(--color-accent) / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-background-dark { --tw-gradient-from: rgb(var(--color-bg-dark)) var(--tw-gradient-from-position); --tw-gradient-to: rgb(var(--color-bg-dark) / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .via-surface-dark { --tw-gradient-to: rgb(var(--color-surface-dark) / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--color-surface-dark)) var(--tw-gradient-via-position), var(--tw-gradient-to); } .via-primary\/5 { --tw-gradient-to: rgb(var(--color-primary) / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--color-primary) / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to); } .via-primary\/30 { --tw-gradient-to: rgb(var(--color-primary) / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--color-primary) / 0.30) var(--tw-gradient-via-position), var(--tw-gradient-to); } .to-accent { --tw-gradient-to: rgb(var(--color-accent)) var(--tw-gradient-to-position); } .to-accent\/10 { --tw-gradient-to: rgb(var(--color-accent) / 0.10) var(--tw-gradient-to-position); } .to-primary { --tw-gradient-to: rgb(var(--color-primary)) var(--tw-gradient-to-position); } .to-surface-dark { --tw-gradient-to: rgb(var(--color-surface-dark)) var(--tw-gradient-to-position); } /* ── Font families (replaces tailwind.config.fontFamily) ── */ .font-display { font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; } .font-body { font-family: "Noto Sans", ui-sans-serif, system-ui, sans-serif; } .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }