/* css/theme.css */

/* ===== ТЕМАТИЧЕСКИЕ ПЕРЕМЕННЫЕ ===== */
:root {
    /* ТЁМНАЯ (фиолетовая) по умолчанию */
    --bg: #1b1630;
    --fg: #eef1f7;
    --muted: #aeb4c3;
    --hair: rgba(238,241,247,.12);

    --toggle-back-start: #3a00c3;
    --toggle-back-end: #6300bf;
    /* --toggle-back-fallback:#5900bf; */

    /* --grad-start: #1b64ff;
    --grad-end:   #6eb5ff; */

    --grad-start: #4c00ff;
    --grad-end:   #8300ff;

    /* --c-warm-l: #ffd56a;
    --c-warm-d: #ffb347;
    --c-warm-text: #312800;
    --c-lilac-l: #70e1a1;
    --c-lilac-d: #58c48d;
    --c-lilac-text: #002f18;
    --c-orange-red-l: #ff9966;
    --c-orange-red-d: #ff5e62;
    --c-orange-red-text: #3b0000;
    --c-blue-l: #7fd3ff;
    --c-blue-d: #79a8ff;
    --c-blue-text: #000551;
    --c-dark-blue-l: #42bdff;
    --c-dark-blue-d: #4083ff;
    --c-dark-blue-text: #17004e;
    --c-deep-l: #7d8cff;
    --c-deep-d: #b07dff;
    --c-deep-text: #1b0056; */
    

    --card: color-mix(in oklab, #0f1330 80%, #ffffff 20%);
    --btn-shadow: 0 4px 14px rgba(91,147,255,.22);
    --btn-border: 2px solid #4c00ff;

    --section-width: 100%;

    --ring: #795bff;
    --spinner-track: rgba(255,255,255,.12);
}

:root[data-theme="light"] {
    /* СВЕТЛАЯ */
    --bg: #f4f1ff;
    --fg: #171827;
    --muted: #616884;
    --hair: rgba(23, 24, 39, 0.14);

    --toggle-back-start: #4c00ff;
    --toggle-back-end: #8300ff;
    /* --toggle-back-fallback:#7b00ff; */

    --card: #ffffff;
    --btn-shadow: 0 3px 12px rgba(91,147,255,.18);

    --ring: #710bff;
    --spinner-track: rgba(0,0,0,.12);
}


/* ===== БАЗОВОЕ ===== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
    min-height: 100svh;
}

/* ===== ВЕРХНИЕ КНОПКИ (профиль слева, тема справа) ===== */
.top-controls {
    z-index: 9999;
    position: fixed;
    inset: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) auto max(12px, env(safe-area-inset-left));
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    pointer-events: none;
}
.icon-btn, .theme-toggle {
    pointer-events: auto;
    width: 44px; 
    height: 44px; 
    border-radius: 14px;
    display: inline-grid; 
    place-items: center;
    border: 1px solid var(--hair);
    background: var(--card);
    cursor: pointer;
    padding: 0;
    transition: transform .08s ease, opacity .15s ease;
    box-shadow: 0 1px 3px 2px rgba(26, 0, 65, 0.08);
}

.icon-btn:active, .theme-toggle:active { 
    transform: scale(0.98); 
}
.icon-btn:hover, .theme-toggle:hover { 
    opacity: .95; 
}
.icon-btn svg, .theme-toggle svg { 
    width: 22px; 
    height: 22px; 
    fill: var(--fg);
}
.icon-btn svg { 
    display: block; 
}


/* Иконка солнце/луна — переключаемся по теме */
.theme-toggle svg { 
    display: none; 
} 
:root:not([data-theme="light"]) #icon-moon { 
    display: block; 
}
:root[data-theme="light"] #icon-sun { 
    display: block; 
}

.c-warm { background: linear-gradient(135deg, #ffb347, #ffd56a); color: #312800; }
.c-green { background: linear-gradient(135deg, #4aca88, #81ecaf); color: #002f18; }
.c-lilac { background: linear-gradient(135deg, #c9b7ff, #a9d2ff); color: #002040; }
.c-orange-red { background: linear-gradient(135deg, #f2665f, #ff9966); color: #3b0000; }
.c-blue { background: linear-gradient(135deg, #66d4ff, #01a6e7); color: #000551; }
.c-dark-blue { background: linear-gradient(135deg, #2db1f9, #4083ff); color: #17004e; }
.c-deep { background: linear-gradient(135deg, #7d8cff, #b07dff); color: #1b0056; }