/**
 * IronCore Unified Theme System (Dark / Light Mode)
 * Complete Zero-Blending Guarantee with WCAG AAA Contrast
 */

:root {
    --bg-canvas: #eef2f6;        /* Cool Slate-100/200 canvas */
    --bg-surface: #ffffff;       /* Elevated pure white card */
    --bg-panel: #f8fafc;         /* Slate-50 recessed panel */
    --bg-track: #e2e8f0;         /* Slate-200 progress track */
    --bg-hover: #f1f5f9;         /* Slate-100 subtle hover */
    --border-strong: #cbd5e1;    /* Slate-300 high-definition border */
    --border-subtle: #e2e8f0;    /* Slate-200 divider */
    --text-primary: #0f172a;     /* Slate-900 sharp headings */
    --text-body: #1e293b;        /* Slate-800 crisp body */
    --text-secondary: #475569;   /* Slate-600 subtext */
    --text-muted: #64748b;       /* Slate-500 secondary labels */
    --brand-contrast: #c2410c;   /* Slate-friendly deep orange */
    --emerald-contrast: #047857; /* Rich deep green */
    --amber-contrast: #b45309;   /* Rich deep amber */
    --red-contrast: #dc2626;     /* Rich deep red */
    --shadow-card: 0 4px 14px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -2px rgba(15, 23, 42, 0.04);
    --shadow-modal: 0 25px 50px -12px rgba(15, 23, 42, 0.35);
}

html.dark {
    --bg-canvas: #0a0d14;
    --bg-surface: #121722;
    --bg-panel: #0d121c;
    --bg-track: #1e2638;
    --bg-hover: #1a2234;
    --border-strong: #1e2638;
    --border-subtle: #171d2b;
    --text-primary: #f8fafc;
    --text-body: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --brand-contrast: #fb923c;
    --emerald-contrast: #34d399;
    --amber-contrast: #fbbf24;
    --red-contrast: #f87171;
    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

body {
    background-color: var(--bg-canvas) !important;
    color: var(--text-body) !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* ==========================================================================
   1. CANVAS & CARD LEVEL SEPARATION (ZERO BLENDING)
   ========================================================================== */

/* Level 0: Canvas */
html:not(.dark) body,
html:not(.dark) body.bg-dark-bg,
html:not(.dark) body[class*="bg-dark"] {
    background-color: #eef2f6 !important;
    color: #0f172a !important;
}

/* Level 1: Elevated Cards */
html:not(.dark) .bg-dark-card,
html:not(.dark) [class*="bg-dark-card"],
html:not(.dark) .bg-\[\#121722\],
html:not(.dark) .bg-\[\#0f141f\] {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -2px rgba(15, 23, 42, 0.04) !important;
}

/* Top Navigation Bar */
html:not(.dark) header,
html:not(.dark) header.bg-dark-card\/90,
html:not(.dark) header.bg-dark-bg\/80,
html:not(.dark) header[class*="bg-dark"] {
    background-color: #ffffff !important;
    border-bottom: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

/* Level 2: Recessed Inner Panels inside Cards (Quota boxes, 2FA wizard, Tab containers) */
html:not(.dark) .bg-dark-bg:not(body),
html:not(.dark) [class*="bg-dark-bg"]:not(body),
html:not(.dark) .bg-\[\#0a0d14\]:not(body),
html:not(.dark) .bg-\[\#06080d\]:not(body) {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
}

/* Sections on Landing Page (Features, Pricing, Privacy) */
html:not(.dark) section#pricing,
html:not(.dark) section#pricing.bg-dark-card\/30 {
    background-color: #eef2f6 !important;
    border-top: 1px solid #cbd5e1 !important;
}

html:not(.dark) section#privacy,
html:not(.dark) section#privacy.bg-dark-card\/50 {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
}

html:not(.dark) footer,
html:not(.dark) footer.bg-dark-bg {
    background-color: #eef2f6 !important;
    border-top: 1px solid #cbd5e1 !important;
}

/* ==========================================================================
   2. NON-BRAND GRADIENT BANNERS TO CLEAN CARDS
   ========================================================================== */

/* Overrides any dark gradients on containers so dark background does not swallow text */
html:not(.dark) .bg-gradient-to-r:not([class*="from-brand-"]):not([class*="from-orange-"]):not([class*="from-emerald-"]):not([class*="from-red-"]),
html:not(.dark) .bg-gradient-to-tr:not([class*="from-brand-"]):not([class*="from-orange-"]):not([class*="from-emerald-"]):not([class*="from-red-"]),
html:not(.dark) .bg-gradient-to-br:not([class*="from-brand-"]):not([class*="from-orange-"]):not([class*="from-emerald-"]):not([class*="from-red-"]) {
    background-image: none !important;
    background-color: #ffffff !important;
    border-color: #fdba74 !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08) !important;
}

html:not(.dark) #privacy .rounded-2xl.border {
    background: #ffffff !important;
    border-color: #fed7aa !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08) !important;
}

html:not(.dark) #privacy .w-48.h-48.rounded-2xl {
    background-color: #ffffff !important;
    border-color: #10b981 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1) !important;
}

/* Bottom CTA section */
html:not(.dark) main section:last-of-type .rounded-3xl {
    background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%) !important;
    border-color: #fdba74 !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08) !important;
}

