/* ============================================================
   TOKENS — примитивный слой дизайн-системы
   ============================================================

   Единственное место в проекте, где разрешены литеральные цвета.
   Компоненты к примитивам НЕ обращаются — только через семантические
   алиасы (см. Шаг 2). Правило существует, чтобы смена ступени палитры
   была правкой одной строки, а не грепом по 3.5к строк main.css.

   Именование: --color-<семейство>-<ступень>, --color-alpha-<основа>-<NN>,
   где NN — прозрачность в процентах.

   Источник значений: экспорт Figma (фрейм Primitive palette, Color.svg).
   Значения точные, снятые с заливок свотчей, не подобранные на глаз.
   ============================================================ */

:root {

  /* ---------- PRIMITIVES ---------- */

  /* INK — самая глубокая тень, за пределами оливы.
     ink/1000 — фон страницы. */
  --color-ink-1100: #020302;  /* глубже фона страницы — только для теней */
  --color-ink-1000: #070807;
  --color-ink-950:  #0B0D0A;
  --color-ink-900:  #10130F;

  /* OLIVE — основа и глубина: фон, стекло, крупные поверхности */
  --color-olive-950: #11160F;
  --color-olive-900: #171C16;
  --color-olive-850: #1B211B;
  --color-olive-800: #222922;
  --color-olive-700: #30382F;
  --color-olive-600: #3E493C;
  --color-olive-500: #596051;

  /* BONE — текст и светлые штрихи */
  --color-bone-1000: #F2F0E8;
  --color-bone-900:  #E0DDD4;
  --color-bone-700:  #B7B3A9;
  --color-bone-500:  #89877F;

  /* GOLD — продуктовый путь: выбор, active-state, ритуальное действие */
  --color-gold-700: #8B672D;
  --color-gold-600: #A67E3D;
  --color-gold-500: #C19C56;
  --color-gold-400: #D4B56F;
  --color-gold-300: #E4CD98;

  /* PLUM — эмоциональный слой: бейджи, подсветка, вторичный смысл */
  --color-plum-700: #4C313C;
  --color-plum-600: #63414F;
  --color-plum-500: #805363;
  --color-plum-400: #9F6F82;

  /* BERRY — коммерция: оплата и единственная purchase-CTA на экране */
  --color-berry-700: #6F243A;
  --color-berry-600: #922F4C;
  --color-berry-500: #B33F62;
  --color-berry-400: #C74D71;


  /* ---------- RGB-КАНАЛЫ ДЛЯ ALPHA ----------
     Дубли четырёх опорных ступеней в виде «R G B». Нужны, чтобы
     alpha-токены ниже строились из тех же значений, а не жили
     отдельной копией. Опорные ступени подтверждены экспортом:
     заливки alpha-свотчей — ровно bone/1000, gold/500, plum/500,
     berry/500. При правке примитива меняй пару (hex + канал) синхронно. */
  --rgb-bone-1000: 242 240 232; /* #F2F0E8 */
  --rgb-gold-500:  193 156  86; /* #C19C56 */
  --rgb-plum-500:  128  83  99; /* #805363 */
  --rgb-berry-500: 179  63  98; /* #B33F62 */
  --rgb-black:       0   0   0;
  --rgb-ink-1000:    7   8   7; /* #070807 — для растяжек «цвет страницы → прозрачность» */


  /* ---------- ALPHA ----------
     Не отдельные плотные цвета, а прозрачности поверх подложки.
     bone-* — хайрлайны и тихие поверхности, gold-* / plum-* /
     berry-* — материалы и подсветка, black-* — затемнение
     (скрим модалки, читаемость поверх изображений).

     В Figma прозрачности заданы 8-битными значениями (0.0392157 и т.д.);
     здесь округлены до процентов из имени токена — расхождение <0.4 %. */
  --color-alpha-bone-04:  rgb(var(--rgb-bone-1000) / 0.04);
  --color-alpha-bone-08:  rgb(var(--rgb-bone-1000) / 0.08);
  --color-alpha-bone-12:  rgb(var(--rgb-bone-1000) / 0.12);
  --color-alpha-gold-12:  rgb(var(--rgb-gold-500)  / 0.12);
  --color-alpha-gold-24:  rgb(var(--rgb-gold-500)  / 0.24);
  --color-alpha-plum-18:  rgb(var(--rgb-plum-500)  / 0.18);
  --color-alpha-berry-18: rgb(var(--rgb-berry-500) / 0.18);
  --color-alpha-black-36: rgb(var(--rgb-black)     / 0.36);
  --color-alpha-black-64: rgb(var(--rgb-black)     / 0.64);
}


