/* TundraLabs V2 — дизайн-токены.
 *
 * Единственное место, где заданы цвет, шрифт, ритм и движение. Страницы и
 * компоненты не имеют права объявлять свои значения: любой хардкод цвета в
 * компоненте — это будущая рассинхронизация страниц, которой болел V1.
 *
 * Тема одна — тёмная, это продуктовое решение. Светлая при необходимости
 * добавляется переопределением этого же набора, без правок компонентов.
 */

:root {
  /* ── Основа. Ребрендинг 2026: палитра уходит от оранжевого к пурпурному.
     База — почти чёрный с фиолетовым подтоном. Нейтрально-серый рядом с
     маджентой читается грязным, а чистый #000 убивает ощущение материала. ── */
  --c-bg:            #07050a;
  --c-bg-elevated:   #0d090f;
  --c-surface:       #130d16;
  --c-surface-2:     #1a121e;
  --c-surface-3:     #241a29;

  /* Глубже фона: колодец под знаком, где нужен провал, а не поверхность. */
  --c-bg-deep:       #050507;

  /* Металл знака: подпись логотипа и метки на схеме. Не белый — иначе знак
     начинает спорить со стоящим рядом заголовком. */
  --c-metal:         #d7d9df;

  /* Стекло: плавающая шапка, панели поверх графики, бары статистики */
  --c-glass:         rgba(26, 18, 30, 0.62);
  --c-glass-strong:  rgba(16, 11, 19, 0.88);
  --c-glass-border:  rgba(255, 255, 255, 0.10);
  --blur-glass:      blur(22px) saturate(160%);

  /* Атмосферный свет. Это не «glow вокруг кнопки», а рассеянная подсветка
     сцены: она даёт глубину, не превращая страницу в неон. */
  --glow-warm:       radial-gradient(62rem 36rem at 76% -4rem, color-mix(in srgb, var(--c-accent) 20%, transparent), transparent 68%);
  --glow-warm-2:     radial-gradient(46rem 30rem at 12% 12%, rgba(150, 30, 190, 0.13), transparent 66%);
  --glow-card:       radial-gradient(22rem 13rem at 100% 0%, color-mix(in srgb, var(--c-accent) 14%, transparent), transparent 72%);

  /* Границы — светом, а не линией. Отдельная непрозрачная граница на тёмном
     фоне читается как рамка; полупрозрачная читается как край материала. */
  --c-border:        rgba(255, 255, 255, 0.07);
  --c-border-strong: rgba(255, 255, 255, 0.12);
  --c-border-accent: color-mix(in srgb, var(--c-accent) 34%, transparent);

  /* ── Текст ── */
  --c-text:          #f4f5f6;
  --c-text-secondary:#b3b8bf;
  --c-text-muted:    #7d838c;
  --c-text-faint:    #565b63;
  --c-text-on-accent:#1c0d02;

  /* ── Фирменная маджента. Дозированно: акцент занимает считанные проценты
     площади. Градиент — знак, один CTA на экран и подложка заголовка. ── */
  --c-accent:        #ff2d78;
  --c-accent-hover:  #ff4f8e;
  --c-accent-active: #e51e64;
  --c-accent-dim:    #a5124b;
  --c-accent-wash:   color-mix(in srgb, var(--c-accent) 10%, transparent);
  --c-accent-wash-2: color-mix(in srgb, var(--c-accent) 18%, transparent);
  /* Мелкий текст акцентом: чистая маджента на 12px выжигает глаз и читается
     хуже, поэтому у подписей свой приглушённый оттенок. */
  --c-accent-soft:   #d85885;
  --g-accent:        linear-gradient(135deg, #ff9ec6 0%, #ff2d78 48%, #a5124b 100%);

  /* Хромированный металл для генеративной графики hero */
  --g-chrome:        conic-gradient(from 210deg,
                       #2a1420, #ff9ec6 12%, #ff2d78 26%, #55102f 38%,
                       #1b0c16 52%, #ff6aa8 66%, #c01a5c 78%, #2a1420 100%);
  --c-text-on-accent:#1a0410;

  /* ── Состояния. Приглушены намеренно: на статус-странице рядом стоят
     десятки индикаторов, и чистый #22c55e превращает её в гирлянду. ── */
  --c-ok:            #3fbf7f;
  --c-ok-wash:       rgba(63, 191, 127, 0.12);
  --c-warn:          #e0a33a;
  --c-warn-wash:     rgba(224, 163, 58, 0.12);
  --c-danger:        #e5544b;
  --c-danger-wash:   color-mix(in srgb, var(--c-danger) 12%, transparent);
  --c-info:          #4d8ff0;
  --c-info-wash:     rgba(77, 143, 240, 0.12);
  --c-neutral:       #7d838c;
  --c-neutral-wash:  rgba(125, 131, 140, 0.12);

  /* Крупный кегль требует более звонкого тона: приглушённые --c-ok и
     --c-danger на цифре в 2.4rem выглядят выцветшими, а не спокойными. */
  --c-ok-bright:     #58cfa1;
  --c-danger-bright: #ff6e86;

  /* Подсветка кода. Многоцветность здесь не украшение: одноцветный листинг
     читается заметно хуже. К бренду эти три не относятся и за акцентом
     не следуют. */
  --c-code-key:      #ff9d5c;
  --c-code-str:      #8fd18b;
  --c-code-fn:       #7fb2f0;

  /* ── Типографика ──
     Системный стек настроен, а не взят по умолчанию: порядок даёт SF на Apple,
     Segoe UI Variable на Windows 11 и Inter там, где он есть. Самохостинг
     Inter/Söhne подключается позже подменой --font-sans, без правок страниц. */
  --font-sans: "Inter var", Inter, ui-sans-serif, -apple-system,
               "SF Pro Text", "Segoe UI Variable Text", "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter var", Inter, ui-sans-serif, -apple-system,
               "SF Pro Display", "Segoe UI Variable Display", "Segoe UI",
               Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code",
               "Roboto Mono", Menlo, Consolas, monospace;

  /* Шкала кегля — модульная, шаг 1.2 в мелком и 1.25 в крупном.
     Крупные размеры текучие: на телефоне hero не должен переносить слова. */
  --t-xs:   0.75rem;    /* 12 — метки, юниты */
  --t-sm:   0.8125rem;  /* 13 — вторичный текст, таблицы */
  --t-base: 0.9375rem;  /* 15 — основной. 16 на тёмном ощущается крупно */
  --t-md:   1.0625rem;  /* 17 — лид-абзац */
  --t-lg:   1.375rem;   /* 22 — заголовок карточки */
  --t-xl:   clamp(1.625rem, 1.2rem + 1.6vw, 2.125rem);
  --t-2xl:  clamp(2rem,    1.4rem + 2.6vw, 3rem);
  /* Нижняя граница 2rem, а не 2.5rem: на 390px «API-доступ» при 40px не
     помещается в строку и рвётся посреди слова. */
  --t-3xl:  clamp(2rem,    1.1rem + 4.4vw, 4.25rem);

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   680;

  /* Трекинг: крупный кегль сжимаем, мелкий разряжаем — иначе заголовки
     выглядят рыхлыми, а капс-метки слипаются. */
  --tr-tight:  -0.022em;
  --tr-snug:   -0.014em;
  --tr-normal: 0;
  --tr-wide:   0.06em;

  --lh-tight: 1.08;
  --lh-snug:  1.28;
  --lh-base:  1.6;
  --lh-loose: 1.75;

  /* ── Ритм. Шаг 4px, именованные ступени — чтобы отступы не расползались. ── */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  2.5rem;
  --s-8:  3rem;
  --s-9:  4rem;
  --s-10: 5.5rem;
  --s-11: 7rem;

  /* Вертикальный ритм секций — текучий, иначе на телефоне пустоты съедают экран */
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* ── Геометрия ── */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-full: 999px;

  --container:      1200px;
  --container-wide: 1400px;
  --container-text: 720px;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);

  /* ── Тени. Мягкие и тёмные. Никакого свечения акцентом: цветной glow —
     первый признак дешёвого «AI-лендинга». ── */
  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --sh-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
  /* Материал поверхности: свет сверху и мягкая тень снизу. Не «градиент
     ради градиента» — без этой пары карточки на тёмном читаются как дырки
     в фоне, а не как приподнятые панели. */
  --c-surface-highlight: rgba(255, 255, 255, 0.035);
  --c-surface-shade:     rgba(0, 0, 0, 0.16);

  --sh-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  /* Плавающая панель. Жила в двух копиях — в polish.css и в experience.css
     с разными значениями; побеждала та, что грузилась последней. */
  --sh-float: 0 18px 46px rgba(0, 0, 0, 0.36), var(--sh-inset-top);

  /* ── Движение. Быстро и без пружин: интерфейс инструмента, а не витрина. ── */
  --dur-fast: 120ms;
  --dur-base: 190ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* Уважение к системной настройке — не украшение, а доступность.
   Анимации выключаются целиком, а не замедляются. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}