/**
 * Livigo
 * Global Theme System
 *
 * Path: /assets/css/theme.css
 *
 * Central visual theme layer for Livigo.
 *
 * Supported modes:
 * - Light
 * - Dark
 * - System (resolved by theme.js)
 *
 * Important:
 * Individual modules must consume these semantic variables.
 * Do not create separate dark-mode CSS files per module.
 */


/*
|--------------------------------------------------------------------------
| Light Theme — Default
|--------------------------------------------------------------------------
|
| Light remains the safe default when JavaScript is unavailable.
|
*/

:root,
html[data-theme="light"] {

    /*
    |--------------------------------------------------------------------------
    | Browser
    |--------------------------------------------------------------------------
    */

    color-scheme: light;


    /*
    |--------------------------------------------------------------------------
    | Application Background
    |--------------------------------------------------------------------------
    */

    --app-background:
        var(--livigo-background);

    --background:
        var(--livigo-background);

    --background-soft:
        var(--livigo-background-soft);


    /*
    |--------------------------------------------------------------------------
    | Surfaces
    |--------------------------------------------------------------------------
    */

    --surface:
        var(--livigo-surface);

    --surface-soft:
        var(--livigo-surface-soft);

    --surface-muted:
        var(--livigo-surface-muted);

    --surface-raised:
        var(--livigo-surface);


    /*
    |--------------------------------------------------------------------------
    | Text
    |--------------------------------------------------------------------------
    */

    --text:
        var(--livigo-text);

    --text-strong:
        var(--livigo-text-strong);

    --text-muted:
        var(--livigo-text-muted);

    --text-soft:
        var(--livigo-text-soft);

    --text-inverse:
        var(--livigo-text-on-dark);


    /*
    |--------------------------------------------------------------------------
    | Borders
    |--------------------------------------------------------------------------
    */

    --border:
        var(--livigo-border);

    --border-soft:
        var(--livigo-border-soft);


    /*
    |--------------------------------------------------------------------------
    | Brand Accent
    |--------------------------------------------------------------------------
    */

    --accent:
        var(--livigo-lime-500);

    --accent-hover:
        var(--livigo-lime-450);

    --accent-soft:
        var(--livigo-lime-100);

    --accent-text:
        var(--livigo-navy-950);


    /*
    |--------------------------------------------------------------------------
    | Navigation
    |--------------------------------------------------------------------------
    */

    --nav-background:
        rgba(255, 255, 255, 0.96);

    --nav-surface:
        var(--livigo-surface);

    --nav-text:
        var(--livigo-text);

    --nav-text-muted:
        var(--livigo-text-muted);

    --nav-active-background:
        var(--livigo-lime-100);

    --nav-active-text:
        var(--livigo-navy-950);


    /*
    |--------------------------------------------------------------------------
    | Forms
    |--------------------------------------------------------------------------
    */

    --input-background:
        var(--livigo-surface-soft);

    --input-background-focus:
        var(--livigo-surface);

    --input-text:
        var(--livigo-text);

    --input-placeholder:
        var(--livigo-text-muted);

    --input-border:
        var(--livigo-border);


    /*
    |--------------------------------------------------------------------------
    | Overlay
    |--------------------------------------------------------------------------
    */

    --overlay:
        rgba(1, 16, 31, 0.24);

    --overlay-strong:
        rgba(1, 16, 31, 0.48);


    /*
    |--------------------------------------------------------------------------
    | Semantic
    |--------------------------------------------------------------------------
    */

    --success:
        var(--livigo-success);

    --success-soft:
        var(--livigo-success-soft);

    --warning:
        var(--livigo-warning);

    --warning-soft:
        var(--livigo-warning-soft);

    --danger:
        var(--livigo-danger);

    --danger-soft:
        var(--livigo-danger-soft);

    --info:
        var(--livigo-info);

    --info-soft:
        var(--livigo-info-soft);


    /*
    |--------------------------------------------------------------------------
    | Shadows
    |--------------------------------------------------------------------------
    */

    --shadow-xs:
        var(--livigo-shadow-xs);

    --shadow-sm:
        var(--livigo-shadow-sm);

    --shadow-md:
        var(--livigo-shadow-md);

    --shadow-lg:
        var(--livigo-shadow-lg);

    --shadow-xl:
        var(--livigo-shadow-xl);
}


/*
|--------------------------------------------------------------------------
| Dark Theme
|--------------------------------------------------------------------------
*/

