/*
    BillWatch Global Theme
    ----------------------
    Dark is the default.
    Light mode is available through the header toggle.
*/

:root {
    --bw-bg: #f7f8fb;
    --bw-bg-elevated: #ffffff;
    --bw-surface: #ffffff;
    --bw-surface-soft: rgba(255, 255, 255, 0.76);
    --bw-surface-hover: #ffffff;
    --bw-text: #111827;
    --bw-text-secondary: #344054;
    --bw-text-muted: #70798b;
    --bw-text-subtle: #98a0af;
    --bw-border: rgba(15, 23, 42, 0.08);
    --bw-border-strong: rgba(15, 23, 42, 0.14);
    --bw-header-bg: rgba(247, 248, 251, 0.86);
    --bw-header-glow: rgba(84, 124, 255, 0.11);
    --bw-card-shadow: 0 20px 60px rgba(18, 31, 64, 0.08);
}

/*
    Default to dark before Blazor hydrates.
    This prevents the giant white flash on startup.
*/
html:not([data-theme="light"]),
html[data-theme="dark"] {
    color-scheme: dark;
    --bw-bg: #090d17;
    --bw-bg-elevated: #101624;
    --bw-surface: #111827;
    --bw-surface-soft: rgba(17, 24, 39, 0.74);
    --bw-surface-hover: rgba(27, 37, 57, 0.96);
    --bw-text: #f4f7fb;
    --bw-text-secondary: #d5dbea;
    --bw-text-muted: #929db2;
    --bw-text-subtle: #69758a;
    --bw-border: rgba(255, 255, 255, 0.075);
    --bw-border-strong: rgba(255, 255, 255, 0.14);
    --bw-header-bg: rgba(9, 13, 23, 0.82);
    --bw-header-glow: rgba(71, 95, 255, 0.13);
    --bw-card-shadow: 0 25px 80px rgba(0, 0, 0, 0.34);
}

html {
    min-height: 100%;
    background: var(--bw-bg);
    transition: background-color 220ms ease, color 220ms ease;
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--bw-bg);
    color: var(--bw-text);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    transition: background-color 220ms ease, color 220ms ease;
}

button,
input,
select,
textarea {
    font: inherit;
}