/* ==========================================================================
   3. BORDERS & DIVIDERS
   ========================================================================== */

html:not(.dark) .border-dark-border,
html:not(.dark) [class*="border-dark-border"],
html:not(.dark) .border-\[\#1e2638\],
html:not(.dark) .border-\[\#1c2436\] {
    border-color: #cbd5e1 !important;
}

html:not(.dark) .divide-dark-border > * {
    border-color: #e2e8f0 !important;
}

/* ==========================================================================
   4. PROGRESS BAR TRACKS (NEVER BLEND)
   ========================================================================== */

html:not(.dark) .h-3.bg-dark-card,
html:not(.dark) [class*="h-3"][class*="bg-dark-card"],
html:not(.dark) [class*="h-1.5"][class*="bg-dark-bg"] {
    background-color: #e2e8f0 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

/* ==========================================================================
   5. TYPOGRAPHY CONTRAST (WCAG AAA)
   ========================================================================== */

/* Universal text-white override: turns to Slate-900 EXCEPT on colored buttons/pills */
html:not(.dark) .text-white:not([class*="bg-brand-"]):not([class*="bg-orange-"]):not([class*="bg-emerald-"]):not([class*="bg-red-"]):not([class*="bg-gradient-"]):not(.theme-icon-sun):not(button.bg-brand-600):not(a.bg-brand-600) {
    color: #0f172a !important;
}

/* Headings and Titles */
html:not(.dark) h1, html:not(.dark) h2, html:not(.dark) h3, html:not(.dark) h4, html:not(.dark) h5,
html:not(.dark) h1.text-white, html:not(.dark) h2.text-white, html:not(.dark) h3.text-white,
html:not(.dark) h4.text-white, html:not(.dark) h5.text-white {
    color: #0f172a !important;
}

/* Secondary & Muted text */
html:not(.dark) .text-gray-100 { color: #0f172a !important; }
html:not(.dark) .text-gray-200 { color: #1e293b !important; }
html:not(.dark) .text-gray-300 { color: #334155 !important; }
html:not(.dark) .text-gray-400 { color: #475569 !important; }
html:not(.dark) .text-gray-500 { color: #64748b !important; }

/* Inactive Tab text in Navigation */
html:not(.dark) #nav-clients,
html:not(.dark) #nav-inventory,
html:not(.dark) #nav-plans,
html:not(.dark) #nav-security,
html:not(.dark) #adm-nav-owners,
html:not(.dark) #adm-nav-tiers {
    color: #64748b !important;
}

/* ==========================================================================
   6. HOVER STATES (NO INVISIBLE WHITE-ON-WHITE)
   ========================================================================== */

/* Buttons, close icons (✕), inactive tabs, and text hovers */
html:not(.dark) .hover\:text-white:hover {
    color: #0f172a !important;
}
html:not(.dark) .hover\:text-gray-100:hover,
html:not(.dark) .hover\:text-gray-200:hover,
html:not(.dark) .hover\:text-gray-300:hover {
    color: #0f172a !important;
}

/* Secondary buttons (e.g. Non-Pro button, Hero login button, Logout button) */
html:not(.dark) .bg-dark-hover {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}
html:not(.dark) .bg-dark-hover:hover,
html:not(.dark) .hover\:bg-dark-hover:hover,
html:not(.dark) .hover\:bg-dark-border:hover {
    background-color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

/* Retain crisp white text ONLY on solid colored buttons & solid badge elements */
html:not(.dark) button.bg-brand-600,
html:not(.dark) button.bg-brand-500,
html:not(.dark) a.bg-brand-600,
html:not(.dark) a.bg-brand-500,
html:not(.dark) button.bg-emerald-600,
html:not(.dark) a.bg-emerald-600,
html:not(.dark) button.bg-red-600,
html:not(.dark) a.bg-red-600,
html:not(.dark) button[class*="from-brand-"],
html:not(.dark) a[class*="from-brand-"],
html:not(.dark) button.bg-brand-600 *,
html:not(.dark) button.bg-brand-500 *,
html:not(.dark) a.bg-brand-600 *,
html:not(.dark) a.bg-brand-500 *,
html:not(.dark) button[class*="from-brand-"] *,
html:not(.dark) a[class*="from-brand-"] * {
    color: #ffffff !important;
}

/* ==========================================================================
   7. HIGH-CONTRAST BADGES, STATUS PILLS & METRIC HIGHLIGHTS
   ========================================================================== */

/* Brand Orange */
html:not(.dark) .text-brand-300,
html:not(.dark) .text-brand-400 {
    color: #c2410c !important;
}
html:not(.dark) [class*="bg-brand-500/10"],
html:not(.dark) [class*="bg-brand-500/20"] {
    background-color: #fff7ed !important;
    border: 1px solid #fdba74 !important;
    color: #c2410c !important;
}

/* Emerald Green */
html:not(.dark) .text-emerald-300,
html:not(.dark) .text-emerald-400 {
    color: #047857 !important;
}
html:not(.dark) [class*="bg-emerald-500/10"],
html:not(.dark) [class*="bg-emerald-500/20"] {
    background-color: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    color: #047857 !important;
}

/* Amber Warnings */
html:not(.dark) .text-amber-300,
html:not(.dark) .text-amber-400 {
    color: #b45309 !important;
}
html:not(.dark) [class*="bg-amber-500/10"],
html:not(.dark) [class*="bg-amber-500/20"],
html:not(.dark) [class*="bg-amber-500/30"] {
    background-color: #fef3c7 !important;
    border: 1px solid #fde68a !important;
    color: #b45309 !important;
}

/* Red Danger */
html:not(.dark) .text-red-400 {
    color: #dc2626 !important;
}
html:not(.dark) .hover\:text-red-300:hover {
    color: #991b1b !important;
}
html:not(.dark) [class*="bg-red-500/10"],
html:not(.dark) [class*="bg-red-500/20"],
html:not(.dark) [class*="bg-red-500/30"],
html:not(.dark) [class*="bg-red-500/40"] {
    background-color: #fee2e2 !important;
    border: 1px solid #fca5a5 !important;
    color: #b91c1c !important;
}

/* Neutral Gray Status */
html:not(.dark) .bg-gray-700 {
    background-color: #e2e8f0 !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
}

/* ==========================================================================
   8. FORM INPUTS & CONTROLS
   ========================================================================== */

html:not(.dark) input:not([type="radio"]):not([type="checkbox"]),
html:not(.dark) select,
html:not(.dark) textarea {
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

html:not(.dark) input:focus,
html:not(.dark) select:focus,
html:not(.dark) textarea:focus {
    background-color: #ffffff !important;
    border-color: #ea580c !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.18) !important;
}

html:not(.dark) input:disabled,
html:not(.dark) input[disabled] {
    background-color: #e2e8f0 !important;
    color: #64748b !important;
    border-color: #cbd5e1 !important;
    cursor: not-allowed !important;
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
    color: #94a3b8 !important;
}

/* 2FA Secret Key Box */
html:not(.dark) #totpSecretText {
    background-color: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #c2410c !important;
}

/* Big OTP Input Box */
html:not(.dark) #otpCode {
    background-color: #ffffff !important;
    border: 2px solid #ea580c !important;
    color: #c2410c !important;
}

/* ==========================================================================
   9. TABLES
   ========================================================================== */

html:not(.dark) table thead,
html:not(.dark) table thead.bg-dark-bg {
    background-color: #f1f5f9 !important;
    border-bottom: 2px solid #cbd5e1 !important;
}

html:not(.dark) table thead th {
    color: #0f172a !important;
    font-weight: 700 !important;
}

html:not(.dark) table tbody tr {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

html:not(.dark) table tbody tr.hover\:bg-dark-hover\/50:hover,
html:not(.dark) table tbody tr:hover {
    background-color: #f8fafc !important;
}

/* ==========================================================================
   10. MODALS
   ========================================================================== */

html:not(.dark) .fixed.inset-0.bg-black\/70 {
    background-color: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(4px);
}

html:not(.dark) [id^="modal"] .bg-dark-card {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35) !important;
}

html:not(.dark) [id^="modal"] .border-dark-border {
    border-color: #e2e8f0 !important;
}

html:not(.dark) [id^="modal"] button.text-gray-400 {
    color: #64748b !important;
}

html:not(.dark) [id^="modal"] button.text-gray-400:hover {
    color: #0f172a !important;
}