/* ===================================================================== WebSecurityScanner — UNIFIED COLOR PALETTE (single source of truth) --------------------------------------------------------------------- This file centralises the whole product's colour scheme into one cohesive, professional security-product palette and remaps every legacy token-naming system (--primary-color, --wss-*, --md-*, --primary, --dt-*) onto it so the look is identical on every page: landing, dashboard, scans, reports, tables, badges, nav. It ONLY defines CSS custom properties (design tokens) — it sets no layout/structure rules, so it can never break a page. It is loaded LAST in every (legacy templates/header.php and the MVC layouts) so these canonical token values win over the older, inconsistent definitions scattered across the other stylesheets. Palette identity: Primary emerald #10b981 (brand / security "secure" green) Hover emerald #059669 Secondary teal #14b8a6 Accent amber #f59e0b (highlights, warnings-as-accent) Success emerald #10b981 Warning amber #f59e0b Danger red #ef4444 Info teal #14b8a6 Severity critical #ef4444 · high #f97316 · medium #f59e0b · low #14b8a6 · info #64748b Neutrals slate scale (#0f172a … #f8fafc) No indigo / purple / magenta — those were the source of the clashing look and are remapped here onto the emerald/teal brand. ===================================================================== */ :root { /* ---- Canonical brand tokens ---------------------------------- */ --wss-emerald: #10b981; --wss-emerald-600: #059669; --wss-emerald-400: #34d399; --wss-emerald-700: #047857; --wss-teal: #14b8a6; --wss-teal-600: #0d9488; --wss-amber: #f59e0b; --wss-amber-600: #d97706; --wss-red: #ef4444; --wss-red-600: #dc2626; --wss-orange: #f97316; --wss-slate: #64748b; /* ---- Neutral slate scale (light surface defaults) ------------ */ --wss-ink-900: #020617; --wss-ink-800: #0f172a; --wss-ink-700: #1e293b; --wss-slate-600: #334155; --wss-slate-500: #475569; --wss-slate-400: #64748b; --wss-slate-300: #94a3b8; --wss-slate-200: #cbd5e1; --wss-slate-100: #e2e8f0; --wss-slate-50: #f1f5f9; --wss-paper: #f8fafc; --wss-white: #ffffff; /* ---- Severity scale (used by badges / cards / tables) -------- */ --wss-sev-critical: #ef4444; --wss-sev-high: #f97316; --wss-sev-medium: #f59e0b; --wss-sev-low: #14b8a6; --wss-sev-info: #64748b; --wss-sev-fixed: #10b981; /* ---- Brand gradients (no purple/pink) ------------------------ */ --wss-grad-primary: linear-gradient(135deg, #10b981 0%, #14b8a6 50%, #34d399 100%); --wss-grad-success: linear-gradient(135deg, #10b981 0%, #059669 100%); --wss-grad-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); --wss-grad-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); --wss-grad-info: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); --wss-grad-teal: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 100%); /* ================================================================= ALIAS REMAP — every legacy naming system points to the palette so all pages render the same colours. ================================================================= */ /* style.css / light-mode.css family */ --primary-color: var(--wss-emerald); --primary-hover: var(--wss-emerald-600); --primary-light: #d1fae5; --primary-glow: rgba(16, 185, 129, 0.22); --secondary-color: var(--wss-teal); --success-color: var(--wss-emerald); --danger-color: var(--wss-red); --warning-color: var(--wss-amber); --info-color: var(--wss-teal); --accent-cyan: #2dd4bf; --accent-rose: var(--wss-red); --accent-emerald: var(--wss-emerald-400); --gradient-primary: var(--wss-grad-primary); --gradient-success: var(--wss-grad-success); --gradient-danger: var(--wss-grad-danger); --gradient-warning: var(--wss-grad-warning); --gradient-info: var(--wss-grad-info); --gradient-teal: var(--wss-grad-teal); /* Neutralise the off-brand indigo/magenta gradients */ --gradient-purple: var(--wss-grad-info); --gradient-pink: var(--wss-grad-teal); /* theme.css family */ --wss-primary: var(--wss-emerald); --wss-primary-600: var(--wss-emerald-600); --wss-primary-400: var(--wss-emerald-400); --wss-primary-light: rgba(16, 185, 129, 0.12); --wss-primary-border: rgba(16, 185, 129, 0.28); --wss-accent: var(--wss-amber); --wss-accent-600: var(--wss-amber-600); /* modern.css family */ --md-primary: var(--wss-emerald); --md-primary-hover: var(--wss-emerald-600); --md-success: var(--wss-emerald); --md-warning: var(--wss-amber); --md-danger: var(--wss-red); /* landing / auth inline family (home.php, index.php, auth.php) */ --primary: var(--wss-emerald); --primary-600: var(--wss-emerald-600); --primary-400: var(--wss-emerald-400); --accent: var(--wss-amber); --accent-600: var(--wss-amber-600); --danger: var(--wss-red); /* data-table.css family (minor off-palette selection colours) */ --dt-primary: var(--wss-emerald); --dt-primary-light: rgba(16, 185, 129, 0.10); --dt-row-selected: rgba(16, 185, 129, 0.12); --dt-row-focused: rgba(16, 185, 129, 0.16); --dt-focus-ring: var(--wss-emerald); --dt-bulk-bg: var(--wss-ink-700); } /* --------------------------------------------------------------------- Theme overrides — keep the SAME emerald brand whether the host page declares data-theme="light" or data-theme="dark". This is what kills the old indigo/purple "dark theme" that clashed with the rest of the product. Brand hue is constant; only neutrals shift. --------------------------------------------------------------------- */ html[data-theme="dark"], [data-theme="dark"] { /* Brand stays emerald (was overridden to indigo #818cf8 in style.css) */ --primary-color: var(--wss-emerald); --primary-hover: var(--wss-emerald-400); --primary-glow: rgba(16, 185, 129, 0.25); --secondary-color: var(--wss-teal); --success-color: var(--wss-emerald-400); --danger-color: #f87171; --warning-color: #fbbf24; --info-color: #2dd4bf; --accent-cyan: #67e8f9; --accent-rose: #fb7185; --accent-emerald: #6ee7b7; --gradient-primary: var(--wss-grad-primary); --gradient-purple: var(--wss-grad-info); --gradient-pink: var(--wss-grad-teal); --primary: var(--wss-emerald); --primary-400: var(--wss-emerald-400); --primary-600: var(--wss-emerald-600); --wss-primary: var(--wss-emerald); --wss-primary-400: var(--wss-emerald-400); --md-primary: var(--wss-emerald); } html[data-theme="light"], [data-theme="light"] { --primary-color: var(--wss-emerald); --primary-hover: var(--wss-emerald-600); --secondary-color: var(--wss-teal); --gradient-purple: var(--wss-grad-info); --gradient-pink: var(--wss-grad-teal); }