/* =====================================
   1) База и переменные
===================================== */
:root {
    /* Сетка/отступы */
    --gap: 16px;
    --gap-sm: 8px;
    --gap-md: 12px;
    --max-width-main: 768px;
    --side-gap: calc((100vw - min(100vw, var(--max-width-main))) / 2);

    /* Шрифты/цвета/бордеры/тени */
    --font-ui: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --muted: #5d5d5d;
    --border: #ddd;
    --border-soft: #eee;
    --bg-elev: #fff;
    --bg-blur: #fff9;
    --radius: 12px;
    --radius-pill: 999px;
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.2);

    /* Галерея / размеры */
    --width-img: 375px;
    --height-img: 375px;
    --width-modal: 400px;
    --min-height-button: 32px;

    /* UI */
    --panel: var(--bg-elev);
    --btn-bg: transparent;
    --input-bg: #fff;

    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
    }
}

@media (min-resolution: 2dppx) {
    :root {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* =====================================
   2) Нормалайз/база
===================================== */
html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    font-family:
        ui-sans-serif,
        -apple-system,
        system-ui,
        Segoe UI,
        Helvetica,
        Apple Color Emoji,
        Arial,
        sans-serif,
        Segoe UI Emoji,
        Segoe UI Symbol;
    line-height: 1.5;
    tab-size: 4;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-ui);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    max-width: 100vw;
    overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}