/* ==========================================================
   SimplPay Aurora Glass AI
   PATCH-SIMPLPAY-022G-01C
   Theme Foundation
   File: /opt/simplpay/static/css/002-theme.css
   ========================================================== */

:root {
    color-scheme: light dark;
}

html {
    background:
        var(--sp-bg);
}

body {
    min-height: 100vh;
    min-height: 100dvh;

    font-family:
        var(--sp-font-sans);

    font-size:
        var(--sp-font-size-md);

    line-height:
        var(--sp-line-md);

    color:
        var(--sp-text-primary);

    background:
        var(--sp-bg);

    transition:
        background-color
        var(--sp-transition-normal),
        color
        var(--sp-transition-normal);
}


/* ==========================================================
   Explicit Theme Modes
   ========================================================== */

html[data-sp-theme="light"] {
    color-scheme: light;

    --sp-bg: #f4f7fb;
    --sp-bg-soft: #eef3f9;

    --sp-bg-elevated:
        rgba(
            255,
            255,
            255,
            0.72
        );

    --sp-surface-1:
        rgba(
            255,
            255,
            255,
            0.52
        );

    --sp-surface-2:
        rgba(
            255,
            255,
            255,
            0.64
        );

    --sp-surface-3:
        rgba(
            255,
            255,
            255,
            0.78
        );

    --sp-surface-4:
        rgba(
            255,
            255,
            255,
            0.92
        );

    --sp-text-primary:
        #111827;

    --sp-text-secondary:
        #4b5563;

    --sp-text-tertiary:
        #6b7280;

    --sp-text-muted:
        #9ca3af;

    --sp-text-inverse:
        #ffffff;

    --sp-glass-bg:
        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                0.70
            ),
            rgba(
                255,
                255,
                255,
                0.34
            )
        );

    --sp-glass-bg-strong:
        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                0.86
            ),
            rgba(
                255,
                255,
                255,
                0.54
            )
        );

    --sp-glass-bg-soft:
        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                0.46
            ),
            rgba(
                255,
                255,
                255,
                0.22
            )
        );

    --sp-glass-border:
        rgba(
            255,
            255,
            255,
            0.58
        );

    --sp-glass-border-soft:
        rgba(
            255,
            255,
            255,
            0.32
        );

    --sp-glass-highlight:
        rgba(
            255,
            255,
            255,
            0.84
        );

    --sp-input-bg:
        rgba(
            255,
            255,
            255,
            0.68
        );

    --sp-input-border:
        rgba(
            148,
            163,
            184,
            0.24
        );
}


html[data-sp-theme="dark"] {
    color-scheme: dark;

    --sp-bg:
        #090b12;

    --sp-bg-soft:
        #0f1420;

    --sp-bg-elevated:
        rgba(
            17,
            24,
            39,
            0.80
        );

    --sp-surface-1:
        rgba(
            15,
            23,
            42,
            0.44
        );

    --sp-surface-2:
        rgba(
            15,
            23,
            42,
            0.58
        );

    --sp-surface-3:
        rgba(
            15,
            23,
            42,
            0.72
        );

    --sp-surface-4:
        rgba(
            15,
            23,
            42,
            0.90
        );

    --sp-text-primary:
        #f8fafc;

    --sp-text-secondary:
        #d1d5db;

    --sp-text-tertiary:
        #9ca3af;

    --sp-text-muted:
        #6b7280;

    --sp-text-inverse:
        #0f172a;

    --sp-glass-bg:
        linear-gradient(
            145deg,
            rgba(
                15,
                23,
                42,
                0.74
            ),
            rgba(
                15,
                23,
                42,
                0.42
            )
        );

    --sp-glass-bg-strong:
        linear-gradient(
            145deg,
            rgba(
                15,
                23,
                42,
                0.90
            ),
            rgba(
                15,
                23,
                42,
                0.64
            )
        );

    --sp-glass-bg-soft:
        linear-gradient(
            145deg,
            rgba(
                15,
                23,
                42,
                0.54
            ),
            rgba(
                15,
                23,
                42,
                0.30
            )
        );

    --sp-glass-border:
        rgba(
            255,
            255,
            255,
            0.12
        );

    --sp-glass-border-soft:
        rgba(
            255,
            255,
            255,
            0.08
        );

    --sp-glass-highlight:
        rgba(
            255,
            255,
            255,
            0.17
        );

    --sp-input-bg:
        rgba(
            15,
            23,
            42,
            0.74
        );

    --sp-input-border:
        rgba(
            148,
            163,
            184,
            0.20
        );

    --sp-border-subtle:
        rgba(
            148,
            163,
            184,
            0.10
        );

    --sp-border-default:
        rgba(
            148,
            163,
            184,
            0.18
        );

    --sp-border-strong:
        rgba(
            148,
            163,
            184,
            0.28
        );

    --sp-shadow-xs:
        0 2px 8px
        rgba(
            0,
            0,
            0,
            0.18
        );

    --sp-shadow-sm:
        0 8px 22px
        rgba(
            0,
            0,
            0,
            0.24
        );

    --sp-shadow-md:
        0 14px 38px
        rgba(
            0,
            0,
            0,
            0.30
        );

    --sp-shadow-lg:
        0 22px 58px
        rgba(
            0,
            0,
            0,
            0.36
        );

    --sp-shadow-xl:
        0 32px 90px
        rgba(
            0,
            0,
            0,
            0.44
        );
}


