/* Typography loaded in HTML via high-performance preconnected */
/* Dynamic Linear Light Mode Design System Root Tokens */
:root {
--primary: #165DFF;
--primary-hover: #0E4BD9;
--primary-glow: rgba(22, 93, 255, 0.15);
--background-base: #FEFEFD;
--background-elevated: #FFFFFF;
--surface: rgba(255, 255, 255, 0.85);
--surface-hover: rgba(255, 255, 255, 0.95);
--foreground: #0F172A;
--secondary: #64748B;
--muted: #FEFEFD;
--border: #E2E8F0;
--border-hover: rgba(22, 93, 255, 0.3);
--card-grey: #FEFEFD;
--success: #10B981;
--success-light: #ECFDF5;
--error: #EF4444;
--error-light: #FEF2F2;
--warning: #F59E0B;
--warning-light: #FFFBEB;
--info: #3B82F6;
--info-light: #EFF6FF;
--font-sans: 'Inter', 'Lexend Deca', system-ui, -apple-system, sans-serif;
--font-heading: 'Lexend Deca', 'Inter', sans-serif;
}
/* Dynamic Linear Dark Mode (Night Mode) Design System Root Tokens */
html.dark {
--background-base: #0B0F17;
--background-elevated: #111827;
--surface: rgba(17, 24, 39, 0.88);
--surface-hover: rgba(30, 41, 59, 0.95);
--foreground: #F8FAFC;
--secondary: #94A3B8;
--muted: #0F172A;
--border: #1E293B;
--border-hover: rgba(59, 130, 246, 0.5);
--card-grey: #111827;
--success-light: rgba(16, 185, 129, 0.15);
--error-light: rgba(239, 68, 68, 0.15);
--warning-light: rgba(245, 158, 11, 0.15);
--info-light: rgba(59, 130, 246, 0.15);
/* Theme Variable Overrides (All 16 Store Themes) */
/* 1. Furniture & Nordic Themes */
--fn-bg: #0B0F17;
--fn-bg-soft: #0F172A;
--fn-card: #111827;
--fn-border: #1E293B;
--fn-border-hover: #334155;
--fn-dark: #F8FAFC;
--fn-text: #E2E8F0;
--fn-muted: #94A3B8;
--fn-green-subtle: rgba(44, 62, 53, 0.4);
--fn-wood-subtle: rgba(140, 109, 83, 0.3);
/* 2. Automotive & Heavy Industrial */
--at-bg: #0B0F17;
--at-bg-soft: #0F172A;
--at-card: #111827;
--at-border: #1E293B;
--at-border-hover: #334155;
--at-amber: #F59E0B;
--at-amber-hover: #D97706;
--at-amber-subtle: rgba(245, 158, 11, 0.15);
--at-dark: #F8FAFC;
--at-text: #E2E8F0;
--at-muted: #94A3B8;
/* 3. Beauty & Glow Bloom */
--bt-bg: #0B0F17;
--bt-bg-soft: #0F172A;
--bt-card: #111827;
--bt-border: #1E293B;
--bt-border-hover: #334155;
--bt-rose: #FB7185;
--bt-rose-hover: #F43F5E;
--bt-rose-subtle: rgba(251, 113, 133, 0.15);
--bt-gold: #F59E0B;
--bt-gold-subtle: rgba(245, 158, 11, 0.12);
--bt-dark: #F8FAFC;
--bt-text: #E2E8F0;
--bt-muted: #94A3B8;
/* 4. Books & Paper Quill */
--bk-bg: #0B0F17;
--bk-bg-soft: #0F172A;
--bk-card: #111827;
--bk-border: #1E293B;
--bk-border-hover: #334155;
--bk-brown: #D97706;
--bk-brown-dark: #F59E0B;
--bk-brown-subtle: rgba(217, 119, 6, 0.15);
--bk-dark: #F8FAFC;
--bk-text: #E2E8F0;
--bk-muted: #94A3B8;
/* 5. Botanical & Green Haven */
--bt-green: #34D399;
--bt-green-subtle: rgba(52, 211, 153, 0.15);
--bt-moss: #10B981;
--bt-coral: #FB7185;
/* 6. Coffee & Single Origin */
--cf-bg: #0B0F17;
--cf-bg-soft: #0F172A;
--cf-card: #111827;
--cf-border: #1E293B;
--cf-border-hover: #334155;
--cf-roast: #F59E0B;
--cf-amber: #D97706;
--cf-amber-subtle: rgba(217, 119, 6, 0.15);
--cf-dark: #F8FAFC;
--cf-text: #E2E8F0;
--cf-muted: #94A3B8;
/* 7. Culinary & Gourmet */
--cl-bg: #0B0F17;
--cl-bg-warm: #0B0F17;
--cl-bg-soft: #0F172A;
--cl-card: #111827;
--cl-border: #1E293B;
--cl-border-hover: #334155;
--cl-warm: #FB923C;
--cl-warm-hover: #F97316;
--cl-warm-subtle: rgba(251, 146, 60, 0.15);
--cl-dark: #F8FAFC;
--cl-text: #E2E8F0;
--cl-muted: #94A3B8;
/* 8. Digital & Tech Cyber */
--dg-bg: #0A0C14;
--dg-bg-alt: #101320;
--dg-surface: #151828;
--dg-surface-hover: #1E233A;
--dg-border: rgba(255, 255, 255, 0.08);
--dg-border-hover: rgba(56, 189, 248, 0.4);
--dg-text-main: #F8FAFC;
--dg-text-muted: #94A3B8;
--dg-text-sub: #64748B;
/* 9. Fashion & Editorial Luxury */
--f-black: #F8FAFC;
--f-dark: #F1F5F9;
--f-white: #0B0F17;
--f-gold: #D4AF37;
--f-gold-lt: #F3E5AB;
--f-gray: #94A3B8;
--f-light: #111827;
--f-border: rgba(212, 175, 55, 0.3);
/* 10. Health & Pure Vitality */
--hl-bg: #0B0F17;
--hl-bg-soft: #0F172A;
--hl-card: #111827;
--hl-border: #1E293B;
--hl-border-hover: #334155;
--hl-emerald: #34D399;
--hl-emerald-hover: #10B981;
--hl-emerald-subtle: rgba(52, 211, 153, 0.15);
--hl-teal: #2DD4BF;
--hl-dark: #F8FAFC;
--hl-text: #E2E8F0;
--hl-muted: #94A3B8;
/* 11. Jewelry & Royal Atelier */
--jw-bg: #0B0F17;
--jw-bg-soft: #0F172A;
--jw-card: #111827;
--jw-border: #1E293B;
--jw-border-hover: #334155;
--jw-gold: #F59E0B;
--jw-gold-dark: #FBBF24;
--jw-gold-subtle: rgba(245, 158, 11, 0.15);
--jw-dark: #F8FAFC;
--jw-text: #E2E8F0;
--jw-muted: #94A3B8;
/* 12. Kids & Joy Play */
--kd-bg: #0B0F17;
--kd-bg-soft: #0F172A;
--kd-card: #111827;
--kd-border: #1E293B;
--kd-border-hover: #334155;
--kd-blue: #38BDF8;
--kd-blue-hover: #0EA5E9;
--kd-blue-subtle: rgba(56, 189, 248, 0.15);
--kd-yellow: #FBBF24;
--kd-mint: #34D399;
--kd-pink: #F472B6;
--kd-dark: #F8FAFC;
--kd-text: #E2E8F0;
--kd-muted: #94A3B8;
/* 13. Modest & Syar'i Elegance */
--md-bg: #0B0F17;
--md-bg-soft: #0F172A;
--md-card: #111827;
--md-border: #1E293B;
--md-border-hover: #334155;
--md-rose: #F472B6;
--md-rose-subtle: rgba(244, 114, 182, 0.15);
--md-khaki: #D97706;
--md-dark: #F8FAFC;
--md-text: #E2E8F0;
--md-muted: #94A3B8;
/* 14. Pets & Paws Whiskers */
--pt-bg: #0B0F17;
--pt-bg-soft: #0F172A;
--pt-card: #111827;
--pt-border: #1E293B;
--pt-border-hover: #334155;
--pt-amber: #FBBF24;
--pt-amber-dark: #F59E0B;
--pt-amber-subtle: rgba(251, 191, 36, 0.15);
--pt-cyan: #22D3EE;
--pt-cyan-subtle: rgba(34, 211, 238, 0.15);
--pt-dark: #F8FAFC;
--pt-text: #E2E8F0;
--pt-muted: #94A3B8;
/* 15. Sports & Apex Performance */
--sp-bg: #0B0F17;
--sp-bg-soft: #0F172A;
--sp-card: #111827;
--sp-border: #1E293B;
--sp-border-hover: #334155;
--sp-volt: #A3E635;
--sp-volt-dark: #84CC16;
--sp-volt-subtle: rgba(163, 230, 53, 0.15);
--sp-orange: #FB923C;
--sp-dark: #F8FAFC;
--sp-text: #E2E8F0;
--sp-muted: #94A3B8;
color-scheme: dark;
}
html {
max-width: 100% !important;
overflow-x: hidden !important;
overflow-y: auto !important;
width: 100%;
}
body {
max-width: 100% !important;
overflow-x: hidden !important;
overflow-y: visible !important;
overscroll-behavior: auto !important;
width: 100%;
background-color: var(--background-base);
color: var(--foreground);
font-family: var(--font-sans);
margin: 0;
padding: 0;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Standard Elegant Desktop Scrollbars */
::-webkit-scrollbar {
width: 9px;
height: 9px;
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.04);
}
::-webkit-scrollbar-thumb {
background: #CBD5E1;
border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
background: #94A3B8;
}
/* Scrollbar Hide Utility */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
/* Subtle Ambient Noise Texture Overlay */
.organic-noise {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
opacity: 0.015;
z-index: 9999;
pointer-events: none;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
/* Headings typography mapping */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
letter-spacing: -0.02em;
}
/* Linear Multi-Layer Shadows (Light Mode) */
.shadow-linear {
box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.05), 0 2px 16px -2px rgba(15, 23, 42, 0.06), 0 0 30px -5px rgba(22, 93, 255, 0.04);
}
.shadow-linear-hover {
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.shadow-linear-hover:hover {
box-shadow: 0 0 0 1px rgba(22, 93, 255, 0.25), 0 12px 32px -4px rgba(22, 93, 255, 0.12), 0 0 50px -10px rgba(22, 93, 255, 0.15);
transform: translateY(-3px);
}
.shadow-glow-primary {
box-shadow: 0 0 0 1px rgba(22, 93, 255, 0.4), 0 4px 16px rgba(22, 93, 255, 0.3), inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
}
/* Linear Glassmorphism Card Surface */
.linear-card {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(226, 232, 240, 0.8);
border-radius: 1.25rem;
}
.linear-card-hover {
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.linear-card-hover:hover {
background: rgba(255, 255, 255, 0.98);
border-color: rgba(22, 93, 255, 0.3);
box-shadow: 0 10px 30px -5px rgba(22, 93, 255, 0.1);
transform: translateY(-2px);
}
/* Gradient Text Treatment */
.gradient-text-dark {
background: linear-gradient(180deg, #0F172A 0%, #334155 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.gradient-text-primary {
background: linear-gradient(135deg, #165DFF 0%, #3B82F6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Animated Ambient Blobs (Light Mode) */
@keyframes floatBlob {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-25px) rotate(3deg); }
}
.ambient-blob {
animation: floatBlob 10s ease-in-out infinite;
}
/* Desktop containers constraint */
.desktop-ramped {
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
box-sizing: border-box !important;
}
@media (min-width: 640px) {
.desktop-ramped {
padding-left: 2rem !important;
padding-right: 2rem !important;
}
}
@media (min-width: 1024px) {
.desktop-ramped {
padding-left: 2.5rem !important;
padding-right: 2.5rem !important;
}
}
.admin-desktop-ramped {
max-width: 1380px;
margin-left: auto;
margin-right: auto;
}
/* ==========================================================================
Dark Mode Component & Surface Styles
========================================================================== */
html.dark body {
background-color: var(--background-base);
color: var(--foreground);
}
/* Linear & Glassmorphism Card Surface in Dark Mode */
html.dark .linear-card,
html.dark .glass-card {
background: rgba(17, 24, 39, 0.85) !important;
border-color: rgba(30, 41, 59, 0.9) !important;
}
html.dark .linear-card-hover:hover,
html.dark .glass-card:hover {
background: rgba(30, 41, 59, 0.95) !important;
border-color: rgba(59, 130, 246, 0.4) !important;
box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.6) !important;
}
/* Gradient Headings in Dark Mode */
html.dark h1.text-transparent,
html.dark h2.text-transparent {
background-image: linear-gradient(to right, #FFFFFF, #94A3B8) !important;
-webkit-background-clip: text !important;
}
/* Sidebar Profile Card in Dark Mode */
html.dark #sidebar-user-card {
background-color: #111827 !important;
border-color: #1E293B !important;
}
html.dark #sidebar-user-card p {
color: #F8FAFC !important;
}
html.dark #sidebar-user-card p.text-secondary {
color: #94A3B8 !important;
}
/* All Store Theme Containers & Cards in Dark Mode */
html.dark .at-theme,
html.dark .bt-theme,
html.dark .bk-theme,
html.dark .cf-theme,
html.dark .cl-theme,
html.dark .fn-theme,
html.dark .hl-theme,
html.dark .jw-theme,
html.dark .kd-theme,
html.dark .md-theme,
html.dark .pt-theme,
html.dark .sp-theme,
html.dark .ft,
html.dark .dg-theme-dark,
html.dark .dg-theme-light {
background-color: #0B0F17 !important;
color: #E2E8F0 !important;
}
html.dark [class*="-white-card"],
html.dark .at-white-card,
html.dark .bt-white-card,
html.dark .bk-white-card,
html.dark .cf-white-card,
html.dark .cl-white-card,
html.dark .fn-white-card,
html.dark .hl-white-card,
html.dark .jw-white-card,
html.dark .kd-white-card,
html.dark .md-white-card,
html.dark .pt-white-card,
html.dark .sp-white-card,
html.dark .bs-card,
html.dark .flash-card,
html.dark .ba-card {
background-color: #111827 !important;
border-color: #1E293B !important;
color: #F8FAFC !important;
}
html.dark [class*="btn-"][class*="-white"],
html.dark .btn-at-white,
html.dark .btn-bt-white,
html.dark .btn-bk-white,
html.dark .btn-cf-white,
html.dark .btn-cl-white,
html.dark .btn-fn-white,
html.dark .btn-hl-white,
html.dark .btn-jw-white,
html.dark .btn-kd-white,
html.dark .btn-md-white,
html.dark .btn-pt-white,
html.dark .btn-sp-white {
background-color: #1E293B !important;
color: #F8FAFC !important;
border-color: #334155 !important;
}
html.dark [class*="btn-"][class*="-white"]:hover,
html.dark .btn-at-white:hover,
html.dark .btn-bt-white:hover,
html.dark .btn-bk-white:hover,
html.dark .btn-cf-white:hover,
html.dark .btn-cl-white:hover,
html.dark .btn-fn-white:hover,
html.dark .btn-hl-white:hover,
html.dark .btn-jw-white:hover,
html.dark .btn-kd-white:hover,
html.dark .btn-md-white:hover,
html.dark .btn-pt-white:hover,
html.dark .btn-sp-white:hover {
background-color: #334155 !important;
color: #FFFFFF !important;
border-color: #475569 !important;
}
/* Surface & Background Dark Mode Overrides */
html.dark .bg-white:not([data-color="white"]):not(.keep-white),
html.dark [class*="bg-[#FFFFFF]"]:not([data-color="white"]):not(.keep-white),
html.dark [class*="bg-[#ffffff]"]:not([data-color="white"]):not(.keep-white) {
background-color: #111827 !important;
}
html.dark [class*="bg-white/"] {
background-color: rgba(17, 24, 39, 0.6) !important;
}
html.dark .bg-slate-50,
html.dark .bg-gray-50,
html.dark .bg-neutral-50,
html.dark .bg-stone-50 {
background-color: #0B0F17 !important;
}
html.dark [class*="bg-slate-50/"] {
background-color: rgba(15, 23, 42, 0.8) !important;
}
html.dark .bg-slate-100,
html.dark .bg-gray-100 {
background-color: #1E293B !important;
}
html.dark .bg-slate-200,
html.dark .bg-gray-200 {
background-color: #334155 !important;
}
/* Status Badges in Dark Mode */
html.dark .bg-blue-50 {
background-color: rgba(59, 130, 246, 0.15) !important;
color: #60A5FA !important;
border-color: rgba(59, 130, 246, 0.3) !important;
}
html.dark .bg-emerald-50 {
background-color: rgba(16, 185, 129, 0.15) !important;
color: #34D399 !important;
border-color: rgba(16, 185, 129, 0.3) !important;
}
html.dark .bg-indigo-50 {
background-color: rgba(99, 102, 241, 0.15) !important;
color: #818CF8 !important;
border-color: rgba(99, 102, 241, 0.3) !important;
}
html.dark .bg-amber-50 {
background-color: rgba(245, 158, 11, 0.15) !important;
color: #FBBF24 !important;
border-color: rgba(245, 158, 11, 0.3) !important;
}
html.dark .bg-rose-50 {
background-color: rgba(239, 68, 68, 0.15) !important;
color: #F87171 !important;
border-color: rgba(239, 68, 68, 0.3) !important;
}
/* Borders in Dark Mode */
html.dark .border-border,
html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-300,
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark [class*="border-[#ECE7DF]"],
html.dark [class*="border-[#F3F4F3]"],
html.dark [class*="border-[#f3f4f3]"] {
border-color: #1E293B !important;
}
/* Checkout Payment Method Cards */
.checkout-payment-card {
background-color: #FFFFFF;
border: 1px solid #E2E8F0;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.checkout-payment-card:hover {
border-color: var(--color-primary, #165DFF) !important;
}
.checkout-payment-card:has(input:checked) {
border-color: var(--color-primary, #165DFF) !important;
background-color: rgba(22, 93, 255, 0.04) !important;
}
html.dark .checkout-payment-card {
background-color: #1E293B !important;
border-color: #334155 !important;
}
html.dark .checkout-payment-card:hover {
border-color: #3B82F6 !important;
}
html.dark .checkout-payment-card:has(input:checked) {
border-color: #3B82F6 !important;
background-color: rgba(30, 58, 138, 0.35) !important;
}
html.dark .checkout-payment-card .payment-title {
color: #F8FAFC !important;
}
html.dark .checkout-payment-card .payment-desc {
color: #94A3B8 !important;
}
/* ==========================================================================
Comprehensive Dark Mode Text & Contrast Overrides
========================================================================== */
/* 1. Universal Foreground Headings & Heavy Text */
html.dark .text-foreground,
html.dark .text-black,
html.dark .text-slate-950,
html.dark .text-slate-900,
html.dark .text-slate-800,
html.dark .text-gray-950,
html.dark .text-gray-900,
html.dark .text-gray-800,
html.dark .text-stone-950,
html.dark .text-stone-900,
html.dark .text-stone-800,
html.dark .text-zinc-950,
html.dark .text-zinc-900,
html.dark .text-zinc-800,
html.dark .text-neutral-950,
html.dark .text-neutral-900,
html.dark .text-neutral-800,
html.dark [class*="text-[#080C1A]"],
html.dark [class*="text-[#080c1a]"],
html.dark [class*="text-[#0F172A]"],
html.dark [class*="text-[#0f172a]"],
html.dark [class*="text-[#1C1917]"],
html.dark [class*="text-[#1c1917]"],
html.dark [class*="text-[#2D2623]"],
html.dark [class*="text-[#2d2623]"],
html.dark [class*="text-[#2D231E]"],
html.dark [class*="text-[#2d231e]"],
html.dark [class*="text-[#1E2320]"],
html.dark [class*="text-[#1e2320]"] {
color: #F8FAFC !important;
}
/* 2. Secondary & Body Content Text (Readable soft silver) */
html.dark .text-secondary,
html.dark .text-slate-700,
html.dark .text-slate-600,
html.dark .text-gray-700,
html.dark .text-gray-600,
html.dark .text-stone-700,
html.dark .text-stone-600,
html.dark .text-zinc-700,
html.dark .text-zinc-600,
html.dark .text-neutral-700,
html.dark .text-neutral-600,
html.dark [class*="text-[#6A7686]"],
html.dark [class*="text-[#6a7686]"],
html.dark [class*="text-[#6E7872]"],
html.dark [class*="text-[#6e7872]"],
html.dark [class*="text-[#363D39]"],
html.dark [class*="text-[#363d39]"],
html.dark [class*="text-[#8C6D53]"],
html.dark [class*="text-[#8c6d53]"],
html.dark [class*="text-[#8D7F70]"],
html.dark [class*="text-[#7E726D]"],
html.dark [class*="text-[#7D6E65]"] {
color: #CBD5E1 !important;
}
/* 3. Muted & Subtitle Text */
html.dark .text-slate-500,
html.dark .text-slate-400,
html.dark .text-gray-500,
html.dark .text-gray-400,
html.dark .text-stone-500,
html.dark .text-stone-400,
html.dark .text-zinc-500,
html.dark .text-zinc-400,
html.dark .text-neutral-500,
html.dark .text-neutral-400 {
color: #94A3B8 !important;
}
/* 4. Deep Colored Box / Badge Texts */
html.dark .text-blue-950,
html.dark .text-blue-900,
html.dark .text-blue-800 {
color: #BFDBFE !important;
}
html.dark .text-blue-700 {
color: #93C5FD !important;
}
html.dark .text-emerald-950,
html.dark .text-emerald-900,
html.dark .text-emerald-800,
html.dark .text-green-950,
html.dark .text-green-900,
html.dark .text-green-800,
html.dark [class*="text-[#064E3B]"],
html.dark [class*="text-[#2C3E35]"] {
color: #A7F3D0 !important;
}
html.dark .text-emerald-700,
html.dark .text-green-700 {
color: #6EE7B7 !important;
}
html.dark .text-purple-950,
html.dark .text-purple-900,
html.dark .text-purple-800 {
color: #E9D5FF !important;
}
html.dark .text-purple-700 {
color: #D8B4FE !important;
}
html.dark .text-amber-950,
html.dark .text-amber-900,
html.dark .text-amber-800,
html.dark .text-yellow-950,
html.dark .text-yellow-900,
html.dark .text-yellow-800,
html.dark [class*="text-[#78350F]"],
html.dark [class*="text-[#92400E]"],
html.dark [class*="text-[#B45309]"] {
color: #FDE68A !important;
}
html.dark .text-amber-700,
html.dark .text-yellow-700 {
color: #FCD34D !important;
}
html.dark .text-rose-950,
html.dark .text-rose-900,
html.dark .text-rose-800,
html.dark .text-red-950,
html.dark .text-red-900,
html.dark .text-red-800 {
color: #FECDD3 !important;
}
html.dark .text-rose-700,
html.dark .text-red-700 {
color: #FDA4AF !important;
}
html.dark .text-indigo-950,
html.dark .text-indigo-900,
html.dark .text-indigo-800 {
color: #C7D2FE !important;
}
html.dark .text-indigo-700 {
color: #A5B4FC !important;
}
html.dark .text-cyan-950,
html.dark .text-cyan-900,
html.dark .text-cyan-800,
html.dark .text-sky-950,
html.dark .text-sky-900,
html.dark .text-sky-800 {
color: #A5F3FC !important;
}
html.dark .text-cyan-700,
html.dark .text-sky-700 {
color: #67E8F9 !important;
}
/* 5. Colored Box Backgrounds (Light mode tints -> Sleek Dark Tints) */
html.dark [class*="bg-cyan-50"],
html.dark [class*="bg-cyan-100"],
html.dark [class*="bg-sky-50"],
html.dark [class*="bg-sky-100"] {
background-color: rgba(8, 51, 68, 0.35) !important;
}
html.dark [class*="border-cyan-100"],
html.dark [class*="border-cyan-200"],
html.dark [class*="border-cyan-300"],
html.dark [class*="border-sky-100"],
html.dark [class*="border-sky-200"],
html.dark [class*="border-sky-300"] {
border-color: rgba(6, 182, 212, 0.35) !important;
}
html.dark [class*="bg-blue-50"],
html.dark [class*="bg-blue-100"] {
background-color: rgba(30, 58, 138, 0.25) !important;
}
html.dark [class*="border-blue-100"],
html.dark [class*="border-blue-200"] {
border-color: rgba(59, 130, 246, 0.3) !important;
}
html.dark [class*="bg-emerald-50"],
html.dark [class*="bg-emerald-100"],
html.dark [class*="bg-green-50"],
html.dark [class*="bg-green-100"] {
background-color: rgba(6, 78, 59, 0.25) !important;
}
html.dark [class*="border-emerald-100"],
html.dark [class*="border-emerald-200"],
html.dark [class*="border-green-100"],
html.dark [class*="border-green-200"] {
border-color: rgba(16, 185, 129, 0.3) !important;
}
html.dark [class*="bg-purple-50"],
html.dark [class*="bg-purple-100"] {
background-color: rgba(88, 28, 135, 0.25) !important;
}
html.dark [class*="border-purple-100"],
html.dark [class*="border-purple-200"] {
border-color: rgba(147, 51, 234, 0.3) !important;
}
html.dark [class*="bg-amber-50"],
html.dark [class*="bg-amber-100"] {
background-color: rgba(120, 53, 15, 0.25) !important;
}
html.dark [class*="border-amber-100"],
html.dark [class*="border-amber-200"] {
border-color: rgba(245, 158, 11, 0.3) !important;
}
html.dark [class*="bg-rose-50"],
html.dark [class*="bg-rose-100"],
html.dark [class*="bg-red-50"],
html.dark [class*="bg-red-100"] {
background-color: rgba(136, 19, 55, 0.25) !important;
}
html.dark [class*="border-rose-100"],
html.dark [class*="border-rose-200"],
html.dark [class*="border-red-100"],
html.dark [class*="border-red-200"] {
border-color: rgba(244, 63, 94, 0.3) !important;
}
html.dark [class*="bg-indigo-50"],
html.dark [class*="bg-indigo-100"] {
background-color: rgba(49, 46, 129, 0.25) !important;
}
html.dark [class*="border-indigo-100"],
html.dark [class*="border-indigo-200"] {
border-color: rgba(99, 102, 241, 0.3) !important;
}
/* Neutralize light gradient callout boxes in dark mode */
html.dark [class*="bg-gradient-"][class*="from-cyan-50"],
html.dark [class*="bg-gradient-"][class*="from-sky-50"],
html.dark [class*="bg-gradient-"][class*="from-blue-50"] {
background-image: none !important;
background-color: rgba(15, 23, 42, 0.85) !important;
}
html.dark [class*="bg-gradient-"][class*="from-amber-50"],
html.dark [class*="bg-gradient-"][class*="from-yellow-50"],
html.dark [class*="bg-gradient-"][class*="from-orange-50"] {
background-image: none !important;
background-color: rgba(120, 53, 15, 0.25) !important;
}
html.dark [class*="bg-gradient-"][class*="from-emerald-50"],
html.dark [class*="bg-gradient-"][class*="from-green-50"] {
background-image: none !important;
background-color: rgba(6, 78, 59, 0.25) !important;
}
html.dark [class*="bg-gradient-"][class*="from-rose-50"],
html.dark [class*="bg-gradient-"][class*="from-red-50"] {
background-image: none !important;
background-color: rgba(136, 19, 55, 0.25) !important;
}
html.dark [class*="bg-gradient-"][class*="from-purple-50"],
html.dark [class*="bg-gradient-"][class*="from-indigo-50"] {
background-image: none !important;
background-color: rgba(88, 28, 135, 0.25) !important;
}
/* 6. Form labels, headings & HTML Elements */
html.dark label {
color: #E2E8F0 !important;
}
html.dark h1:not([class*="text-"]):not([class*="gradient-text"]),
html.dark h2:not([class*="text-"]):not([class*="gradient-text"]),
html.dark h3:not([class*="text-"]):not([class*="gradient-text"]),
html.dark h4:not([class*="text-"]):not([class*="gradient-text"]),
html.dark h5:not([class*="text-"]):not([class*="gradient-text"]),
html.dark h6:not([class*="text-"]):not([class*="gradient-text"]) {
color: #F8FAFC !important;
}
html.dark strong,
html.dark b {
color: #F8FAFC;
}
html.dark th {
color: #94A3B8 !important;
}
html.dark select option {
background-color: #1E293B !important;
color: #F8FAFC !important;
}
html.dark input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(1);
}
/* 7. Inline styles fallback overrides for templates with hardcoded colors */
html.dark [style*="color:#0f172a"],
html.dark [style*="color: #0f172a"],
html.dark [style*="color:#080C1A"],
html.dark [style*="color: #080C1A"],
html.dark [style*="color:#080c1a"],
html.dark [style*="color: #080c1a"],
html.dark [style*="color:#1e293b"],
html.dark [style*="color: #1e293b"],
html.dark [style*="color:#334155"],
html.dark [style*="color: #334155"],
html.dark [style*="color:#2C2C24"],
html.dark [style*="color: #2C2C24"] {
color: #F8FAFC !important;
}
html.dark [style*="color:#64748b"],
html.dark [style*="color: #64748b"],
html.dark [style*="color:#475569"],
html.dark [style*="color: #475569"],
html.dark [style*="color:#78786C"],
html.dark [style*="color: #78786C"] {
color: #CBD5E1 !important;
}
html.dark [style*="background:white"]:not([data-color="white"]):not(.keep-white),
html.dark [style*="background: white"]:not([data-color="white"]):not(.keep-white),
html.dark [style*="background:#fff"]:not([data-color="white"]):not(.keep-white),
html.dark [style*="background: #fff"]:not([data-color="white"]):not(.keep-white),
html.dark [style*="background:#FFFFFF"]:not([data-color="white"]):not(.keep-white),
html.dark [style*="background: #FFFFFF"]:not([data-color="white"]):not(.keep-white),
html.dark [style*="background:#f8fafc"],
html.dark [style*="background: #f8fafc"] {
background-color: #111827 !important;
}
html.dark [style*="border:1.5px solid #e2e8f0"],
html.dark [style*="border: 1.5px solid #e2e8f0"],
html.dark [style*="border:1px solid #e2e8f0"],
html.dark [style*="border: 1px solid #e2e8f0"],
html.dark [style*="border:1.5px solid #cbd5e1"],
html.dark [style*="border: 1.5px solid #cbd5e1"],
html.dark [style*="border-bottom:1px solid #e2e8f0"],
html.dark [style*="border-bottom: 1px solid #e2e8f0"],
html.dark [style*="border-bottom:1px solid #f1f5f9"],
html.dark [style*="border-bottom: 1px solid #f1f5f9"] {
border-color: #1E293B !important;
}
/* Hover States in Dark Mode */
html.dark .hover\:bg-slate-50:hover,
html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-slate-100:hover {
background-color: #1E293B !important;
}
html.dark .hover\:text-slate-900:hover,
html.dark .hover\:text-gray-900:hover,
html.dark .group:hover .group-hover\:text-slate-900,
html.dark .group:hover .group-hover\:text-slate-800 {
color: #FFFFFF !important;
}
/* Dark Mode Typography & Shadows */
html.dark .gradient-text-dark {
background: linear-gradient(180deg, #FFFFFF 0%, #94A3B8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
html.dark .shadow-linear {
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 2px 16px -2px rgba(0, 0, 0, 0.5);
}
html.dark .shadow-2xl,
html.dark .shadow-xl,
html.dark .shadow-lg,
html.dark .shadow-md,
html.dark .shadow-sm {
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
}
/* Divide lines */
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
border-color: #1E293B !important;
}
/* Header Action Buttons in Dark Mode */
html.dark .header-action-btn,
html.dark button.header-action-btn {
background-color: #1E293B !important;
border: 1px solid #334155 !important;
}
html.dark .header-action-btn:hover,
html.dark button.header-action-btn:hover {
background-color: #334155 !important;
border-color: #475569 !important;
}
/* Form Controls in Dark Mode */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="color"]):not([type="file"]),
html.dark select,
html.dark textarea {
background-color: #1E293B !important;
border-color: #334155 !important;
color: #F8FAFC !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
color: #64748B !important;
}
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
border-color: var(--primary) !important;
outline: none !important;
}
/* File Inputs in Dark Mode */
html.dark input[type="file"] {
color: #94A3B8 !important;
}
html.dark input[type="file"]::file-selector-button {
background-color: #1E293B !important;
color: #F8FAFC !important;
border: 1px solid #334155 !important;
border-radius: 0.75rem;
padding: 0.375rem 0.75rem;
font-size: 0.75rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s ease;
}
html.dark input[type="file"]::-webkit-file-upload-button {
background-color: #1E293B !important;
color: #F8FAFC !important;
border: 1px solid #334155 !important;
border-radius: 0.75rem;
padding: 0.375rem 0.75rem;
font-size: 0.75rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s ease;
}
html.dark input[type="file"]::file-selector-button:hover,
html.dark input[type="file"]::-webkit-file-upload-button:hover {
background-color: #334155 !important;
color: #FFFFFF !important;
}
/* Tables in Dark Mode */
html.dark table thead th {
background-color: #0F172A !important;
color: #94A3B8 !important;
border-color: #1E293B !important;
}
html.dark table tbody tr {
border-color: #1E293B !important;
}
html.dark table tbody tr:hover {
background-color: rgba(30, 41, 59, 0.4) !important;
}
/* Scrollbars in Dark Mode */
html.dark ::-webkit-scrollbar {
width: 8px;
height: 8px;
}
html.dark ::-webkit-scrollbar-track {
background: #0B0F17;
}
html.dark ::-webkit-scrollbar-thumb {
background: #334155;
border-radius: 9999px;
}
html.dark ::-webkit-scrollbar-thumb:hover {
background: #475569;
}
/* SweetAlert2 Modal & Toast Dark Mode Support */
html.dark .swal2-popup {
background-color: #0F172A !important;
color: #F8FAFC !important;
border: 1px solid #1E293B !important;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4) !important;
}
html.dark .swal2-title {
color: #F8FAFC !important;
}
html.dark .swal2-html-container,
html.dark .swal2-content {
color: #CBD5E1 !important;
}
html.dark .swal2-close {
color: #94A3B8 !important;
}
html.dark .swal2-close:hover {
color: #F8FAFC !important;
}
html.dark .swal2-footer {
border-color: #1E293B !important;
color: #94A3B8 !important;
}