html[data-theme="dark"] {

    /*
    |--------------------------------------------------------------------------
    | Browser
    |--------------------------------------------------------------------------
    */

    color-scheme: dark;


    /*
    |--------------------------------------------------------------------------
    | Application Background
    |--------------------------------------------------------------------------
    */

    --app-background:
        #06111d;

    --background:
        #06111d;

    --background-soft:
        #081725;


    /*
    |--------------------------------------------------------------------------
    | Surfaces
    |--------------------------------------------------------------------------
    */

    --surface:
        #0d1b2a;

    --surface-soft:
        #112235;

    --surface-muted:
        #172b40;

    --surface-raised:
        #132438;


    /*
    |--------------------------------------------------------------------------
    | Text
    |--------------------------------------------------------------------------
    */

    --text:
        #e8eef6;

    --text-strong:
        #ffffff;

    --text-muted:
        #a6b4c5;

    --text-soft:
        #7e91a7;

    --text-inverse:
        #07101f;


    /*
    |--------------------------------------------------------------------------
    | Borders
    |--------------------------------------------------------------------------
    */

    --border:
        #293d53;

    --border-soft:
        #1c3045;


    /*
    |--------------------------------------------------------------------------
    | Brand Accent
    |--------------------------------------------------------------------------
    */

    --accent:
        var(--livigo-lime-500);

    --accent-hover:
        var(--livigo-lime-450);

    --accent-soft:
        #263709;

    --accent-text:
        var(--livigo-navy-950);


    /*
    |--------------------------------------------------------------------------
    | Navigation
    |--------------------------------------------------------------------------
    */

    --nav-background:
        rgba(8, 23, 37, 0.96);

    --nav-surface:
        #0d1b2a;

    --nav-text:
        #e8eef6;

    --nav-text-muted:
        #9cafc1;

    --nav-active-background:
        #263709;

    --nav-active-text:
        var(--livigo-lime-500);


    /*
    |--------------------------------------------------------------------------
    | Forms
    |--------------------------------------------------------------------------
    */

    --input-background:
        #112235;

    --input-background-focus:
        #15283c;

    --input-text:
        #edf3f9;

    --input-placeholder:
        #899bad;

    --input-border:
        #2a4057;


    /*
    |--------------------------------------------------------------------------
    | Overlay
    |--------------------------------------------------------------------------
    */

    --overlay:
        rgba(0, 0, 0, 0.42);

    --overlay-strong:
        rgba(0, 0, 0, 0.68);


    /*
    |--------------------------------------------------------------------------
    | Semantic
    |--------------------------------------------------------------------------
    */

    --success:
        #4ade80;

    --success-soft:
        #123524;

    --warning:
        #fbbf24;

    --warning-soft:
        #3a2b0d;

    --danger:
        #f87171;

    --danger-soft:
        #3c191d;

    --info:
        #38bdf8;

    --info-soft:
        #0d3044;


    /*
    |--------------------------------------------------------------------------
    | Shadows
    |--------------------------------------------------------------------------
    */

    --shadow-xs:
        0 1px 2px rgba(0, 0, 0, 0.20);

    --shadow-sm:
        0 6px 18px rgba(0, 0, 0, 0.28);

    --shadow-md:
        0 14px 34px rgba(0, 0, 0, 0.34);

    --shadow-lg:
        0 24px 60px rgba(0, 0, 0, 0.42);

    --shadow-xl:
        0 34px 90px rgba(0, 0, 0, 0.52);
}


/*
|--------------------------------------------------------------------------
| Application Foundation
|--------------------------------------------------------------------------
*/

html {
    background:
        var(--background);

    color:
        var(--text);
}

body {
    background:
        var(--background);

    color:
        var(--text);
}


/*
|--------------------------------------------------------------------------
| Native Interface Controls
|--------------------------------------------------------------------------
*/

input,
textarea,
select,
button {
    color-scheme: inherit;
}


/*
|--------------------------------------------------------------------------
| Generic Text Helpers
|--------------------------------------------------------------------------
*/

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

.theme-text-strong {
    color:
        var(--text-strong);
}

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


/*
|--------------------------------------------------------------------------
| Generic Surface Helpers
|--------------------------------------------------------------------------
*/

.theme-surface {
    background:
        var(--surface);

    color:
        var(--text);
}

.theme-surface-soft {
    background:
        var(--surface-soft);

    color:
        var(--text);
}

.theme-surface-muted {
    background:
        var(--surface-muted);

    color:
        var(--text);
}


