/* ==========================================================
   MBOKA POCKET
   SOFT DESIGN SYSTEM
   ========================================================== */


/* ---------------- LIGHT ---------------- */

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

    --mp-theme-bg:
        #f8fbfa;

    --mp-theme-bg-soft:
        #f2f7f6;

    --mp-theme-surface:
        #ffffff;

    --mp-theme-surface-2:
        #fbfdfd;

    --mp-theme-text:
        #09283a;

    --mp-theme-muted:
        #677e88;

    --mp-theme-border:
        rgba(9,40,58,.09);

    --mp-theme-green:
        #079a5b;

    --mp-theme-blue:
        #1778df;

    --mp-theme-shadow:
        0 20px 60px
        rgba(20,55,70,.075);
}


/* ---------------- DARK SOFT ---------------- */

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

    /*
     * intentionally NOT black / neon.
     */
    --mp-theme-bg:
        #11191b;

    --mp-theme-bg-soft:
        #151f21;

    --mp-theme-surface:
        #1a2528;

    --mp-theme-surface-2:
        #1e2b2e;

    --mp-theme-text:
        #edf4f2;

    --mp-theme-muted:
        #a0b3af;

    --mp-theme-border:
        rgba(225,243,238,.09);

    --mp-theme-green:
        #4bc88d;

    --mp-theme-blue:
        #76aef0;

    --mp-theme-shadow:
        0 20px 60px
        rgba(0,0,0,.20);
}


/* ==========================================================
   THEME BUTTON
   ========================================================== */

.mp-theme-toggle {
    width: 42px;
    height: 42px;

    display: inline-grid;
    place-items: center;

    flex: 0 0 auto;

    padding: 0;

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

    border-radius: 14px;

    cursor: pointer;

    color:
        var(--mp-theme-text);

    background:
        var(--mp-theme-surface);

    box-shadow:
        0 8px 24px
        rgba(20,55,70,.055);

    transition:
        transform .2s ease,
        background-color .25s ease,
        color .25s ease;
}

.mp-theme-toggle:hover {
    transform:
        translateY(-1px);
}

.mp-theme-toggle svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.authv2-theme-toggle {
    position: absolute;

    top: 20px;
    right: 68px;

    z-index: 20;
}


.mp-theme-app-fab {
    position: fixed;

    right: 18px;

    bottom:
        calc(
            20px
            + env(
                safe-area-inset-bottom,
                0px
            )
        );

    z-index: 15000;
}


/* ==========================================================
   LANDING DARK SOFT
   ========================================================== */

html[data-mp-theme="dark"]
#mpMarketingLanding {

    --mp-ink:
        var(--mp-theme-text);

    --mp-muted:
        var(--mp-theme-muted);

    --mp-green:
        var(--mp-theme-green);

    --mp-green-dark:
        #62d59b;

    --mp-surface:
        var(--mp-theme-surface);

    --mp-soft:
        var(--mp-theme-bg-soft);

    --mp-line:
        var(--mp-theme-border);

    --mp-shadow:
        var(--mp-theme-shadow);


    background:
        radial-gradient(
            circle at 8% 4%,
            rgba(75,200,141,.055),
            transparent 30rem
        ),
        radial-gradient(
            circle at 92% 10%,
            rgba(118,174,240,.05),
            transparent 34rem
        ),
        var(--mp-theme-bg);
}


html[data-mp-theme="dark"]
.mp-header {

    border-bottom-color:
        var(--mp-theme-border);

    background:
        rgba(17,25,27,.88);
}


html[data-mp-theme="dark"]
.mp-brand {

    color:
        var(--mp-theme-text);
}


html[data-mp-theme="dark"]
.mp-brand-tag {

    color:
        #869b97;
}


html[data-mp-theme="dark"]
.mp-menu a {

    color:
        #b8c5c2;
}


html[data-mp-theme="dark"]
.mp-btn-secondary {

    color:
        var(--mp-theme-text);

    border-color:
        var(--mp-theme-border);

    background:
        var(--mp-theme-surface);
}


