/* ========================================================
   Design Tokens — Polymorphism Style
   Источник: style.jpg + DESIGN.md
   Поддерживает светлую и тёмную темы через
   [data-theme="dark"] и prefers-color-scheme
   ======================================================== */

:root,
:root[data-theme="light"] {
    /* — Палитра: светлая — */
    --bg-page:        #D9D9D9;
    --bg-panel:       #F0F0F0;
    --bg-panel-light: #FFFFFF;
    --bg-elevated:    #E8E8E8;
    --bg-mid:         #C8C8C8;
    --bg-deep:        #3A3A3A;
    --bg-darker:      #2A2A2A;
    --bg-black:       #0A0A0A;

    --text-primary:   #2A2A2A;
    --text-secondary: #4A4A4A;
    --text-muted:     #6E6E6E;
    --text-on-dark:        #F0F0F0;
    --text-on-dark-muted:  rgba(240, 240, 240, 0.65);

    --glass-bg:        rgba(255, 255, 255, 0.45);
    --glass-bg-strong: rgba(255, 255, 255, 0.65);
    --glass-border:    rgba(255, 255, 255, 0.4);
    --glass-blur:      16px;

    /* Тени — светлая тема (мягкие, на тёплом сером) */
    --shadow-outset:
        8px 8px 16px rgba(0, 0, 0, 0.10),
       -8px -8px 16px rgba(255, 255, 255, 0.80);
    --shadow-outset-soft:
        4px 4px 10px rgba(0, 0, 0, 0.08),
       -4px -4px 10px rgba(255, 255, 255, 0.75);
    --shadow-outset-strong:
        12px 12px 24px rgba(0, 0, 0, 0.15),
       -12px -12px 24px rgba(255, 255, 255, 0.85);
    --shadow-inset:
        inset 4px 4px 8px rgba(0, 0, 0, 0.08),
        inset -4px -4px 8px rgba(255, 255, 255, 0.80);
    --shadow-inset-deep:
        inset 6px 6px 12px rgba(0, 0, 0, 0.18),
        inset -6px -6px 12px rgba(255, 255, 255, 0.95);

    --ring-inset: inset 4px 4px 8px rgba(0, 0, 0, 0.10), inset -4px -4px 8px rgba(255, 255, 255, 0.95), 0 0 0 2px rgba(58, 58, 58, 0.15);
}

/* ===== Тёмная тема ===== */
:root[data-theme="dark"],
:root.theme-dark {
    --bg-page:        #1A1A1A;
    --bg-panel:       #252525;
    --bg-panel-light: #2F2F2F;
    --bg-elevated:    #2A2A2A;
    --bg-mid:         #1E1E1E;
    --bg-deep:        #E8E8E8;
    --bg-darker:      #0F0F0F;
    --bg-black:       #FFFFFF;

    --text-primary:   #ECECEC;
    --text-secondary: #D4D4D4;
    --text-muted:     #A8A8A8;
    --text-on-dark:        #1A1A1A;
    --text-on-dark-muted:  rgba(26, 26, 26, 0.65);

    --glass-bg:        rgba(40, 40, 40, 0.55);
    --glass-bg-strong: rgba(35, 35, 35, 0.75);
    --glass-border:    rgba(255, 255, 255, 0.08);
    --glass-blur:      18px;

    /* Неоморфные тени: «свет» — белый блик сверху-слева,
       «тень» — глубокая чёрная снизу-справа (инвертировано по сравнению со светлой) */
    --shadow-outset:
        8px 8px 18px rgba(0, 0, 0, 0.65),
       -8px -8px 18px rgba(255, 255, 255, 0.05);
    --shadow-outset-soft:
        4px 4px 10px rgba(0, 0, 0, 0.55),
       -4px -4px 10px rgba(255, 255, 255, 0.04);
    --shadow-outset-strong:
        14px 14px 28px rgba(0, 0, 0, 0.75),
       -14px -14px 28px rgba(255, 255, 255, 0.06);
    --shadow-inset:
        inset 4px 4px 8px rgba(0, 0, 0, 0.55),
        inset -4px -4px 8px rgba(255, 255, 255, 0.04);
    --shadow-inset-deep:
        inset 6px 6px 12px rgba(0, 0, 0, 0.65),
        inset -6px -6px 12px rgba(255, 255, 255, 0.05);

    --ring-inset:
        inset 4px 4px 8px rgba(0, 0, 0, 0.65),
        inset -4px -4px 8px rgba(255, 255, 255, 0.06),
        0 0 0 2px rgba(232, 232, 232, 0.12);
}

/* ===== Авто-следование системе (если пользователь не выбирал вручную) ===== */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg-page:        #1A1A1A;
        --bg-panel:       #252525;
        --bg-panel-light: #2F2F2F;
        --bg-elevated:    #2A2A2A;
        --bg-mid:         #1E1E1E;
        --bg-deep:        #E8E8E8;
        --bg-darker:      #0F0F0F;
        --bg-black:       #FFFFFF;

        --text-primary:   #ECECEC;
        --text-secondary: #D4D4D4;
        --text-muted:     #A8A8A8;
        --text-on-dark:        #1A1A1A;
        --text-on-dark-muted:  rgba(26, 26, 26, 0.65);

        --glass-bg:        rgba(40, 40, 40, 0.55);
        --glass-bg-strong: rgba(35, 35, 35, 0.75);
        --glass-border:    rgba(255, 255, 255, 0.08);
        --glass-blur:      18px;

        --shadow-outset:
            8px 8px 18px rgba(0, 0, 0, 0.65),
           -8px -8px 18px rgba(255, 255, 255, 0.05);
        --shadow-outset-soft:
            4px 4px 10px rgba(0, 0, 0, 0.55),
           -4px -4px 10px rgba(255, 255, 255, 0.04);
        --shadow-outset-strong:
            14px 14px 28px rgba(0, 0, 0, 0.75),
           -14px -14px 28px rgba(255, 255, 255, 0.06);
        --shadow-inset:
            inset 4px 4px 8px rgba(0, 0, 0, 0.55),
            inset -4px -4px 8px rgba(255, 255, 255, 0.04);
        --shadow-inset-deep:
            inset 6px 6px 12px rgba(0, 0, 0, 0.65),
            inset -6px -6px 12px rgba(255, 255, 255, 0.05);

        --ring-inset:
            inset 4px 4px 8px rgba(0, 0, 0, 0.65),
            inset -4px -4px 8px rgba(255, 255, 255, 0.06),
            0 0 0 2px rgba(232, 232, 232, 0.12);
    }
}

/* ===== Общие токены (вне тем) ===== */
:root {
    --r-sm:    8px;
    --r-md:    16px;
    --r-lg:    24px;
    --r-pill:  999px;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --t-fast: 0.18s ease;
    --t-med:  0.28s ease;
}