/* ============================================================
   SEMANTIC ROLES — единственный слой, к которому обращаются компоненты
   ============================================================

   Каждое семейство закреплено за одной ролью и не подрабатывает в чужой:

     OLIVE  — основа и глубина: фон, стекло, крупные поверхности
     PLUM   — эмоциональный слой: бейджи, подсветка, вторичный смысл
     GOLD   — продуктовый путь: выбор, active-state, ритуальное действие
     BERRY  — коммерция: оплата и единственная purchase-CTA на экране

   Правило пересечения: элемент одновременно «выбранный» и «покупка»
   берёт GOLD. Berry живёт только на самой кнопке оплаты.
   ============================================================ */

:root {

  /* ---------- SURFACES ---------- */
  --surface-page:   var(--color-ink-1000);   /* фон страницы — так и в макете */
  /* Тот же цвет каналами «R G B» — для прозрачных слоёв поверх снимков
     (см. --photo-tint). Меняешь --surface-page — меняй и это. */
  --rgb-surface-page: var(--rgb-ink-1000);
  --surface-card:   var(--color-olive-900);  /* плотная карточка, шапка, тело модалки */
  --surface-nested: var(--color-olive-850);  /* вложенное в карточку */


  /* ---------- TEXT ----------
     Замеренный контраст (WCAG, композит с учётом материалов):

       bone/1000  11.5 : 1 и выше на любой поверхности — везде безопасен
       bone/700    6.3 : 1 и выше на любой поверхности — рабочая лошадка
       bone/500    3.65–5.57 : 1 — ПРОХОДИТ AA только на голом surface-page

     bone/500 проваливает AA (4.5:1) под любым материалом на оливе:
     low-glass 4.38, plum-atmosphere 4.16, gold-selected 3.98,
     raised-glass 3.89 — потому что материал это полупрозрачный bone,
     он осветляет подложку и съедает контраст.

     Отсюда жёсткое правило: --text-muted НЕ несёт мелкий текст.
     Только крупные/декоративные начертания (>=18.5px или >=14px bold),
     disabled-состояния и необязательные глифы. Caption и Label/Small
     из шкалы идут на --text-secondary. */
  --text-primary:   var(--color-bone-1000);
  --text-secondary: var(--color-bone-700);
  --text-muted:     var(--color-bone-500);


  /* ---------- BORDERS ----------
     hairline — по спецификации alpha/bone-08. В экспорте Figma
     границы материалов нарисованы плотнее (alpha/bone-12), поэтому
     вторая ступень заведена явно, а не подмешивается на месте. */
  --border-hairline: var(--color-alpha-bone-08);
  --border-strong:   var(--color-alpha-bone-12);


  /* ---------- ACCENTS ---------- */
  --accent-selected:   var(--color-gold-500);   /* выбор, active-state */
  --accent-purchase:   var(--color-berry-500);  /* только кнопка оплаты */
  --accent-atmosphere: var(--color-plum-500);   /* глубина, без CTA */


  /* ---------- ACCENT STATES & PAIRINGS ----------
     Выведены из замеров, не подобраны:

     GOLD  — тёмный текст. ink/1000 на gold/500 даёт 7.79:1,
             на gold/400 — 10.16:1. Ховер осветляет, контраст растёт.

     BERRY — светлый текст. bone/1000 на berry/500 даёт 4.84:1.
             Ховер уводит ВНИЗ, в berry/600 (6.73:1), а не вверх:
             на berry/400 тот же bone/1000 даёт 3.89:1 и падает ниже AA.
             Осветлять берри под светлым текстом нельзя. */
  --accent-selected-hover: var(--color-gold-400);
  --accent-purchase-hover: var(--color-berry-600);
  --text-on-selected:      var(--color-ink-1000);
  --text-on-purchase:      var(--color-bone-1000);

  /* Фокус — золотом: 10.16:1 на фоне страницы, видно без вопросов. */
  --focus-ring: var(--color-gold-400);

  /* Затемнение: scrim — под модалку, scrim-soft — под текст на картинке. */
  --scrim:      var(--color-alpha-black-64);
  --scrim-soft: var(--color-alpha-black-36);

  /* Тонировка кадра: ровный слой поверх фонового снимка вместо растяжки в
     цвет страницы. Кадр остаётся кадром (композиция макета видна целиком),
     а белый текст получает единый уровень подложки на всей высоте экрана.
     Цвет — не чёрный, а фон страницы: снимок уходит в тот же тон, в котором
     стоит остальная страница, и края кадра не выглядят чужой заплатой. */
  --photo-tint: rgb(var(--rgb-surface-page) / 0.60);

  /* Кромка полосы со снимком: мягкая тень по контуру кадра. Гасит стык
     двух соседних полос и сажает кадр на страницу, не трогая сам снимок.
     Тон глубже фона страницы (ink/1100) — иначе тень на этом фоне не
     читается вовсе. */
  --shadow-band: 0 0 20px 10px var(--color-ink-1100);

  /* Дизеринг тёмных градиентов. Скрим на фоне страницы идёт от чёрного к
     #070807 — это пять-шесть ступеней 8-битной шкалы на всю высоту экрана,
     и каждая ступень читается горизонтальной полосой (сотни пикселей одного
     цвета, потом скачок на единицу). Плёночное зерно поверх размывает
     границы ступеней: амплитуда — один-два уровня, на светлых материалах
     его не видно вовсе.
     Кладётся первым слоем в background-image поверх самого градиента. */
  --dither: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.012 0 0 0 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23d)'/%3E%3C/svg%3E");


  /* ---------- STATUS ----------
     Дизайн-система задаёт четыре семейства под четыре роли и запрещает
     заводить новые. Статусов (успех / в процессе / ошибка) среди ролей
     нет, а продукту они нужны: сообщения форм, статусы заказов в кабинете.
     Поэтому статусы собраны ИЗ СУЩЕСТВУЮЩИХ семейств, без пятого цвета:

       успех      — gold. Завершённый расклад это и есть пройденный
                    продуктовый путь, роль золота не нарушается.
       в процессе — bone. Нейтральное ожидание, не тянет внимание.
       ошибка     — berry. Единственный красный в системе.

     Важно: berry как ТЕКСТ не проходит AA (3.39–4.52 в зависимости от
     подложки), поэтому смысл ошибки несут плашка и бордер, а текст
     остаётся bone/1000 (13.19:1). Золото как текст брать можно —
     gold/300 держит 9.19:1 даже на собственной плашке поверх карточки.

     ВНИМАНИЕ: это расширение системы. Требует подтверждения владельца. */
  --status-success-text:   var(--color-gold-300);
  --status-success-bg:     var(--color-alpha-gold-12);
  --status-success-border: var(--color-gold-600);

  --status-progress-text:  var(--color-bone-700);
  --status-progress-bg:    var(--color-alpha-bone-08);

  --status-error-text:     var(--color-bone-1000);
  --status-error-bg:       var(--color-alpha-berry-18);
  --status-error-border:   var(--color-berry-600);

  --status-neutral-text:   var(--color-bone-500);
  --status-neutral-bg:     var(--color-alpha-bone-04);


  /* ---------- BRAND (исключение) ----------
     Цвета чужих брендов: VK и Яндекс требуют своей айдентики на кнопках
     входа. К палитре отношения не имеют и в роли не укладываются,
     поэтому вынесены сюда явно — чтобы литералов не осталось
     в компонентах и DoD-грепы были честными. */
  --brand-vk:          #0077FF;
  --brand-vk-text:     #FFFFFF;
  --brand-yandex:      #FFFFFF;
  --brand-yandex-text: #000000;


  /* ============================================================
     TYPOGRAPHY — Шаг 4
     ============================================================
     Два шрифта с жёстким разделением зон ответственности.

     PRATA (editorial) — только экранные заголовки, названия тарифов,
     названия карт и цена. Запрещено: длинный текст, кнопки, мелкие
     подписи, лейблы, интерфейсные надписи. Единственное начертание
     Regular 400 — никогда не задавать font-weight: bold, браузер
     синтезирует жирность и шрифт ломается.

     MANROPE (functional) — весь читаемый интерфейс: объяснения,
     выгоды тарифа, табы, формы, действия.

     Размеров вне шкалы не бывает. Если нужного нет — значит выбран
     неправильный уровень иерархии, а не нужна новая ступень. */
  --font-editorial:  'Prata', Georgia, serif;
  --font-functional: 'Manrope', system-ui, -apple-system, sans-serif;

  /* Prata — размер/интерлиньяж */
  --type-display-hero-size:   48px;  --type-display-hero-lh:   56px;
  --type-display-screen-size: 40px;  --type-display-screen-lh: 48px;
  /* Заголовок экрана воронки на широком вьюпорте. Отдельная ступень,
     а не --type-display-hero: у героя сайта и у экрана воронки в
     макетах V2 разный кегль (D01 — 82px, F01 — 68px), и общий токен
     утащил бы воронку за главной. */
  --type-display-funnel-size: 48px;  --type-display-funnel-lh: 56px;
  /* Ступень для заголовка, текст которого пишет пользователь: вопрос
     приходит длиной и в пять слов, и в двадцать. Ступень заголовка экрана
     держит только короткие — на длинных вопрос занимал пол-экрана. */
  --type-display-question-size: 34px;  --type-display-question-lh: 44px;
  --type-display-price-size:  28px;  --type-display-price-lh:  36px;
  --type-display-card-size:   26px;  --type-display-card-lh:   34px;

  /* Manrope */
  --type-heading-h1-size:    28px;  --type-heading-h1-lh:    36px;  --type-heading-h1-weight:    700;
  --type-heading-h2-size:    22px;  --type-heading-h2-lh:    30px;  --type-heading-h2-weight:    600;
  --type-title-large-size:   18px;  --type-title-large-lh:   26px;  --type-title-large-weight:   600;
  --type-body-large-size:    17px;  --type-body-large-lh:    26px;  --type-body-large-weight:    400;
  --type-body-medium-size:   15px;  --type-body-medium-lh:   23px;  --type-body-medium-weight:   400;
  --type-body-small-size:    13px;  --type-body-small-lh:    19px;  --type-body-small-weight:    400;
  --type-label-large-size:   14px;  --type-label-large-lh:   20px;  --type-label-large-weight:   600;
  --type-label-small-size:   12px;  --type-label-small-lh:   16px;  --type-label-small-weight:   500;
  --type-caption-size:       11px;  --type-caption-lh:       16px;  --type-caption-weight:       400;


  /* ============================================================
     LAYOUT CONTRACT — Шаг 5 (mobile-first)
     ============================================================
     Верстаем от 390 px вверх. Десктоп — расширение, а не отправная
     точка. Высоты контролов и радиусы — токены, не магические числа. */
  --layout-viewport: 390px;  /* опорный мобильный вьюпорт */
  --layout-content:  350px;  /* ширина контента внутри него */
  --layout-gutter:    20px;  /* горизонтальное поле */

  /* Широкий вьюпорт — снято с макетов V2 (кадр 1440): поле 72 px,
     мера контента 1296 px. Отдельные токены, а не переопределение
     --layout-gutter в медиа-запросе: то же поле держит колонку
     воронки, и её раскладка на десктопе своя (см. --funnel-pad). */
  --layout-gutter-wide:   72px;
  --layout-content-wide: 1296px;

  /* Высота шапки. Кадр героя в макетах V2 начинается у верхнего края
     экрана, а шапка стоит поверх него, — значит секцию нужно поднять
     ровно на эту величину (см. «ГЕРОЙ ПОД ШАПКОЙ» в main.css).
     Значение снято с собранной шапки: 14/22 px поля + строка логотипа. */
  --header-height: 73px;

  --control-compact: 44px;   /* минимум для тач-цели */
  --control-default: 52px;
  --control-large:   60px;

  /* Вертикальный ритм между секциями. Мобильное значение — база,
     на широком вьюпорте расширяется (десктоп = расширение). */
  --space-section: 64px;

  --radius-control: 18px;
  --radius-card:    26px;
  --radius-hero:    32px;
  --radius-pill:   999px;    /* полная скругляемость: чипы, аватары */
}


/* ============================================================
   ШИРОКИЙ ВЬЮПОРТ — второй тир шкалы
   ============================================================
   Мобильная шкала остаётся отправной точкой (см. Шаг 4/5): здесь
   только те ступени, которые в макетах V2 на кадре 1440 реально
   другие. Кегли сняты с макетов по высоте прописной (Prata, cap
   0.81 em), а не подобраны на глаз:

     герой D01        cap 67 px → 82/94
     заголовок секции cap 43 px → 53/62

   Тир намеренно узкий. Всё, что делит токен с воронкой или экраном
   результата, сюда не попадает: у них своя раскладка и свои
   переопределения, и общий сдвиг сломал бы уже собранные экраны.
   Для заголовка воронки заведён --type-display-funnel. */
@media (min-width: 901px) {
  :root {
    --space-section: 112px;
    --header-height:  89px;

    --type-display-hero-size:   82px;  --type-display-hero-lh:   94px;
    --type-display-screen-size: 53px;  --type-display-screen-lh: 62px;
  }
}