/* css/theme.css */

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

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

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

    --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: #5b93ff;
    --spinner-track: rgba(255,255,255,.12);
}

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

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

    --ring: #0b62ff;
    --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 {
    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: 1.5px 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); display: block; }

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