/* ============================================================
   tokens.css — Тема: «Интеллектуальный индиго и лавандовый туман»
   (Midnight Indigo & Soothing Mist — 2026 Edition)
   ============================================================ */

:root {
    /* ========================================================
       1. ПАЛИТРА ТЕМЫ (Меняйте эти цвета для мгновенной смены темы)
       ======================================================== */
    --theme-bg:            #F8F9FC;   /* Основа: Фарфоровый прохладный белый */
    --theme-bg-alt:        #EEF0F7;   /* Плашки: Шелковый мягкий беж-индиго */
    --theme-surface:       #FFFFFF;   /* Поверхность карточек */
    
    --theme-ink:           #10131E;   /* Текст: Черничный графит (глубокий, мягче черного) */
    --theme-ink-soft:      #3E445B;   /* Вторичный читаемый текст */
    --theme-ink-mute:      #717894;   /* Подписи, метаданные */

    --theme-cta:           #1E2540;   /* Кнопки/CTA: Ночной индиго (Midnight Navy) */
    --theme-cta-hover:     #2B3459;   /* Hover кнопок */
    --theme-cta-text:      #FFFFFF;   /* Текст на кнопке */

    --theme-accent:        #4A5582;   /* Акцентное слово: Лаванда-сланец */
    --theme-accent-soft:   rgba(74, 85, 130, 0.12); /* Фон мягких бейджей */

    /* Кейсы: «Точка А → Точка Б» */
    --point-a-bg:          #ECEEF4;   /* Точка А: Деликатный пепельно-серый */
    --point-a-text:        #494E65;
    --point-b-bg:          #E2ECE7;   /* Точка Б: Нежный шалфейно-ледяной (разрешение проблемы) */
    --point-b-text:        #244D39;

    /* Темные секции (Requests, Session Flow, Footer) */
    --theme-dark:          #121624;   /* Глубокий ночной сапфир */
    --theme-dark-surface:  #1B2035;   /* Карточки на темном фоне */
    --theme-dark-border:   rgba(238, 240, 247, 0.10);
    --theme-cream:         #F8F9FC;
    --theme-cream-soft:    #BAC0D4;

    /* ========================================================
       2. СИСТЕМНЫЕ СВЯЗКИ (НЕ ТРЕБУЮТ ИЗМЕНЕНИЙ)
       ======================================================== */
    --bg:              var(--theme-bg);
    --bg-alt:          var(--theme-bg-alt);
    --surface:         var(--theme-surface);
    --border:          rgba(30, 37, 64, 0.08);
    --border-strong:   rgba(30, 37, 64, 0.16);

    --ink:             var(--theme-ink);
    --ink-soft:        var(--theme-ink-soft);
    --ink-mute:        var(--theme-ink-mute);

    --terracotta:      var(--theme-cta);
    --terracotta-dark: var(--theme-cta-hover);
    --terracotta-soft: var(--theme-accent-soft);

    --accent-color:    var(--theme-accent);

    --sage:            #3D6B56;
    --sage-dark:       #244D39;
    --sage-soft:       var(--point-b-bg);

    --dark:            var(--theme-dark);
    --dark-surface:    var(--theme-dark-surface);
    --dark-border:     var(--theme-dark-border);
    --cream:           var(--theme-cream);
    --cream-soft:      var(--theme-cream-soft);

    --ok:              #2E7D52;
    --ok-bg:           #E8F5EE;
    --danger:          #B9382C;
    --danger-soft:     #FDF2F1;

    /* Алиасы совместимости */
    --rose:            var(--theme-cta);
    --rose-deep:       var(--theme-cta-hover);
    --rose-soft:       var(--theme-accent-soft);
    --clay:            var(--theme-cta);
    --clay-deep:       var(--theme-cta-hover);
    --lav-soft:        var(--point-b-bg);

    /* ---- Шрифтовой стек ---- */
    --font-serif:      "Fraunces", Georgia, serif;
    --font-sans:       "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --fs-hero:         clamp(2.15rem, 4.8vw, 3.75rem);
    --fs-h2:           clamp(1.75rem, 3.2vw, 2.5rem);
    --fs-h3:           clamp(1.18rem, 2vw, 1.45rem);
    --fs-lead:         clamp(1rem, 1.35vw, 1.15rem);
    --fs-body:         1rem;
    --fs-small:        0.875rem;

    --r-full:          9999px;
    --r-xl:            22px;
    --r-lg:            16px;
    --r-md:            12px;
    --r-sm:            8px;
    --r-pill:          var(--r-full);

    --shadow-sm:       0 2px 8px rgba(18, 22, 36, 0.04);
    --shadow-md:       0 8px 24px -4px rgba(18, 22, 36, 0.08);
    --shadow-lg:       0 18px 48px -8px rgba(18, 22, 36, 0.12);

    --container:       1180px;
    --gutter:          clamp(1.2rem, 4.5vw, 2.5rem);
    --header-h:        72px;
    --section-y:       clamp(3.5rem, 6.5vw, 6rem);
    --ease:            cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out:        cubic-bezier(0.2, 0.8, 0.2, 1);
    --dur:             0.28s;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 20px);
    -webkit-text-size-adjust: 100%;
    scrollbar-gutter: stable;
    overflow-x: hidden;
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--ink);
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    position: relative;
}

html.menu-open,
body.menu-open {
    overflow: hidden !important;
    height: 100% !important;
    touch-action: none !important;
}

body.no-scroll { overflow: hidden; }
* { -webkit-tap-highlight-color: transparent; }

img { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-weight: 560;
    line-height: 1.15;
    letter-spacing: -0.018em;
    color: var(--ink);
    text-wrap: balance;
}

section[id] {
    scroll-margin-top: calc(var(--header-h) + 20px);
}

:focus-visible {
    outline: 2px solid var(--theme-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
    will-change: opacity, transform;
}
.reveal.in {
    opacity: 1;
    transform: translateY(0);
}
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
.reveal.d4 { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}