/* ==========================================================
   Theme-Aware Semantic Helpers
   ========================================================== */

.sp-theme-surface {
    color:
        var(--sp-text-primary);

    background:
        var(--sp-surface-2);
}

.sp-theme-surface-strong {
    color:
        var(--sp-text-primary);

    background:
        var(--sp-surface-4);
}

.sp-theme-muted {
    color:
        var(--sp-text-tertiary);
}

.sp-theme-subtle {
    color:
        var(--sp-text-muted);
}


/* ==========================================================
   Brand Gradient Text
   ========================================================== */

.sp-gradient-text {
    color:
        var(--sp-primary);

    background:
        var(--sp-gradient-primary);

    background-clip:
        text;

    -webkit-background-clip:
        text;

    -webkit-text-fill-color:
        transparent;
}


/* ==========================================================
   Theme Selection Utilities
   ========================================================== */

[data-sp-theme-only="light"] {
    display:
        none !important;
}

[data-sp-theme-only="dark"] {
    display:
        none !important;
}

html[data-sp-theme="light"]
[data-sp-theme-only="light"] {
    display:
        revert !important;
}

html[data-sp-theme="dark"]
[data-sp-theme-only="dark"] {
    display:
        revert !important;
}


/* ==========================================================
   Theme-Aware Image / Icon Handling
   ========================================================== */

.sp-theme-icon {
    color:
        currentColor;

    fill:
        currentColor;

    transition:
        color
        var(--sp-transition-fast),
        fill
        var(--sp-transition-fast),
        opacity
        var(--sp-transition-fast);
}

.sp-theme-logo {
    filter:
        none;

    transition:
        filter
        var(--sp-transition-normal),
        opacity
        var(--sp-transition-normal);
}

html[data-sp-theme="dark"]
.sp-theme-logo[data-sp-adapt="true"] {
    filter:
        brightness(1.08)
        saturate(1.05);
}


/* ==========================================================
   Selection
   ========================================================== */

::selection {
    color:
        var(--sp-white);

    background:
        var(--sp-primary-600);
}


/* ==========================================================
   Focus System
   ========================================================== */

:where(
    button,
    a,
    input,
    textarea,
    select,
    [tabindex]
):focus-visible {
    outline:
        none;

    box-shadow:
        var(--sp-focus-ring);
}


/* ==========================================================
   Disabled State
   ========================================================== */

:where(
    button,
    input,
    textarea,
    select
):disabled {
    cursor:
        not-allowed;

    opacity:
        0.52;
}


/* ==========================================================
   Theme Transition Guard
   Prevent excessive transitions during initial load
   ========================================================== */

html:not(.sp-theme-ready) *,
html:not(.sp-theme-ready) *::before,
html:not(.sp-theme-ready) *::after {
    transition:
        none !important;
}


