/* ================================================================
colors.css — Single Source of Truth for ALL system colors
----------------------------------------------------------------
Every color used anywhere in the platform (admin panel, user
panel, Flutter-facing web views, PWA banners, auth pages, etc.)
is defined ONCE here as a CSS custom property.
THEME: Light Blue mode (default). See colors-dark.css for the
dark blue variant — same variable names, dark-optimized values.
To switch themes, swap which of the two files is linked.
HOW TO USE
-----------
1. Link this file FIRST, before any other stylesheet, in every
page (or once in a shared header include):
2. Never write a raw hex code or rgba() value in a page or
component again — reference a variable from this file instead
(e.g. `color: var(--accent);` not `color: #2f9e88;`).
3. To re-theme the entire system (new brand color, dark mode,
white-label for a reseller, etc.) you only ever edit THIS file
(or colors-dark.css for the dark variant).
NOTE: brand-overrides.css and style.css both previously declared
their own copies of the palette below. Those copies have been
removed in favor of this file — see the comment left in each of
those files pointing back here.
================================================================ */
:root {
/* ── Ash / neutral palette ──────────────────────────────────
Used for text, borders, backgrounds, muted UI chrome.
Cool, blue-leaning slate scale. */
--ash-50: #f8fafc;
--ash-100: #f1f5f9;
--ash-200: #e2e8f0;
--ash-300: #cbd5e1;
--ash-400: #94a3b8;
--ash-500: #64748b;
--ash-600: #475569;
--ash-700: #334155;
--ash-800: #1e293b;
--ash-900: #0f172a;
/* ── Brand accent (royal blue) ────────────────────────────── */
--accent: #2563eb;
--accent-dark: #1d4ed8;
--accent-light: #60a5fa;
--accent-bg: #eff6ff;
--accent-rgb: 37, 99, 235;
--accent-dark-rgb: 29, 78, 216;
--accent-light-rgb: 96, 165, 250;
/* ── Semantic colors ─────────────────────────────────────── */
--success: #16a34a;
--warning: #f59e0b;
--danger: #e11d48;
--info: #0ea5e9;
--success-rgb: 22, 163, 74;
--warning-rgb: 245, 158, 11;
--danger-rgb: 225, 29, 72;
--info-rgb: 14, 165, 233;
/* ── Base black / white ──────────────────────────────────── */
--color-white: #ffffff;
--color-black: #000000;
/* ── White alpha scale ───────────────────────────────────────
For overlays, glassmorphism, and text on dark surfaces
(dark brand panels, hero banners, splash screens, etc.) */
--white-a05: rgba(255, 255, 255, .05);
--white-a055: rgba(255, 255, 255, .055);
--white-a06: rgba(255, 255, 255, .06);
--white-a07: rgba(255, 255, 255, .07);
--white-a08: rgba(255, 255, 255, .08);
--white-a09: rgba(255, 255, 255, .09);
--white-a10: rgba(255, 255, 255, .10);
--white-a12: rgba(255, 255, 255, .12);
--white-a14: rgba(255, 255, 255, .14);
--white-a15: rgba(255, 255, 255, .15);
--white-a16: rgba(255, 255, 255, .16);
--white-a18: rgba(255, 255, 255, .18);
--white-a20: rgba(255, 255, 255, .20);
--white-a25: rgba(255, 255, 255, .25);
--white-a28: rgba(255, 255, 255, .28);
--white-a40: rgba(255, 255, 255, .40);
--white-a45: rgba(255, 255, 255, .45);
--white-a50: rgba(255, 255, 255, .50);
--white-a52: rgba(255, 255, 255, .52);
--white-a55: rgba(255, 255, 255, .55);
--white-a60: rgba(255, 255, 255, .60);
--white-a65: rgba(255, 255, 255, .65);
--white-a70: rgba(255, 255, 255, .70);
--white-a75: rgba(255, 255, 255, .75);
--white-a80: rgba(255, 255, 255, .80);
--white-a85: rgba(255, 255, 255, .85);
--white-a96: rgba(255, 255, 255, .96);
/* ── Black alpha scale ────────────────────────────────────────
For shadows and light-surface overlays. */
--black-a05: rgba(0, 0, 0, .05);
--black-a06: rgba(0, 0, 0, .06);
--black-a07: rgba(0, 0, 0, .07);
--black-a08: rgba(0, 0, 0, .08);
--black-a09: rgba(0, 0, 0, .09);
--black-a10: rgba(0, 0, 0, .10);
--black-a12: rgba(0, 0, 0, .12);
--black-a13: rgba(0, 0, 0, .13);
--black-a15: rgba(0, 0, 0, .15);
--black-a18: rgba(0, 0, 0, .18);
--black-a25: rgba(0, 0, 0, .25);
--black-a28: rgba(0, 0, 0, .28);
--black-a30: rgba(0, 0, 0, .30);
--black-a42: rgba(0, 0, 0, .42);
--black-a45: rgba(0, 0, 0, .45);
/* ── Shadows (color-dependent, kept alongside the palette) ── */
--shadow-sm: 0 1px 3px var(--black-a08), 0 1px 2px var(--black-a06);
--shadow-md: 0 4px 12px var(--black-a10);
--shadow-lg: 0 10px 30px var(--black-a12);
--shadow-card: 0 2px 8px rgba(15, 23, 42, .08);
--shadow-auth-card: 0 4px 24px var(--black-a09);
/* ── Dark brand panel gradient ──────────────────────────────
Used on auth pages (login, quick login) and the PWA splash
screen's darker end-stop. */
--panel-dark-from: #1e3a6b;
--panel-dark-to: #081227;
/* ── Accent alpha scale ──────────────────────────────────────── */
--accent-a12: rgba(var(--accent-rgb), .12);
--accent-a15: rgba(var(--accent-rgb), .15);
--accent-a18: rgba(var(--accent-rgb), .18);
--accent-a20: rgba(var(--accent-rgb), .20);
--accent-a22: rgba(var(--accent-rgb), .22);
--accent-a28: rgba(var(--accent-rgb), .28);
--accent-a30: rgba(var(--accent-rgb), .30);
--accent-a35: rgba(var(--accent-rgb), .35);
--accent-a38: rgba(var(--accent-rgb), .38);
--accent-a40: rgba(var(--accent-rgb), .40);
--accent-a45: rgba(var(--accent-rgb), .45);
--accent-a48: rgba(var(--accent-rgb), .48);
--accent-a42: rgba(var(--accent-rgb), .42);
--accent-a55: rgba(var(--accent-rgb), .55);
--accent-active: #1e40af;
--accent-darker: #1e3a8a;
/* ── Semantic alpha scales ───────────────────────────────────── */
--success-a08: rgba(var(--success-rgb), .08);
--success-a10: rgba(var(--success-rgb), .10);
--success-a12: rgba(var(--success-rgb), .12);
--success-a18: rgba(var(--success-rgb), .18);
--danger-a06: rgba(var(--danger-rgb), .06);
--danger-a08: rgba(var(--danger-rgb), .08);
--danger-a10: rgba(var(--danger-rgb), .10);
--danger-a12: rgba(var(--danger-rgb), .12);
--danger-a15: rgba(var(--danger-rgb), .15);
--danger-a18: rgba(var(--danger-rgb), .18);
--danger-a40: rgba(var(--danger-rgb), .40);
--danger-light: #fda4af;
--warning-a10: rgba(var(--warning-rgb), .10);
--warning-a12: rgba(var(--warning-rgb), .12);
--info-a10: rgba(var(--info-rgb), .10);
--info-a07: rgba(var(--info-rgb), .07);
--accent-light-a12: rgba(var(--accent-light-rgb), .12);
/* ── Modal / backdrop overlays ────────────────────────────────── */
--overlay-backdrop: rgba(6, 12, 22, .72);
/* ── Extended dark-navy steps (deep gradient endpoints) ───────── */
--navy-950: #0b1420;
--navy-975: #060c15;
/* ── Extended ash step (very dark, hero/gradient endpoints) ── */
--ash-950: #1e293b;
/* ── Amber / warning-text variants (badges, expiry states) ──── */
--warning-alt: #f59e0b;
--warning-text: #b45309;
/* ── Near-black (text on bright badge backgrounds) ───────────── */
--near-black: #0a0a0a;
/* ── Network / telco brand colors (fixed brand identities) ──── */
--network-mtn: #FFC300;
--network-airtel: #E4002B;
--network-glo: #008000;
--network-9mobile: #006400;
--network-default: var(--ash-500);
/* ── Exam board brand colors (e-PIN cards) ───────────────────── */
--epin-waec: #1d4ed8;
--epin-neco: #16a34a;
--epin-nabteb: #9333ea;
--epin-jamb: #dc2626;
--epin-nbais: #0369a1;
/* ── Result-status card gradients ─────────────────────────────── */
--result-success-from: #15803d;
--result-success-to: #22c55e;
--result-failed-from: #881337;
--result-failed-to: #e11d48;
--result-already-from: #1e3a8a;
--result-already-to: #2563eb;
/* ── Extra tints (alert-info, alert-warning, purple accent) ──── */
--alert-warning-bg: #fffbeb;
--alert-warning-text: #b45309;
--alert-info-bg: #eff6ff;
--alert-info-text: #1d4ed8;
--color-purple: #7c3aed;
--purple-rgb: 124, 58, 237;
--purple-a10: rgba(var(--purple-rgb), .10);
/* ── Facebook brand blue (social login button) ────────────────── */
--facebook-blue: #1877F2;
--facebook-blue-rgb: 24, 119, 242;
--facebook-blue-a35: rgba(var(--facebook-blue-rgb), .35);
--facebook-blue-a45: rgba(var(--facebook-blue-rgb), .45);
/* ── WhatsApp brand green (chat FAB) ──────────────────────────── */
--whatsapp-green: #25d366;
--whatsapp-green-rgb: 37, 211, 102;
--whatsapp-green-a40: rgba(var(--whatsapp-green-rgb), .40);
/* ── Violet accent (distinct from --color-purple, used for
info/feature icon badges on marketing pages) ──────────────── */
--color-violet: #a78bfa;
--violet-rgb: 167, 139, 250;
--violet-a10: rgba(var(--violet-rgb), .10);
/* ── Privacy/marketing page hero gradient (deep navy, distinct
from the auth panel and PWA hero gradients) ────────────────── */
--hero-navy-mid: #1e3a5f;
--hero-navy-end: #0a1628;
/* ── PWA hero gradient (splash screen) ──────────────────────── */
--pwa-hero-dark: #0b3d91;
--pwa-hero-darker: #041e4d;
--hero-dark: #1a2332;
--slate-700: #334155;
--pwa-blue: #0284c7;
--pwa-blue-rgb: 2, 132, 199;
--pwa-blue-light: #38bdf8;
--pwa-blue-light-rgb: 56, 189, 248;
/* ── Extra alpha tints (badges, glows, grid overlays) ───────── */
--white-a025: rgba(255, 255, 255, .025);
--accent-active: #1e40af;
--accent-a18: rgba(var(--accent-rgb), .18);
--success-a12: rgba(var(--success-rgb), .12);
--danger-a12: rgba(var(--danger-rgb), .12);
--warning-a12: rgba(var(--warning-rgb), .12);
--pwa-blue-a14: rgba(var(--pwa-blue-rgb), .14);
--pwa-blue-a28: rgba(var(--pwa-blue-rgb), .28);
--pwa-blue-a32: rgba(var(--pwa-blue-rgb), .32);
--pwa-blue-a35: rgba(var(--pwa-blue-rgb), .35);
--pwa-blue-a45: rgba(var(--pwa-blue-rgb), .45);
--pwa-blue-a00: rgba(var(--pwa-blue-rgb), 0);
--pwa-blue-light-a18: rgba(var(--pwa-blue-light-rgb), .18);
/* ── Pastel alert tints (distinct from semantic base colors) ── */
--alert-success-bg: #dcfce7;
--alert-success-border: #86efac;
--alert-success-text: #15803d;
--alert-danger-bg: #ffe4e6;
--alert-danger-border: #fda4af;
--alert-danger-text: #be123c;
/* Bootstrap-classic warning pastel — distinct shade from
--alert-warning-*, used in admin_sync_vtu.php / pricing_view.php
"unsupported" empty-states. */
--warning-pastel-bg: #fef3c7;
--warning-pastel-text: #92400e;
/* ── Amber "scope notice" boxes (VTU sync partials) ───────────
Canonicalized — sync partials previously had tiny per-file
hex variations (#f2d98a vs #f5d98b, #7a5b00 vs #7a5c00);
now every provider partial uses these four consistently. */
--amber-notice-bg: #fffbeb;
--amber-notice-border: #fcd34d;
--amber-notice-text: #92400e;
--amber-notice-icon: #d97706;
/* ── VTU category badges (admin_sync_vtu.php service table) ─── */
--cat-data-bg: #dbeafe; --cat-data-text: #1d4ed8;
--cat-cabletv-bg: #fef9c3; --cat-cabletv-text: #854d0e;
--cat-airtime-bg: #dcfce7; --cat-airtime-text: #166534;
--cat-electricity-bg: #fce7f3; --cat-electricity-text: #9d174d;
--cat-datapin-bg: #e0e7ff; --cat-datapin-text: #3730a3;
--cat-rechargepin-bg: #fff7ed; --cat-rechargepin-text: #9a3412;
--cat-epin-bg: #f0fdf4; --cat-epin-text: #166534;
/* ── Sync log status indicators (left-border accent) ──────────── */
--log-success: #16a34a;
--log-partial: #d97706;
--log-failed: #dc2626;
/* ── Pricing-mode badges (pricing_view.php) ───────────────────── */
--mode-manual-bg: #ede9fe; --mode-manual-text: #6d28d9;
--mode-pct-bg: #d1fae5; --mode-pct-text: #065f46;
--mode-flat-bg: #dbeafe; --mode-flat-text: #1e40af;
/* ── Fixed third-party brand colors ───────────────────────────
These belong to Google/Apple's own brand guidelines and are
NOT part of our theme — kept here only so no hex lives
inline in page markup. */
--google-blue: #4285F4;
--google-green: #34A853;
--google-yellow: #FBBC05;
--google-red: #EA4335;
/* ── Tabler CSS-variable mapping ──────────────────────────────
Points Tabler's own theme variables at our palette so
Tabler components (buttons, alerts, navbar) pick up our
brand automatically. */
--tblr-primary: var(--accent);
--tblr-primary-rgb: var(--accent-rgb);
--tblr-primary-fg: var(--color-white);
--tblr-body-bg: var(--ash-100);
--tblr-body-color: var(--ash-900);
--tblr-bg-surface: var(--color-white);
--tblr-border-color: var(--ash-300);
--tblr-muted: var(--ash-600);
--tblr-success: var(--success);
--tblr-success-rgb: var(--success-rgb);
--tblr-warning: var(--warning);
--tblr-warning-rgb: var(--warning-rgb);
--tblr-danger: var(--danger);
--tblr-danger-rgb: var(--danger-rgb);
--tblr-info: var(--info);
--tblr-info-rgb: var(--info-rgb);
--tblr-navbar-bg: #0f1f3d;
--tblr-navbar-color: var(--white-a75);
--tblr-navbar-active-color: var(--color-white);
--tblr-navbar-hover-color: var(--color-white);
--tblr-navbar-border-color: var(--white-a08);
--tblr-navbar-brand-color: var(--color-white);
}