/* SmartTax Mitra Brand Colors */ :root { /* Primary Colors */ --brand-navy: #02194B; --brand-navy-hover: #03266D; --brand-green: #0C8564; --brand-green-hover: #0A7357; /* Status Colors */ --color-success: #16A34A; --color-warning: #F59E0B; --color-danger: #DC2626; --color-info: #3B82F6; /* Legacy aliases (kept for backwards compatibility with existing markup) */ --brand-navy-light: var(--brand-navy-hover); --brand-navy-dark: #011536; --brand-teal: var(--brand-green); --brand-teal-light: var(--brand-green-hover); --brand-teal-dark: var(--brand-green-hover); --brand-gray: #ded9d8; --brand-white: #ffffff; --brand-black: #000000; /* Text Colors */ --text-heading: #02194B; --text-primary: #02194B; --text-body: #475569; --text-secondary: #475569; --text-light: #64748B; /* Background Colors */ --bg-main: #F8FAFC; --bg-card: #FFFFFF; --bg-alt-section: #F1F5F9; --bg-primary: #F8FAFC; --bg-secondary: #F1F5F9; --bg-light: #FFFFFF; --bg-secondary-btn: #EEF2FF; /* Border Colors */ --border-color: #E2E8F0; --border-primary: #0C8564; --border-light: #E2E8F0; /* Sidebar */ --sidebar-bg: #02194B; --sidebar-active: #0C8564; --sidebar-hover: rgba(12, 133, 100, 0.12); --sidebar-text: #FFFFFF; --sidebar-icon-inactive: #CBD5E1; /* Dashboard Cards */ --dashboard-card-bg: #FFFFFF; --dashboard-card-border: #E5E7EB; --dashboard-card-hover: #F8FAFC; /* Input Fields */ --input-border: #CBD5E1; --input-focus: #0C8564; --input-placeholder: #94A3B8; /* Charts */ --chart-revenue: #02194B; --chart-profit: #0C8564; --chart-pending: #F59E0B; --chart-rejected: #EF4444; --chart-info: #3B82F6; } /* ========================================================== Dark theme overrides Applied when . Toggled + persisted via localStorage("themePreference") — see the theme-init script on each covered page. Covers: the homepage redesign sections (Trusted By / Services / Why Choose Us / How It Works / Popular Services / Statistics / Testimonials / Mobile App / FAQ), MobileTemplate, MobileTemplate/login.html, and the restyled retailerRegistration.html — all of which read these variables rather than hardcoded hex. Legacy hero carousel banners and the existing Bootstrap login/registration modals are not covered yet. ========================================================== */ :root[data-theme="dark"] { --brand-navy: #16294f; --brand-navy-hover: #1f386b; --brand-green: #14a37c; --brand-green-hover: #17bd90; --text-heading: #F1F5F9; --text-primary: #F1F5F9; --text-body: #CBD5E1; --text-secondary: #CBD5E1; --text-light: #94A3B8; --bg-main: #0B1220; --bg-card: #131B2E; --bg-alt-section: #101828; --bg-primary: #0B1220; --bg-secondary: #101828; --bg-light: #131B2E; --bg-secondary-btn: #1B2438; --border-color: #26314A; --border-light: #26314A; --dashboard-card-bg: #131B2E; --dashboard-card-border: #26314A; --dashboard-card-hover: #1B2438; --input-border: #33415C; --input-placeholder: #64748B; } /* Brand Color Applications */ .btn-primary, .btn-brand { background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-hover) 100%); border-color: var(--brand-navy); color: var(--brand-white); } .btn-primary:hover, .btn-brand:hover { background: linear-gradient(135deg, var(--brand-navy-hover) 0%, var(--brand-navy) 100%); border-color: var(--brand-navy-hover); } .btn-success { background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-hover) 100%); border-color: var(--brand-green); color: var(--brand-white); } .btn-success:hover { background: linear-gradient(135deg, var(--brand-green-hover) 0%, var(--brand-green) 100%); border-color: var(--brand-green-hover); } .btn-secondary { background: var(--bg-secondary-btn); border-color: var(--bg-secondary-btn); color: var(--brand-navy); } .btn-secondary:hover { background: #e0e6fb; border-color: #e0e6fb; } /* Accent Elements */ .accent-primary { color: var(--brand-green); } .accent-navy { color: var(--brand-navy); } .border-brand { border-color: var(--brand-green); } .bg-brand-light { background-color: var(--bg-main); } /* Buttons and Links */ a { color: var(--brand-navy); } a:hover { color: var(--brand-green); } /* Headings */ h1, h2, h3, h4, h5, h6 { color: var(--text-heading); } body, p { color: var(--text-body); } /* Input Focus States */ input:focus, textarea:focus, select:focus { border-color: var(--input-focus); box-shadow: 0 0 0 0.2rem rgba(12, 133, 100, 0.25); } input::placeholder, textarea::placeholder { color: var(--input-placeholder); } /* Badge and Labels */ .badge-primary { background-color: var(--brand-navy); } .badge-success { background-color: var(--color-success); } .badge-warning { background-color: var(--color-warning); } .badge-danger { background-color: var(--color-danger); } .badge-info { background-color: var(--color-info); } /* Cards */ .card { background-color: var(--dashboard-card-bg); border-color: var(--dashboard-card-border); } .card:hover { background-color: var(--dashboard-card-hover); } .card-header { background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-hover) 100%); color: var(--brand-white); } /* Sidebar */ .sidebar { background-color: var(--sidebar-bg); color: var(--sidebar-text); } .sidebar .nav-link { color: var(--sidebar-text); } .sidebar .nav-link .icon { color: var(--sidebar-icon-inactive); } .sidebar .nav-link:hover { background-color: var(--sidebar-hover); } .sidebar .nav-link.active { background-color: var(--sidebar-active); } /* Charts */ .chart-revenue { color: var(--chart-revenue); } .chart-profit { color: var(--chart-profit); } .chart-pending { color: var(--chart-pending); } .chart-rejected { color: var(--chart-rejected); } .chart-info { color: var(--chart-info); }