/* ==========================================================
   After Theme Engine Boot
   ========================================================== */

html.sp-theme-ready body {
    transition:
        background
        var(--sp-transition-normal),
        color
        var(--sp-transition-normal);
}


/* ==========================================================
   Surface Elevation Helpers
   ========================================================== */

.sp-elevation-0 {
    box-shadow:
        none;
}

.sp-elevation-1 {
    box-shadow:
        var(--sp-shadow-xs);
}

.sp-elevation-2 {
    box-shadow:
        var(--sp-shadow-sm);
}

.sp-elevation-3 {
    box-shadow:
        var(--sp-shadow-md);
}

.sp-elevation-4 {
    box-shadow:
        var(--sp-shadow-lg);
}

.sp-elevation-5 {
    box-shadow:
        var(--sp-shadow-xl);
}


/* ==========================================================
   Semantic State Backgrounds
   ========================================================== */

.sp-state-success {
    color:
        var(--sp-success-strong);

    background:
        color-mix(
            in srgb,
            var(--sp-success)
            12%,
            transparent
        );

    border-color:
        var(--sp-border-success);
}

.sp-state-warning {
    color:
        var(--sp-warning-strong);

    background:
        color-mix(
            in srgb,
            var(--sp-warning)
            12%,
            transparent
        );
}

.sp-state-danger {
    color:
        var(--sp-danger-strong);

    background:
        color-mix(
            in srgb,
            var(--sp-danger)
            12%,
            transparent
        );

    border-color:
        var(--sp-border-danger);
}

.sp-state-info {
    color:
        var(--sp-cyan-700);

    background:
        color-mix(
            in srgb,
            var(--sp-info)
            12%,
            transparent
        );
}


/* ==========================================================
   Fallback for Browsers Without color-mix()
   ========================================================== */

@supports not (
    background:
        color-mix(
            in srgb,
            red 10%,
            transparent
        )
) {

    .sp-state-success {
        background:
            rgba(
                16,
                185,
                129,
                0.12
            );
    }

    .sp-state-warning {
        background:
            rgba(
                245,
                158,
                11,
                0.12
            );
    }

    .sp-state-danger {
        background:
            rgba(
                239,
                68,
                68,
                0.12
            );
    }

    .sp-state-info {
        background:
            rgba(
                6,
                182,
                212,
                0.12
            );
    }

}


/* ==========================================================
   Automatic Theme Fallback
   Used before JS theme engine sets data-sp-theme
   ========================================================== */

@media (
    prefers-color-scheme:
    light
) {

    html:not(
        [data-sp-theme]
    ) {
        color-scheme:
            light;
    }

}

@media (
    prefers-color-scheme:
    dark
) {

    html:not(
        [data-sp-theme]
    ) {
        color-scheme:
            dark;
    }

}


/* ==========================================================
   Reduced Transparency Accessibility
   ========================================================== */

@media (
    prefers-reduced-transparency:
    reduce
) {

    :root {
        --sp-glass-bg:
            var(--sp-surface-4);

        --sp-glass-bg-strong:
            var(--sp-surface-4);

        --sp-glass-bg-soft:
            var(--sp-surface-3);

        --sp-glass-blur-sm:
            0px;

        --sp-glass-blur-md:
            0px;

        --sp-glass-blur-lg:
            0px;

        --sp-glass-blur-xl:
            0px;
    }

}


/* ==========================================================
   High Contrast
   ========================================================== */

@media (
    prefers-contrast:
    more
) {

    :root {
        --sp-glass-border:
            rgba(
                100,
                116,
                139,
                0.60
            );

        --sp-border-default:
            rgba(
                100,
                116,
                139,
                0.64
            );

        --sp-border-strong:
            rgba(
                71,
                85,
                105,
                0.82
            );
    }

    html[data-sp-theme="dark"] {
        --sp-glass-border:
            rgba(
                255,
                255,
                255,
                0.34
            );

        --sp-border-default:
            rgba(
                255,
                255,
                255,
                0.30
            );
    }

}