html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;

    font-family: var(--soul-font-main);
    color: var(--soul-text);

   background:
    linear-gradient(
        118deg,
        rgba(var(--theme-rgb), 0.32) 0%,
        rgba(var(--theme-rgb), 0.21) 13%,
        rgba(255, 255, 255, 0.72) 31%,
        rgba(255, 255, 255, 0.91) 46%,
        rgba(var(--theme-soft-rgb), 0.40) 64%,
        rgba(var(--theme-end-rgb), 0.24) 100%
    ),
    linear-gradient(
        164deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(var(--theme-rgb), 0.12) 24%,
        rgba(255, 255, 255, 0.86) 48%,
        rgba(var(--theme-soft-rgb), 0.28) 72%,
        rgba(var(--theme-end-rgb), 0.24) 100%
    ),
    linear-gradient(
        28deg,
        rgba(var(--theme-rgb), 0.12) 0%,
        rgba(255, 255, 255, 0.82) 30%,
        rgba(255, 255, 255, 0.95) 54%,
        rgba(var(--theme-end-rgb), 0.18) 100%
    ),
    linear-gradient(
        180deg,
        rgb(248, 251, 253) 0%,
        rgb(243, 248, 251) 18%,
        rgb(var(--theme-soft-rgb)) 42%,
        rgb(230, 235, 240) 64%,
        rgb(216, 222, 228) 82%,
        rgb(var(--theme-end-rgb)) 100%
    );

    background-blend-mode:
        normal,
        screen,
        soft-light,
        normal;

    background-attachment: scroll;
    background-size: 100% 100%;

    overflow-x: hidden;

    transition:
        background 700ms ease,
        color 700ms ease;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
}

body::selection {
    color: #ffffff;
    background: rgba(var(--theme-rgb), 0.78);
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

img,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
}

main {
    position: relative;
    z-index: 1;
}

/* =========================================================
   SOFT PAGE GRADIENT LAYERS
   Общий дорогой фон по всему сайту:
   цвет темы → белый → серо-титановый
   ========================================================= */

body::after {
    content: "";

    position: fixed;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    background:
    linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.24) 0%,
        rgba(255, 255, 255, 0.08) 24%,
        rgba(var(--theme-rgb), 0.024) 44%,
        rgba(255, 255, 255, 0.10) 62%,
        rgba(var(--theme-end-rgb), 0.12) 100%
    );

    opacity: 1;

    transition:
        background 700ms ease,
        opacity 700ms ease;
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}
/* =========================================================
   BASE THEME — SKY / WHITE / TITANIUM TEST
   Чистая версия без выбеливающих blend-слоёв
   ========================================================= */

/* =========================================================
   BASE THEME — SOFTER SKY / WHITE / TITANIUM TEST
   Верх мягче, без сильной голубой интенсивности
   ========================================================= */

html[data-theme="base"] body {
    background:
        linear-gradient(
            180deg,

            /* SKY сверху — протянули ниже */
rgb(222, 236, 245) 0%,
rgb(232, 243, 249) 16%,
rgb(238, 247, 252) 30%,
rgb(244, 250, 253) 40%,

/* переход в белый */
rgb(250, 253, 254) 44%,
rgb(255, 255, 255) 46%,

            /* белая середина */
            rgb(255, 255, 255) 68%,
            rgb(248, 250, 252) 76%,

            /* titanium снизу */
            rgb(230, 234, 238) 84%,
            rgb(202, 211, 220) 93%,
            rgb(152, 165, 178) 100%
        ) !important;

    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    background-blend-mode: normal !important;
}

html[data-theme="base"] body::after {
    background: none !important;
}