/*
|--------------------------------------------------------------------------
| Generic Border Helper
|--------------------------------------------------------------------------
*/

.theme-border {
    border-color:
        var(--border);
}


/*
|--------------------------------------------------------------------------
| Global Focus
|--------------------------------------------------------------------------
*/

:where(
    button,
    a,
    input,
    textarea,
    select
):focus-visible {
    outline:
        3px solid
        var(--accent);

    outline-offset:
        2px;
}


/*
|--------------------------------------------------------------------------
| Theme Transition
|--------------------------------------------------------------------------
*/

html.livigo-theme-transitioning,
html.livigo-theme-transitioning body {
    transition:
        background-color
        var(--livigo-duration-normal)
        var(--livigo-ease-standard),

        color
        var(--livigo-duration-normal)
        var(--livigo-ease-standard);
}


html.livigo-theme-transitioning
:where(
    header,
    footer,
    nav,
    main,
    aside,
    section,
    article,
    div,
    button,
    a,
    input,
    textarea,
    select
) {
    transition:
        background-color
        var(--livigo-duration-normal)
        var(--livigo-ease-standard),

        color
        var(--livigo-duration-normal)
        var(--livigo-ease-standard),

        border-color
        var(--livigo-duration-normal)
        var(--livigo-ease-standard),

        box-shadow
        var(--livigo-duration-normal)
        var(--livigo-ease-standard);
}


/*
|--------------------------------------------------------------------------
| Theme Switcher
|--------------------------------------------------------------------------
|
| Reusable Light / Dark / System selector.
|
| Markup:
| /partials/theme-switcher.php
|
*/

.livigo-theme-switcher {
    width: 100%;
    margin-bottom:
        var(--livigo-space-6);

    padding-bottom:
        var(--livigo-space-6);

    border-bottom:
        1px solid
        var(--border-soft);
}


/*
|--------------------------------------------------------------------------
| Theme Switcher Header
|--------------------------------------------------------------------------
*/

.livigo-theme-switcher__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap:
        var(--livigo-space-4);

    margin-bottom:
        var(--livigo-space-4);
}


.livigo-theme-switcher__heading {
    min-width: 0;
}


.livigo-theme-switcher__eyebrow {
    display: block;

    margin-bottom:
        0.4rem;

    color:
        var(--text-muted);

    font-size:
        var(--livigo-font-size-xs);

    font-weight:
        var(--livigo-font-weight-bold);

    letter-spacing:
        0.11em;

    line-height: 1.2;

    text-transform:
        uppercase;
}


.livigo-theme-switcher__title {
    margin: 0;

    color:
        var(--text-strong);

    font-size:
        clamp(
            1.3rem,
            4vw,
            1.65rem
        );

    font-weight:
        var(--livigo-font-weight-extrabold);

    letter-spacing:
        -0.03em;

    line-height:
        1.15;
}


.livigo-theme-switcher__description {
    max-width:
        42rem;

    margin:
        var(--livigo-space-2)
        0
        0;

    color:
        var(--text-muted);

    font-size:
        var(--livigo-font-size-sm);

    line-height:
        var(--livigo-line-height-relaxed);
}


/*
|--------------------------------------------------------------------------
| Theme Switcher Options
|--------------------------------------------------------------------------
*/

.livigo-theme-switcher__options {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        var(--livigo-space-3);
}


/*
|--------------------------------------------------------------------------
| Theme Option
|--------------------------------------------------------------------------
*/

.livigo-theme-option {
    position: relative;

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap:
        var(--livigo-space-3);

    min-width: 0;
    min-height: 88px;

    padding:
        14px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--livigo-radius-lg);

    background:
        var(--surface-soft);

    color:
        var(--text);

    font: inherit;

    text-align: left;

    cursor: pointer;

    box-shadow:
        var(--shadow-xs);

    transition:
        background-color
        var(--livigo-transition),

        border-color
        var(--livigo-transition),

        box-shadow
        var(--livigo-transition),

        transform
        var(--livigo-transition);
}


.livigo-theme-option:hover {
    border-color:
        var(--accent);

    background:
        var(--surface);

    box-shadow:
        var(--shadow-sm);

    transform:
        translateY(-1px);
}


.livigo-theme-option:active {
    transform:
        scale(0.985);
}


/*
|--------------------------------------------------------------------------
| Theme Option Icon
|--------------------------------------------------------------------------
*/