html {
    scroll-behavior: smooth;
}


    /* =========================================================
   DARK LANDING PAGE
   ========================================================= */

    html:not([data-theme="light"]) body .landing-page,
    html[data-theme="dark"] body .landing-page {
        background: radial-gradient( circle at 14% 14%, rgba(64, 86, 225, 0.12), transparent 28rem), radial-gradient( circle at 84% 11%, rgba(108, 77, 222, 0.09), transparent 31rem), #090d17;
        color: #f4f7fb;
    }


    /* Hero */

    html:not([data-theme="light"]) body .hero h1,
    html[data-theme="dark"] body .hero h1 {
        color: #f7f9fc;
    }

        html:not([data-theme="light"]) body .hero h1 span,
        html[data-theme="dark"] body .hero h1 span {
            color: #9aa7bd;
        }

    html:not([data-theme="light"]) body .hero-description,
    html[data-theme="dark"] body .hero-description {
        color: #929db2;
    }

    html:not([data-theme="light"]) body .eyebrow,
    html[data-theme="dark"] body .eyebrow {
        border-color: rgba(108, 132, 255, 0.17);
        background: rgba(17, 24, 39, 0.68);
        color: #8fa2ff;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
    }

    html:not([data-theme="light"]) body .secondary-button,
    html[data-theme="dark"] body .secondary-button {
        border-color: rgba(255, 255, 255, 0.09);
        background: rgba(17, 24, 39, 0.76);
        color: #d5dbea;
    }

        html:not([data-theme="light"]) body .secondary-button:hover,
        html[data-theme="dark"] body .secondary-button:hover {
            background: #161f31;
            color: white;
        }

    html:not([data-theme="light"]) body .trust-item,
    html[data-theme="dark"] body .trust-item {
        color: #7f8ba0;
    }


    /* Fake application window */

    html:not([data-theme="light"]) body .product-window,
    html[data-theme="dark"] body .product-window {
        border-color: rgba(255, 255, 255, 0.085);
        background: rgba(15, 22, 36, 0.96);
        box-shadow: 0 45px 100px rgba(0, 0, 0, 0.52), 0 12px 32px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.035);
    }

    html:not([data-theme="light"]) body .window-toolbar,
    html[data-theme="dark"] body .window-toolbar {
        border-bottom-color: rgba(255, 255, 255, 0.065);
        background: #0d1421;
    }

    html:not([data-theme="light"]) body .window-title,
    html[data-theme="dark"] body .window-title {
        color: #e7ebf3;
    }

    html:not([data-theme="light"]) body .dashboard-preview,
    html[data-theme="dark"] body .dashboard-preview {
        background: linear-gradient( 180deg, #0d1421, #0a101b);
    }

    html:not([data-theme="light"]) body .preview-label,
    html[data-theme="dark"] body .preview-label {
        color: #68758a;
    }

    html:not([data-theme="light"]) body .impact-amount,
    html[data-theme="dark"] body .impact-amount {
        color: #f3f6fb;
    }

    html:not([data-theme="light"]) body .impact-period,
    html[data-theme="dark"] body .impact-period {
        color: #77849a;
    }

    html:not([data-theme="light"]) body .preview-summary,
    html[data-theme="dark"] body .preview-summary {
        color: #68758a;
    }

        html:not([data-theme="light"]) body .preview-summary strong,
        html[data-theme="dark"] body .preview-summary strong {
            color: #dbe1ec;
        }

    html:not([data-theme="light"]) body .alert-card,
    html[data-theme="dark"] body .alert-card {
        border-color: rgba(255, 255, 255, 0.07);
        background: #121a29;
        box-shadow: 0 14px 38px rgba(0, 0, 0, 0.28);
    }

    html:not([data-theme="light"]) body .provider strong,
    html[data-theme="dark"] body .provider strong {
        color: #e3e8f1;
    }

    html:not([data-theme="light"]) body .provider span,
    html[data-theme="dark"] body .provider span {
        color: #738096;
    }

    html:not([data-theme="light"]) body .provider-icon,
    html[data-theme="dark"] body .provider-icon {
        background: rgba(75, 100, 230, 0.14);
        color: #8ca1ff;
    }

    html:not([data-theme="light"]) body .price-change,
    html[data-theme="dark"] body .price-change {
        border-top-color: rgba(255, 255, 255, 0.06);
        border-bottom-color: rgba(255, 255, 255, 0.06);
    }

        html:not([data-theme="light"]) body .price-change strong,
        html[data-theme="dark"] body .price-change strong {
            color: #edf1f7;
        }

        html:not([data-theme="light"]) body .price-change span,
        html[data-theme="dark"] body .price-change span {
            color: #68758a;
        }

    html:not([data-theme="light"]) body .impact-grid div,
    html[data-theme="dark"] body .impact-grid div {
        background: #0d1421;
    }

    html:not([data-theme="light"]) body .impact-grid span,
    html[data-theme="dark"] body .impact-grid span {
        color: #69768b;
    }

    html:not([data-theme="light"]) body .reason-box,
    html[data-theme="dark"] body .reason-box {
        background: #0d1421;
    }

    html:not([data-theme="light"]) body .reason-heading,
    html[data-theme="dark"] body .reason-heading {
        color: #78859a;
    }

    html:not([data-theme="light"]) body .reason-line,
    html[data-theme="dark"] body .reason-line {
        color: #8e99ab;
    }

    html:not([data-theme="light"]) body .preview-footer,
    html[data-theme="dark"] body .preview-footer {
        color: #586579;
    }


    /* Capability strip */

    html:not([data-theme="light"]) body .proof-strip,
    html[data-theme="dark"] body .proof-strip {
        border-color: rgba(255, 255, 255, 0.07);
        background: rgba(15, 22, 36, 0.72);
        box-shadow: 0 15px 42px rgba(0, 0, 0, 0.2);
    }

    html:not([data-theme="light"]) body .proof-item,
    html[data-theme="dark"] body .proof-item {
        color: #8d98aa;
    }

        html:not([data-theme="light"]) body .proof-item span,
        html[data-theme="dark"] body .proof-item span {
            color: #606d81;
        }

    html:not([data-theme="light"]) body .proof-divider,
    html[data-theme="dark"] body .proof-divider {
        background: rgba(255, 255, 255, 0.07);
    }


    /* Section titles */

    html:not([data-theme="light"]) body .section-heading h2,
    html:not([data-theme="light"]) body .example-copy h2,
    html:not([data-theme="light"]) body .security-copy h2,
    html[data-theme="dark"] body .section-heading h2,
    html[data-theme="dark"] body .example-copy h2,
    html[data-theme="dark"] body .security-copy h2 {
        color: #f1f4f9;
    }

        html:not([data-theme="light"]) body .section-heading h2 span,
        html:not([data-theme="light"]) body .example-copy h2 span,
        html[data-theme="dark"] body .section-heading h2 span,
        html[data-theme="dark"] body .example-copy h2 span {
            color: #929eb2;
        }

    html:not([data-theme="light"]) body .section-heading p,
    html:not([data-theme="light"]) body .example-copy > p,
    html:not([data-theme="light"]) body .security-copy p,
    html[data-theme="dark"] body .section-heading p,
    html[data-theme="dark"] body .example-copy > p,
    html[data-theme="dark"] body .security-copy p {
        color: #8793a6;
    }

    html:not([data-theme="light"]) body .section-kicker,
    html[data-theme="dark"] body .section-kicker {
        color: #8398ff;
    }


    /* Steps */

    html:not([data-theme="light"]) body .step-card,
    html[data-theme="dark"] body .step-card {
        border-color: rgba(255, 255, 255, 0.065);
        background: rgba(15, 22, 36, 0.76);
        box-shadow: 0 16px 45px rgba(0, 0, 0, 0.18);
    }

    html:not([data-theme="light"]) body .featured-step,
    html[data-theme="dark"] body .featured-step {
        border-color: rgba(99, 123, 255, 0.16);
        background: linear-gradient( 145deg, rgba(28, 38, 65, 0.92), rgba(15, 22, 36, 0.94));
    }

    html:not([data-theme="light"]) body .step-icon,
    html[data-theme="dark"] body .step-icon {
        background: rgba(76, 101, 231, 0.13);
    }

    html:not([data-theme="light"]) body .step-card h3,
    html[data-theme="dark"] body .step-card h3 {
        color: #e5eaf2;
    }

    html:not([data-theme="light"]) body .step-card p,
    html[data-theme="dark"] body .step-card p {
        color: #818da1;
    }

    html:not([data-theme="light"]) body .step-number,
    html:not([data-theme="light"]) body .step-detail,
    html:not([data-theme="light"]) body .mini-change,
    html[data-theme="dark"] body .step-number,
    html[data-theme="dark"] body .step-detail,
    html[data-theme="dark"] body .mini-change {
        color: #606d81;
    }


    /* Comparison section */

    html:not([data-theme="light"]) body .comparison-item strong,
    html[data-theme="dark"] body .comparison-item strong {
        color: #dce2ec;
    }

    html:not([data-theme="light"]) body .comparison-item div > span,
    html[data-theme="dark"] body .comparison-item div > span {
        color: #7d899d;
    }

    html:not([data-theme="light"]) body .change-card,
    html[data-theme="dark"] body .change-card {
        border-color: rgba(255, 255, 255, 0.075);
        background: #101827;
        box-shadow: 0 40px 90px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.22);
    }

    html:not([data-theme="light"]) body .card-label,
    html[data-theme="dark"] body .card-label {
        color: #68758a;
    }

    html:not([data-theme="light"]) body .change-card h3,
    html[data-theme="dark"] body .change-card h3 {
        color: #e2e7ef;
    }

    html:not([data-theme="light"]) body .old-amount,
    html[data-theme="dark"] body .old-amount {
        color: #657186;
    }

    html:not([data-theme="light"]) body .new-amount,
    html[data-theme="dark"] body .new-amount {
        color: #f1f4f8;
    }

    html:not([data-theme="light"]) body .large-arrow,
    html[data-theme="dark"] body .large-arrow {
        color: #586579;
    }

    html:not([data-theme="light"]) body .annual-callout,
    html[data-theme="dark"] body .annual-callout {
        background: rgba(190, 71, 65, 0.11);
    }

        html:not([data-theme="light"]) body .annual-callout span,
        html[data-theme="dark"] body .annual-callout span {
            color: #af7d78;
        }

    html:not([data-theme="light"]) body .why-list,
    html[data-theme="dark"] body .why-list {
        background: #0c1320;
    }

    html:not([data-theme="light"]) body .why-title,
    html[data-theme="dark"] body .why-title {
        color: #707d92;
    }

    html:not([data-theme="light"]) body .why-row,
    html[data-theme="dark"] body .why-row {
        color: #8a96a9;
    }

    html:not([data-theme="light"]) body .source-note,
    html[data-theme="dark"] body .source-note {
        color: #606d81;
    }


    /* Security */

    html:not([data-theme="light"]) body .security-card,
    html[data-theme="dark"] body .security-card {
        border-color: rgba(255, 255, 255, 0.065);
        background: linear-gradient( 145deg, rgba(17, 24, 39, 0.9), rgba(11, 17, 29, 0.96));
    }

    html:not([data-theme="light"]) body .security-symbol,
    html[data-theme="dark"] body .security-symbol {
        background: rgba(75, 99, 224, 0.13);
    }

    html:not([data-theme="light"]) body .security-points div,
    html[data-theme="dark"] body .security-points div {
        color: #8490a3;
    }


/* Smooth theme transitions */

body .site-shell,
body .product-window,
body .window-toolbar,
body .dashboard-preview,
body .alert-card,
body .reason-box,
body .proof-strip,
body .step-card,
body .change-card,
body .why-list,
body .security-card,
body .secondary-button {
    transition: background-color 220ms ease, background 220ms ease, border-color 220ms ease, color 220ms ease, box-shadow 220ms ease;
}