/* ─── Light Theme (default) ──────────────────────────────────── */
:root {
    --bg-page: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
    --bg-surface: #ffffff;
    --bg-surface-alt: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
    --bg-input: #fafafa;

    --text-primary: #1F2937;
    --text-secondary: #4B5563;
    --text-muted: #6B7280;
    --text-body: #85929E;
    --text-on-surface: #374151;
    --text-bold: #111827;

    --border-color: #E5E7EB;
    --border-light: #e2e8f0;

    --accent: #1564C0;
    --accent-hover: #2563EB;
    --link-color: #006bb7;
    --link-hover: #004a80;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);

    --feature-bg: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
    --feature-border: #1564C0;
    --feature-check-bg: linear-gradient(135deg, #1564C0 0%, #2563EB 100%);

    --info-bg: #e3f2fd;
    --info-border: #2196f3;
    --info-heading: #1565c0;
    --info-text: #1e3a5f;
}

/* ─── Dark Theme (auto-detected from browser) ────────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-page: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
        --bg-surface: #1e293b;
        --bg-surface-alt: linear-gradient(135deg, #1e293b 0%, #334155 100%);
        --bg-input: #0f172a;

        --text-primary: #f1f5f9;
        --text-secondary: #e2e8f0;
        --text-muted: #cbd5e1;
        --text-body: #cbd5e1;
        --text-on-surface: #e2e8f0;
        --text-bold: #f8fafc;

        --border-color: #334155;
        --border-light: #475569;

        --accent: #60a5fa;
        --accent-hover: #93bbfc;
        --link-color: #93bbfc;
        --link-hover: #bdd4fc;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
        --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);

        --feature-bg: linear-gradient(135deg, #1e293b 0%, #334155 100%);
        --feature-border: #60a5fa;
        --feature-check-bg: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);

        --info-bg: #1a3a5c;
        --info-border: #64b5f6;
        --info-heading: #93bbfc;
        --info-text: #e2e8f0;
    }
}

/* ─── Dark mode global text overrides ────────────────────────── */
@media (prefers-color-scheme: dark) {
    h1, h2, h3, h4, h5, h6 {
        color: var(--text-primary);
    }

    strong, b {
        color: var(--text-bold);
    }

    p, li, span, td, th, label, dd, dt {
        color: var(--text-secondary);
    }

    a {
        color: var(--link-color);
    }

    a:hover {
        color: var(--link-hover);
    }
}

/* ─── Dark mode text and SVG fixes ────────────────────────── */
@media (prefers-color-scheme: dark) {
    /* Override any inline or class-based black text */
    [style*="color: black"],
    [style*="color:#000"],
    [style*="color: #000"],
    .text-black,
    *[class*="black"] {
        color: var(--text-primary) !important;
    }
    /* Specific fix for products heading */
    #products-heading {
        color: var(--text-primary) !important;
    }
    /* Ensure bold text is visible */
    strong[style*="color"],
    b[style*="color"],
    h1 strong,
    h1 b,
    h2 strong,
    h2 b,
    .page-header strong,
    .page-header b {
        color: var(--text-bold) !important;
    }
    
    /* Catch any inline black styles in headings */
    h1 [style*="color: black"],
    h1 [style*="color:#000"],
    h2 [style*="color: black"],
    h2 [style*="color:#000"],
    .page-header [style*="color: black"],
    .page-header [style*="color:#000"] {
        color: var(--text-primary) !important;
    }
    
    /* Fix SVG text in product logos */
    svg text,
    svg tspan {
        fill: var(--text-primary) !important;
    }
    
    /* Keep accent colors (purple tspan) visible */
    svg tspan[fill="#8B5CF6"],
    svg tspan[fill="#1564C0"] {
        fill: #A78BFA !important; /* Lighter purple for dark mode */
    }
}