/* =========================================================
   AHABIT — LIGHT / DARK THEME

   Здесь только палитра и минимальные
   системные исключения.

   Компоненты должны брать цвета
   через переменные из app.css.
   ========================================================= */


/* =========================================================
   DARK PALETTE
   ========================================================= */

:root[data-theme="dark"] {

    /* ---------------------------------------------------------
       BACKGROUND
       --------------------------------------------------------- */

    --app-bg: #0d1213;


    /* ---------------------------------------------------------
       SURFACES
       --------------------------------------------------------- */

    --app-surface: #151b1c;

    --app-surface-solid: #151b1c;

    --app-surface-soft: #1a2122;

    --app-surface-raised: #1d2526;


    /* ---------------------------------------------------------
       TEXT
       --------------------------------------------------------- */

    --app-text-title: #f4f5f2;

    --app-text-primary: #edf0ec;

    --app-text-secondary: #9ca59f;

    --app-text-muted: #707b75;


    /* ---------------------------------------------------------
       GREEN
       --------------------------------------------------------- */

    --app-green-active: #76b852;

    --app-green-ui: #78a95a;


    /* ---------------------------------------------------------
       XP
       --------------------------------------------------------- */

    --app-xp: #f2b91c;


    /* ---------------------------------------------------------
       BORDER / DIVIDER
       --------------------------------------------------------- */

    --app-border:
        rgba(
            255,
            255,
            255,
            0.08
        );

    --app-divider:
        rgba(
            255,
            255,
            255,
            0.07
        );


    /* ---------------------------------------------------------
       OVERLAY
       --------------------------------------------------------- */

    --app-overlay:
        rgba(
            13,
            18,
            19,
            0.88
        );


    /* ---------------------------------------------------------
       SHADOW
       --------------------------------------------------------- */

    --app-shadow:
        0 8px 24px
        rgba(
            0,
            0,
            0,
            0.22
        );


    /* ---------------------------------------------------------
       NAVIGATION
       --------------------------------------------------------- */

    --nav-bg:
        rgba(
            18,
            24,
            25,
            0.96
        );

    --nav-active-bg:
        rgba(
            118,
            184,
            82,
            0.14
        );

    --nav-active-border:
        rgba(
            118,
            184,
            82,
            0.12
        );

    --nav-icon:
        #8e9892;

    --nav-fade-start:
        rgba(
            13,
            18,
            19,
            0
        );

    --nav-fade-end:
        rgba(
            13,
            18,
            19,
            1
        );


    /* ---------------------------------------------------------
       HABITS
       --------------------------------------------------------- */

    --habits-v2-text:
        var(--app-text-primary);

    --habits-v2-muted:
        var(--app-text-secondary);

    --habits-v2-button-bg:
        #17251b;


    /* ---------------------------------------------------------
       ADD HABIT
       --------------------------------------------------------- */

    --add-habit-bg:
        var(--app-bg);

    --add-habit-primary:
        var(--app-text-primary);

    --add-habit-secondary:
        var(--app-text-secondary);

    --add-habit-light:
        var(--app-text-muted);

    --add-habit-white:
        var(--app-surface);

    --add-habit-soft:
        var(--app-surface-soft);

    --add-habit-border:
        var(--app-border);


    /* ---------------------------------------------------------
       ICON PICKER
       --------------------------------------------------------- */

    --icon-picker-bg:
        var(--app-bg);

    --icon-picker-surface:
        var(--app-surface);

    --icon-picker-text:
        var(--app-text-primary);

    --icon-picker-muted:
        var(--app-text-secondary);

    --icon-picker-item-bg:
        var(--app-surface-soft);

    --icon-picker-item-border:
        var(--app-border);

    --icon-picker-selected-bg:
        var(--app-surface-raised);

    --icon-picker-selected-border:
        var(--app-green-ui);

    --icon-picker-button-border:
        var(--app-border);

    --icon-picker-shadow:
        rgba(
            0,
            0,
            0,
            0.25
        );
}


/* =========================================================
   SYSTEM BACKGROUND
   ========================================================= */

html,
body,
#app,
.page,
.page-content {
    background-color:
        var(--app-bg);
}


/* =========================================================
   DEFAULT TEXT
   ========================================================= */

body,
button,
input,
textarea,
select {
    color:
        var(--app-text-primary);
}


/* =========================================================
   INPUTS
   ========================================================= */

:root[data-theme="dark"]
input,

:root[data-theme="dark"]
textarea {
    background:
        var(--app-surface-soft);

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

    border-color:
        var(--app-border);
}


:root[data-theme="dark"]
input::placeholder,

:root[data-theme="dark"]
textarea::placeholder {
    color:
        var(--app-text-muted);
}


/* =========================================================
   DELETE BACKDROP
   ========================================================= */

:root[data-theme="dark"]
.habit-delete-confirm__backdrop {
    background:
        rgba(
            0,
            0,
            0,
            0.58
        );
}


/* =========================================================
   QR CODE

   Белое поле оставляем специально:
   QR должен сохранять высокий контраст.
   ========================================================= */

:root[data-theme="dark"]
.profile-referral-qr,

:root[data-theme="dark"]
.profile-referral-qr__canvas,

:root[data-theme="dark"]
.profile-referral-qr__frame {
    background: #ffffff;
}


/* =========================================================
   TRANSITIONS
   ========================================================= */

body.app-ready,
body.app-ready #app,
body.app-ready .page,
body.app-ready .bottom-navigation {
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease;
}