/* ================================================================
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.
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.
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. */
--ash-50: #f8f9fa;
--ash-100: #f1f3f5;
--ash-200: #e9ecef;
--ash-300: #dee2e6;
--ash-400: #ced4da;
--ash-500: #adb5bd;
--ash-600: #868e96;
--ash-700: #495057;
--ash-800: #343a40;
--ash-900: #212529;
/* ── Brand accent (teal) ─────────────────────────────────── */
--accent: #2f9e88;
--accent-dark: #237a68;
--accent-light: #3ecfb2;
--accent-bg: #e6f7f4;
--accent-rgb: 47, 158, 136;
--accent-dark-rgb: 35, 122, 104;
--accent-light-rgb: 62, 207, 178;
/* ── Semantic colors ─────────────────────────────────────── */
--success: #2f9e44;
--warning: #f59f00;
--danger: #e03131;
--info: #1c7ed6;
--success-rgb: 47, 158, 68;
--warning-rgb: 245, 159, 0;
--danger-rgb: 224, 49, 49;
--info-rgb: 28, 126, 214;
/* ── 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(33, 37, 41, .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: #1e2d3d;
--panel-dark-to: #0f1c28;
/* ── 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: #1e6254;
--accent-darker: #1a7f6d;
/* ── 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: #ff8787;
--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(10, 20, 32, .72);
/* ── Extended dark-navy steps (deep gradient endpoints) ───────── */
--navy-950: #0d1a28;
--navy-975: #0a1520;
/* ── Extended ash step (very dark, hero/gradient endpoints) ── */
--ash-950: #2a3038;
/* ── Amber / warning-text variants (badges, expiry states) ──── */
--warning-alt: #f59e0b;
--warning-text: #b36f00;
/* ── Near-black (text on bright badge backgrounds) ───────────── */
--near-black: #111111;
/* ── 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: #1a7f3c;
--result-success-to: #2fb05a;
--result-failed-from: #8b1a1a;
--result-failed-to: #d93535;
--result-already-from: #1a5a8b;
--result-already-to: #2980d9;
/* ── Extra tints (alert-info, alert-warning, purple accent) ──── */
--alert-warning-bg: #fff9db;
--alert-warning-text: #e67700;
--alert-info-bg: #e7f5ff;
--alert-info-text: #1864ab;
--color-purple: #845ec2;
--purple-rgb: 132, 94, 194;
--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: #845ef7;
--violet-rgb: 132, 94, 247;
--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: #1a2e4a;
--hero-navy-end: #0f2035;
/* ── PWA hero gradient (splash screen) ──────────────────────── */
--pwa-hero-dark: #002d6e;
--pwa-hero-darker: #001a4a;
--hero-dark: #1a2332;
--slate-700: #2c3e50;
--pwa-blue: #0077cc;
--pwa-blue-rgb: 0, 119, 204;
--pwa-blue-light: #00aaee;
--pwa-blue-light-rgb: 0, 170, 238;
/* ── Extra alpha tints (badges, glows, grid overlays) ───────── */
--white-a025: rgba(255, 255, 255, .025);
--accent-active: #1e6254;
--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: #d3f9d8;
--alert-success-border: #8ce99a;
--alert-success-text: #2b8a3e;
--alert-danger-bg: #ffe3e3;
--alert-danger-border: #ffc9c9;
--alert-danger-text: #c92a2a;
/* Bootstrap-classic warning pastel — distinct shade from
--alert-warning-*, used in admin_sync_vtu.php / pricing_view.php
"unsupported" empty-states. */
--warning-pastel-bg: #fff3cd;
--warning-pastel-text: #856404;
/* ── 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: #fff8e6;
--amber-notice-border: #f5d98b;
--amber-notice-text: #7a5b00;
--amber-notice-icon: #b8860b;
/* ── 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: #1e2432;
--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);
}