.livigo-theme-option__icon {
    display: grid;

    width: 44px;
    height: 44px;

    flex: 0 0 auto;

    place-items: center;

    border:
        1px solid
        var(--border-soft);

    border-radius:
        var(--livigo-radius-md);

    background:
        var(--surface-muted);

    color:
        var(--text-muted);

    transition:
        background-color
        var(--livigo-transition),

        border-color
        var(--livigo-transition),

        color
        var(--livigo-transition);
}


.livigo-theme-option__icon svg {
    display: block;

    width: 22px;
    height: 22px;
}


/*
|--------------------------------------------------------------------------
| Theme Option Content
|--------------------------------------------------------------------------
*/

.livigo-theme-option__content {
    display: flex;

    min-width: 0;

    flex-direction: column;

    align-items: flex-start;
}


.livigo-theme-option__title {
    display: block;

    color:
        var(--text-strong);

    font-size:
        var(--livigo-font-size-sm);

    font-weight:
        var(--livigo-font-weight-bold);

    line-height:
        1.25;
}


.livigo-theme-option__description {
    display: block;

    margin-top:
        4px;

    color:
        var(--text-muted);

    font-size:
        0.72rem;

    font-weight:
        var(--livigo-font-weight-medium);

    line-height:
        1.4;
}


/*
|--------------------------------------------------------------------------
| Theme Option Check
|--------------------------------------------------------------------------
*/

.livigo-theme-option__check {
    display: grid;

    width: 26px;
    height: 26px;

    flex: 0 0 auto;

    place-items: center;

    border:
        1px solid
        var(--border);

    border-radius:
        50%;

    background:
        var(--surface);

    color:
        transparent;

    opacity:
        0.65;

    transform:
        scale(0.92);

    transition:
        background-color
        var(--livigo-transition),

        border-color
        var(--livigo-transition),

        color
        var(--livigo-transition),

        opacity
        var(--livigo-transition),

        transform
        var(--livigo-transition);
}


/*
|--------------------------------------------------------------------------
| Active Theme Option
|--------------------------------------------------------------------------
|
| theme.js automatically applies:
| .is-active
| aria-pressed="true"
|
*/

.livigo-theme-option.is-active,
.livigo-theme-option[aria-pressed="true"] {
    border-color:
        var(--accent);

    background:
        var(--accent-soft);

    box-shadow:
        0 0 0 1px
        color-mix(
            in srgb,
            var(--accent) 30%,
            transparent
        );
}


.livigo-theme-option.is-active
.livigo-theme-option__icon,
.livigo-theme-option[aria-pressed="true"]
.livigo-theme-option__icon {
    border-color:
        var(--accent);

    background:
        var(--accent);

    color:
        var(--accent-text);
}


.livigo-theme-option.is-active
.livigo-theme-option__check,
.livigo-theme-option[aria-pressed="true"]
.livigo-theme-option__check {
    border-color:
        var(--accent);

    background:
        var(--accent);

    color:
        var(--accent-text);

    opacity: 1;

    transform:
        scale(1);
}


/*
|--------------------------------------------------------------------------
| Theme Switcher Note
|--------------------------------------------------------------------------
*/

.livigo-theme-switcher__note {
    margin:
        var(--livigo-space-3)
        0
        0;

    color:
        var(--text-soft);

    font-size:
        var(--livigo-font-size-xs);

    line-height:
        var(--livigo-line-height-normal);
}


/*
|--------------------------------------------------------------------------
| Theme Prompt
|--------------------------------------------------------------------------
*/

.livigo-theme-prompt {
    position: fixed;

    right: 22px;
    bottom: 28px;

    z-index:
        calc(
            var(--livigo-z-toast)
            + 20
        );

    width:
        min(
            380px,
            calc(100vw - 36px)
        );

    padding: 18px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--livigo-radius-xl);

    background:
        var(--surface-raised);

    color:
        var(--text);

    box-shadow:
        var(--shadow-lg);
}


/*
|--------------------------------------------------------------------------
| Theme Prompt Header
|--------------------------------------------------------------------------
*/

.livigo-theme-prompt__header {
    display: flex;

    align-items: flex-start;

    gap: 12px;
}


.livigo-theme-prompt__icon {
    flex: 0 0 auto;

    display: grid;

    place-items: center;

    width: 42px;
    height: 42px;

    border-radius:
        var(--livigo-radius-md);

    background:
        var(--surface-soft);

    color:
        var(--text-strong);

    font-size: 20px;
}


.livigo-theme-prompt__content {
    flex: 1 1 auto;

    min-width: 0;
}


