/* ============================================================================= Africa Conglomerate — Colour-mode variables (theme.css) Load this BEFORE all other custom CSS so every file can reference these variables via var(). Bootstrap 5.3.3 switches modes via data-bs-theme on . Light is the default; dark activates when data-bs-theme="dark" is set. ============================================================================= */ /* ── Light mode (default) ─────────────────────────────────────────────────── */ :root, [data-bs-theme="light"] { /* * Sidebar — intentionally always dark regardless of colour mode. * The dark sidebar is a deliberate design decision for this dashboard. * Only the main content area (#dashboard-main-bg) adapts to the mode. */ --sidebar-bg: #111827; --sidebar-header-bg: #0f172a; --sidebar-header-border: rgba(255, 255, 255, 0.08); --sidebar-header-text: #f9fafb; --sidebar-text: #e5e7eb; --sidebar-text-muted: #9ca3af; --sidebar-link: #d1d5db; --sidebar-section-hover-bg: rgba(255, 255, 255, 0.05); --sidebar-link-hover-bg: rgba(255, 255, 255, 0.07); --sidebar-link-hover-text: #f9fafb; --sidebar-link-active-bg: rgba(59, 130, 246, 0.15); --sidebar-link-active-text: #93c5fd; --sidebar-link-accent: #3b82f6; --sidebar-link-disabled: #4b5563; --sidebar-close-color: #9ca3af; --sidebar-hamburger-color: #d1d5db; --sidebar-overlay-bg: rgba(0, 0, 0, 0.5); --sidebar-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Dashboard layout */ --dashboard-main-bg: #f9fafb; --mobile-header-bg: #111827; --mobile-header-border: rgba(255, 255, 255, 0.08); /* Brand wordmark */ --brand-color: #c9952a; --brand-hover-color: #a67820; /* Star rating & accent */ --star-default: #bebebe; --accent-orange: #fb8900; /* Approval timeline */ --timeline-border: #e0e0e0; --timeline-dot-default: #999; --timeline-content-bg: #fafafa; /* Semantic danger text */ --text-danger-custom: darkred; /* Site header (public / carousel pages) */ --site-header-bg: rgba(255, 255, 255, 0.9); --site-header-link: #444; --site-header-link-hover: #111; /* Decorative product-device mockups */ --product-device-bg: #ccc; --product-device-2-bg: #8b0000; /* Dropdown submenu arrows */ --dropdown-arrow: #999; --dropdown-arrow-hover: #333; /* Body text on public/carousel pages */ --body-muted-text: #5a5a5a; } /* ── Dark mode ────────────────────────────────────────────────────────────── */ [data-bs-theme="dark"] { /* Sidebar */ --sidebar-bg: #111827; --sidebar-header-bg: #0f172a; --sidebar-header-border: rgba(255, 255, 255, 0.08); --sidebar-header-text: #f9fafb; --sidebar-text: #e5e7eb; --sidebar-text-muted: #9ca3af; --sidebar-link: #d1d5db; --sidebar-section-hover-bg: rgba(255, 255, 255, 0.05); --sidebar-link-hover-bg: rgba(255, 255, 255, 0.07); --sidebar-link-hover-text: #f9fafb; --sidebar-link-active-bg: rgba(59, 130, 246, 0.15); --sidebar-link-active-text: #93c5fd; --sidebar-link-accent: #3b82f6; --sidebar-link-disabled: #4b5563; --sidebar-close-color: #9ca3af; --sidebar-hamburger-color: #d1d5db; --sidebar-overlay-bg: rgba(0, 0, 0, 0.5); --sidebar-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Dashboard layout */ --dashboard-main-bg: #0f172a; --mobile-header-bg: #111827; --mobile-header-border: rgba(255, 255, 255, 0.08); /* Brand wordmark */ --brand-color: #f5c842; --brand-hover-color: #ffd966; /* Star rating & accent */ --star-default: #4b5563; --accent-orange: #ffa733; /* Approval timeline */ --timeline-border: #374151; --timeline-dot-default: #6b7280; --timeline-content-bg: #1f2937; /* Semantic danger text */ --text-danger-custom: #f87171; /* Site header (public / carousel pages) */ --site-header-bg: rgba(0, 0, 0, 0.85); --site-header-link: #8e8e8e; --site-header-link-hover: #fff; /* Decorative product-device mockups */ --product-device-bg: #333; --product-device-2-bg: darkred; /* Dropdown submenu arrows */ --dropdown-arrow: #ccc; --dropdown-arrow-hover: #fff; /* Body text on public/carousel pages */ --body-muted-text: #9ca3af; }