/* =========================================================================
   global.css - токены (цвета, отступы, радиусы), сброс, типографика.
   Подключается на каждой странице первым. Цвета и темы перенесены из
   last_version/static/css/global.css.

   Все размеры вёрстки - в rem: 1rem задаёт js/common/screen-scale.js от
   ширины монитора (16px на мониторе 1920), поэтому на любом мониторе
   сайт выглядит одинаково, а Ctrl +/- работает (docs/adr/0003). В px -
   только украшения: тени, размытие, рамки в 1-2px.
   Точки перелома (@media ... rem) браузер считает от 16px, а не от
   размера 1rem страницы, то есть это ширина окна в обычных пикселях.
   ========================================================================= */

/* --- Светлая тема (по умолчанию) ----------------------------------------- */
:root {
    color-scheme: light;

    --bg-main: rgba(255, 255, 255, 1);
    --bg-secondary: rgba(243, 244, 246, 1);
    --bg-card: rgba(255, 255, 255, 1);
    --bg-footer: rgba(248, 249, 250, 1);

    --text-main: rgba(17, 24, 39, 1);
    --text-muted: rgba(75, 85, 99, 1);
    --text-header: rgba(244, 114, 182, 1);

    --border: rgba(226, 226, 226, 0.8);
    --border-strong: rgba(130, 130, 131, 0.5);
    --btn-hover: rgba(243, 244, 246, 1);
    --icon-color: rgba(75, 85, 99, 1);

    --accent: rgba(236, 72, 153, 1);
    --accent-hover: rgba(219, 39, 119, 1);
    --accent-secondary: rgba(168, 85, 247, 1);
    --accent-gradient: linear-gradient(to right, rgba(249, 168, 212, 1), rgba(216, 180, 254, 1));

    --danger: rgba(239, 68, 68, 1);
    --danger-hover: rgba(220, 38, 38, 1);
    --success: rgba(34, 197, 94, 1);
    --warning: rgba(245, 158, 11, 1);
    --info: rgba(59, 130, 246, 1);

    --color-wave: rgba(249, 168, 212, 1);
    --first-color-hero: rgba(249, 168, 212, 0.75);
    --second-color-hero: rgba(216, 180, 254, 0.75);
    --first-color-card: rgba(101, 18, 86, 0.561);
    --second-color-card: rgba(255, 0, 128, 0.632);

    --glass-bg: rgba(255, 255, 255, 0.5);
    --glass-border: rgba(226, 226, 226, 0.8);
    --glass-highlight: rgba(255, 255, 255, 0.9);
    --glass-shadow: rgba(0, 0, 0, 0.06);

    --overlay: rgba(17, 24, 39, 0.3);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;

    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1.25rem;
    --radius-xl: 1.75rem;
    --radius-pill: 9999px;

    --header-height: 4.5rem;
    /* настоящая высота шапки на странице: шапка не зависит от масштаба
       страницы (zoom: var(--ui), common/ui-zoom.js), отступы под неё - от неё */
    --header-space: calc(var(--header-height) * var(--ui, 1));
    --container-max: 80rem;
    --container-pad: 2rem;

    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- Тёмная тема ----------------------------------------------------------- */
html.dark-theme {
    color-scheme: dark;

    --bg-main: rgba(18, 18, 18, 1);
    --bg-secondary: rgba(15, 17, 21, 1);
    --bg-card: rgba(44, 44, 44, 1);
    --bg-footer: rgba(37, 37, 37, 1);

    --text-main: rgba(243, 244, 246, 1);
    --text-muted: rgba(156, 163, 175, 1);
    --text-header: rgba(236, 72, 153, 1);

    --border: rgba(255, 255, 255, 0.12);
    --border-strong: rgba(55, 65, 81, 1);
    --btn-hover: rgba(77, 77, 77, 1);
    --icon-color: rgba(229, 231, 235, 1);

    --accent-hover: rgba(244, 114, 182, 1);
    --accent-gradient: linear-gradient(to right, rgba(236, 72, 153, 1), rgba(109, 40, 217, 1));

    --danger: rgba(248, 113, 113, 1);
    --danger-hover: rgba(239, 68, 68, 1);
    --success: rgba(74, 222, 128, 1);
    --warning: rgba(251, 191, 36, 1);
    --info: rgba(96, 165, 250, 1);

    --color-wave: rgba(250, 114, 182, 1);
    --first-color-hero: rgba(254, 79, 167, 0.75);
    --second-color-hero: rgba(109, 40, 217, 0.75);
    --first-color-card: rgba(101, 18, 86, 0.999);
    --second-color-card: rgba(255, 0, 128, 0.84);

    --glass-bg: rgba(24, 26, 31, 0.75);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-highlight: rgba(255, 255, 255, 0.08);
    --glass-shadow: rgba(0, 0, 0, 0.4);

    --overlay: rgba(0, 0, 0, 0.5);
}

@media (max-width: 48rem) {
    :root {
        --header-height: 4rem;
        --container-pad: 1rem;
    }
}

/* --- Сброс и основа -------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    -webkit-text-size-adjust: 100%;
    /* место под полосу прокрутки есть всегда: иначе на длинной странице
       (главная) центр сдвигается на полширины полосы и шапка «прыгает»
       при переходе на короткую (Начать) */
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-space);
}

body {
    margin: 0;
    min-height: 100vh;
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, p {
    margin: 0;
}

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

button,
input {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

svg {
    display: block;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* --- Типографика ------------------------------------------------------------ */
.text-body {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--text-muted);
}

.accent-text {
    background-image: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.section-title {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

/* --- Каркас страницы -------------------------------------------------------- */
.page-container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.site-main {
    padding-top: var(--header-space);
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Анимации отключаются, если пользователь попросил об этом в системе */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}