html[data-mp-theme="dark"]
.mp-section-soft {

    background:
        linear-gradient(
            180deg,
            #151f21,
            #11191b
        );
}


html[data-mp-theme="dark"]
:is(
    .mp-pillar,
    .mp-flow-step,
    .mp-cta
) {

    color:
        var(--mp-theme-text);

    border-color:
        var(--mp-theme-border);

    background:
        var(--mp-theme-surface);

    box-shadow:
        var(--mp-theme-shadow);
}


html[data-mp-theme="dark"]
:is(
    .mp-section-copy,
    .mp-pillar p,
    .mp-story-content p,
    .mp-cta-copy p
) {

    color:
        var(--mp-theme-muted);
}


html[data-mp-theme="dark"]
.mp-flow-step span {

    color:
        #98aba7;
}


/*
 * Glass chips over photos remain light
 * for visual legibility.
 */

html[data-mp-theme="dark"]
.mp-glass-chip {

    color:
        #10282a;

    background:
        rgba(243,249,247,.90);
}


/* ==========================================================
   AUTH SOFT V2
   ========================================================== */

#mbokaAuthV2 {

    background:
        rgba(248,251,250,.96);
}


html[data-mp-theme="dark"]
#mbokaAuthV2 {

    background:
        rgba(17,25,27,.96);
}


.authv2-shell {

    color:
        var(--mp-theme-text);

    border-color:
        var(--mp-theme-border);

    background:
        var(--mp-theme-surface);

    box-shadow:
        var(--mp-theme-shadow);
}


.authv2-panel {

    color:
        var(--mp-theme-text);

    background:
        var(--mp-theme-surface);
}


:is(
    .authv2-brand,
    .authv2-title
) {

    color:
        var(--mp-theme-text);
}


:is(
    .authv2-copy,
    .authv2-switch,
    .authv2-security
) {

    color:
        var(--mp-theme-muted);
}


.authv2-tabs {

    background:
        var(--mp-theme-bg-soft);
}


.authv2-tab {

    color:
        var(--mp-theme-muted);
}


.authv2-tab.active {

    color:
        var(--mp-theme-text);

    background:
        var(--mp-theme-surface);
}


.authv2-field label {

    color:
        var(--mp-theme-muted);
}


:is(
    .authv2-input,
    .authv2-select,
    .authv2-checkbox-row
) {

    color:
        var(--mp-theme-text);

    border-color:
        var(--mp-theme-border);

    background:
        var(--mp-theme-surface-2);
}


.authv2-close {

    color:
        var(--mp-theme-muted);

    border-color:
        var(--mp-theme-border);

    background:
        var(--mp-theme-bg-soft);
}


/* ==========================================================
   APP THEME BRIDGE
   ========================================================== */

html.mp-app-mode body {

    color:
        var(--mp-theme-text) !important;

    background:
        var(--mp-theme-bg) !important;
}


html.mp-app-mode
:is(
    .app-shell,
    .mobile-shell,
    .page-shell,
    .dashboard-shell,
    .main-shell,
    .workspace
) {

    color:
        var(--mp-theme-text);

    background:
        var(--mp-theme-bg) !important;
}


html.mp-app-mode
:is(
    input,
    select,
    textarea
) {

    color:
        var(--mp-theme-text);

    border-color:
        var(--mp-theme-border);

    background:
        var(--mp-theme-surface-2);
}


/* ==========================================================
   SMOOTH CHANGES
   ========================================================== */

body,
#mpMarketingLanding,
.mp-header,
.mp-pillar,
.mp-flow-step,
.mp-cta,
.authv2-shell,
.authv2-panel {

    transition:
        background-color .28s ease,
        color .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}


@media (max-width: 650px) {

    .mp-theme-toggle {
        width: 38px;
        height: 38px;

        border-radius: 12px;
    }

    .authv2-theme-toggle {
        right: 64px;
    }

    .mp-theme-app-fab {
        right: 14px;

        bottom:
            calc(
                78px
                + env(
                    safe-area-inset-bottom,
                    0px
                )
            );
    }

}