.livigo-theme-prompt__title {
    margin: 0;

    color:
        var(--text-strong);

    font-size:
        var(--livigo-font-size-base);

    font-weight:
        var(--livigo-font-weight-bold);

    line-height: 1.3;
}


.livigo-theme-prompt__text {
    margin:
        5px
        0
        0;

    color:
        var(--text-muted);

    font-size:
        var(--livigo-font-size-sm);

    line-height:
        var(--livigo-line-height-normal);
}


/*
|--------------------------------------------------------------------------
| Theme Prompt Close
|--------------------------------------------------------------------------
*/

.livigo-theme-prompt__close {
    flex: 0 0 auto;

    display: grid;

    place-items: center;

    width: 34px;
    height: 34px;

    padding: 0;

    border: 0;

    border-radius:
        var(--livigo-radius-sm);

    background:
        transparent;

    color:
        var(--text-muted);

    font: inherit;

    font-size: 20px;

    cursor: pointer;
}


.livigo-theme-prompt__close:hover {
    background:
        var(--surface-soft);

    color:
        var(--text);
}


/*
|--------------------------------------------------------------------------
| Theme Prompt Actions
|--------------------------------------------------------------------------
*/

.livigo-theme-prompt__actions {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 16px;
}


.livigo-theme-prompt__primary,
.livigo-theme-prompt__secondary {
    min-height: 42px;

    padding:
        9px
        14px;

    border-radius:
        var(--livigo-radius-md);

    font: inherit;

    font-size:
        var(--livigo-font-size-sm);

    font-weight:
        var(--livigo-font-weight-bold);

    cursor: pointer;
}


.livigo-theme-prompt__primary {
    border:
        1px solid
        var(--accent);

    background:
        var(--accent);

    color:
        var(--accent-text);
}


.livigo-theme-prompt__primary:hover {
    background:
        var(--accent-hover);
}


.livigo-theme-prompt__secondary {
    border:
        1px solid
        var(--border);

    background:
        var(--surface-soft);

    color:
        var(--text);
}


.livigo-theme-prompt__secondary:hover {
    border-color:
        var(--accent);
}


/*
|--------------------------------------------------------------------------
| Tablet Theme Switcher
|--------------------------------------------------------------------------
*/

@media (max-width: 820px) {

    .livigo-theme-switcher__options {
        grid-template-columns:
            1fr;
    }

    .livigo-theme-option {
        min-height:
            78px;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 640px) {

    /*
    |--------------------------------------------------------------------------
    | Theme Switcher
    |--------------------------------------------------------------------------
    */

    .livigo-theme-switcher {
        margin-bottom:
            var(--livigo-space-5);

        padding-bottom:
            var(--livigo-space-5);
    }


    .livigo-theme-switcher__header {
        margin-bottom:
            var(--livigo-space-3);
    }


    .livigo-theme-switcher__title {
        font-size:
            1.22rem;
    }


    .livigo-theme-switcher__description {
        font-size:
            0.82rem;

        line-height:
            1.55;
    }


    .livigo-theme-switcher__options {
        grid-template-columns:
            1fr;

        gap:
            9px;
    }


    .livigo-theme-option {
        grid-template-columns:
            42px
            minmax(0, 1fr)
            26px;

        min-height:
            72px;

        gap:
            11px;

        padding:
            12px;

        border-radius:
            16px;
    }


    .livigo-theme-option__icon {
        width:
            42px;

        height:
            42px;

        border-radius:
            13px;
    }


    .livigo-theme-option__icon svg {
        width:
            20px;

        height:
            20px;
    }


    .livigo-theme-option__title {
        font-size:
            0.85rem;
    }


    .livigo-theme-option__description {
        font-size:
            0.68rem;
    }


    /*
    |--------------------------------------------------------------------------
    | Theme Prompt
    |--------------------------------------------------------------------------
    */

    .livigo-theme-prompt {
        right: 14px;

        bottom:
            calc(
                104px
                + env(safe-area-inset-bottom)
            );

        width:
            calc(
                100vw
                - 28px
            );

        padding: 16px;

        border-radius:
            18px;
    }

}


/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

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

    html.livigo-theme-transitioning,
    html.livigo-theme-transitioning *,
    html.livigo-theme-transitioning *::before,
    html.livigo-theme-transitioning *::after,
    .livigo-theme-option,
    .livigo-theme-option__icon,
    .livigo-theme-option__check {
        transition:
            none !important;
    }


    .livigo-theme-option:hover,
    .livigo-theme-option:active {
        transform:
            none;
    }

}