/* ===========================================================================
   tokens.css — ИСТОЧНИК ПРАВДЫ по дизайн-токенам.
   Значения перенесены из 5-design.md (роль web-design) без изменений.
   Правило приёмки: ни одного hex / px-отступа / радиуса / длительности
   в других файлах. Смена брендбука = правка ТОЛЬКО этого файла + Logo.
   =========================================================================== */

/* ——— Шрифты (self-host) ———
   Было 6 файлов / 202 КБ: у каждой гарнитуры отдельно cyrillic, latin и ₽.
   Латинские субсеты Google тянутся ВСЕГДА (цифры и пробел лежат в U+0000-00FF)
   и стоили 131 КБ из 202, хотя из латиницы на сайте нужны 84 символа.
   Стало 2 файла / 100 КБ: по одному на гарнитуру, набор запрошен через
   Google Fonts API `text=` — печатная ASCII + весь блок U+0400-045F + ₽ №
   и типографика (« » · – — … → ↗). Оба файла остаются вариативными (ось wght).
   Бюджет критерия 14 «≤5 файлов» — выполнен.
   ⚠️ Правите тексты — сверяйтесь с набором: символа вне субсета не будет,
   он отрисуется системным фолбэком. Пересобрать — scripts/build-fonts.py. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-text.woff2') format('woff2');
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('../fonts/literata-text.woff2') format('woff2');
}

:root {
  /* ——— Цвет: поверхности ——— */
  --color-bg:            #150D10;
  --color-surface-1:     #1D1317;
  --color-surface-2:     #241A1E;
  --color-surface-3:     #2C2024;
  --color-overlay:       rgba(10, 6, 8, 0.72);

  /* ——— Цвет: текст ——— */
  --color-text:          #F4ECE6;   /* 16.4:1 на bg */
  --color-text-muted:    #C9B6B2;   /*  9.9:1 на bg */
  --color-text-subtle:   #A08D91;   /*  6.1:1 на bg */
  /* Текст НА акценте. Был белым при винно-красном акценте (5.6:1). Коралл бренда
     светлее: белым по нему 2.93:1 — провал AA, поэтому надпись на кнопке тёмная.
     Замеры: 6.54:1 на --color-accent, 7.61:1 на hover, 5.22:1 на active. */
  --color-on-accent:     #150D10;

  /* ——— Цвет: единственный акцент (только действие/выбор) ———
     🔴 12.08.2026: временная палитра [V] заменена НАСТОЯЩИМ цветом бренда.
     Источник — экспорт старого сайта на Тильде, три независимых подтверждения:
       • CSS igrik.bar: #FD636B у всех заголовков секций, ховера меню и рамок кнопок
         (20 вхождений, самый частый небелый цвет страницы);
       • фавикон-эмблема: градиент #FED0AF → #FEA094 → #FE93C7 (персик → розовый);
       • логотип «IGRIK Bar & Shop»: подпись тем же кораллово-розовым.
     Было (гипотеза дизайна): винно-красный #C22A4D. Стало: коралл #FD636B.
     ⚠️ Следствие: белый текст на коралле даёт 2.93:1 (провал AA), поэтому
     --color-on-accent стал ТЁМНЫМ. Все замеры пересчитаны, см. комментарии.

     🔴 30.08.2026: по правке Натальи (опрос сотрудников, пункт 1) — коралл заменён
     на градиент, СНЯТЫЙ живьём с CSS кнопки возрастного гейта igrik.bar (не по
     памяти): rgba(254,147,199,1)=#FE93C7 (розовый) → rgba(254,208,175,1)=#FED0AF
     (персик). Обкатано двумя превью-ветками Cloudflare Pages (color-preview-pink,
     потом color-preview-gradient), одобрено Натальей дважды — сперва градиент
     кнопки («цвет кнопок отличный»), потом персиковее текст («вытащим в более
     персиковый», «Отлично»). --color-accent-text/-hi — НЕ конец градиента, а точка
     на нём (t=0.7 к персиковому, линейная интерполяция) по её же второй правке. */
  --color-accent:        #FE93C7;   /*  9.3:1 к тёмному тексту на кнопке */
  --color-accent-hover:  #FEACD4;   /* 10.9:1 к тёмному тексту */
  --color-accent-active: #FE6BB2;   /*  7.3:1 к тёмному тексту */
  --color-accent-text:   #FEBEB6;   /* 12.1:1 на bg — точка t=0.7 к персику по правке Натальи */
  --color-accent-text-hi: #FED4CF;
  --color-accent-deep:   #8E2F36;   /* заливка «вина» в эффекте открытия бутылки — не тронуто */
  --color-accent-tint:   rgba(254, 147, 199, 0.14);
  --gradient-accent:        linear-gradient(100deg, #FE93C7 0%, #FED0AF 100%);
  --gradient-accent-hover:  linear-gradient(100deg, #FEACD4 0%, #FEDFC8 100%);
  --gradient-accent-active: linear-gradient(100deg, #FE6BB2 0%, #FEB987 100%);

  /* ——— Цвет: линии ——— */
  --color-hairline:      rgba(244, 236, 230, 0.12); /* только декор */
  --color-border:        #8A7178;                   /* границы контролов, 3.5:1 */
  /* + разработчик: значение названо в 5-design.md (5.6, штриховка «занят»),
     но не было вынесено в токен — вынес, чтобы в компонентах не осталось «магии» */
  --color-hatch:         rgba(244, 236, 230, 0.08);

  /* ——— Цвет: семантика (всегда + иконка/слово) ——— */
  --color-success:       #59C08C;
  --color-warning:       #F0B23F;
  --color-error:         #FF7A66;
  --color-success-tint:  rgba(89, 192, 140, 0.12);
  --color-warning-tint:  rgba(240, 178, 63, 0.12);
  --color-error-tint:    rgba(255, 122, 102, 0.12);

  /* ——— Типографика ——— */
  --font-display: "Literata", Georgia, "Iowan Old Style", "Noto Serif", serif;
  --font-text:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-num-features: "tnum" 1, "lnum" 1;

  --text-display:   clamp(2.25rem, 1.45rem + 3.6vw, 4rem);       /* 36 → 64 */
  --text-h1:        clamp(2rem,    1.60rem + 1.8vw, 3rem);       /* 32 → 48 */
  --text-h2:        clamp(1.5rem,  1.20rem + 1.4vw, 2.25rem);    /* 24 → 36 */
  --text-h3:        clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);     /* 20 → 24 */
  --text-number-xl: clamp(2.5rem,  1.90rem + 2.6vw, 3.5rem);     /* 40 → 56 */
  --text-number-md: clamp(1.5rem,  1.40rem + 0.5vw, 1.75rem);    /* 24 → 28 */
  --text-lead:      clamp(1.0625rem, 1rem + 0.5vw, 1.25rem);     /* 17 → 20 */
  --text-body:      clamp(1rem,    0.97rem + 0.15vw, 1.0625rem); /* 16 → 17 */
  --text-body-sm:   0.9375rem;   /* 15 */
  --text-caption:   0.8125rem;   /* 13 */
  --text-label:     0.8125rem;   /* 13, uppercase, ls .08em */

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-body:   1.6;

  /* ——— Раскладка ——— */
  --container-max:    75rem;   /* 1200 */
  --container-narrow: 45rem;   /* 720  */
  --container-pad:    1rem;    /* 16 → 24 → 32 по медиа */
  --content-measure:  68ch;
  --section-y:        clamp(3.5rem, 2.5rem + 4vw, 6rem); /* 56 → 96 */

  /* ——— Отступы (база 4) ——— */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem;  --space-8: 2rem;    --space-10: 2.5rem;
  --space-12: 3rem;   --space-16: 4rem;   --space-20: 5rem;   --space-24: 6rem;
  --space-32: 8rem;

  /* ——— Радиусы ——— */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 24px;
  --radius-pill: 999px;

  /* ——— Тени и фокус ——— */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.55);
  --ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent-text);

  /* ——— Размеры контролов ——— */
  --control-h-lg: 52px; --control-h-md: 44px; --control-h-sm: 36px;
  --field-h: 48px;         /* 5-design.md 5.5: поле ввода 48px */
  --drawer-w: 480px;       /* 5-design.md 5.4: правая панель на десктопе */
  --touch-min: 44px;
  --header-h: 56px;        /* ≥768: 64px */
  --statusbar-h: 40px;     /* ≥768: 44px */
  --mobilebar-h: 64px;

  /* ——— Движение (бюджет — 6 эффектов) ——— */
  --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 260ms;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);

  /* Такты эффекта 6 «открытие игристого» (components.css, раздел 16).
     Шкала отдельная осознанно: --dur-fast/base/slow — такты РЕАКЦИИ на
     действие (120–260 мс), а здесь сцена на 2.68 с, играющая один раз;
     кнопка с откликом 900 мс была бы сломанной кнопкой. Все задержки внутри
     сцены — calc(--pop-lead + --pop-stagger * N), магических мс нет. */
  --dur-pop-cork:   620ms;
  --dur-pop-foam:   900ms;
  --dur-pop-bubble: 1000ms;
  --dur-pop-fill:   1100ms;
  --pop-lead:       180ms;   /* пауза до хлопка пробки */
  --pop-stagger:     80ms;   /* шаг между пузырьками */

  /* ——— Слои ——— */
  --z-header: 100; --z-mobilebar: 110; --z-overlay: 200; --z-drawer: 210; --z-toast: 300;

  /* ——— Скрим для текста поверх фото ——— */
  --scrim: linear-gradient(180deg, rgba(10,6,8,0) 0%, rgba(10,6,8,.35) 45%, rgba(10,6,8,.78) 100%);
  /* Растушёвка кадра в фон страницы: фото, вклеенное в тёмный лист прямым
     обрезом, читается наклейкой. Слева и снизу уводим его в --color-bg. */
  --scrim-edge-left:   linear-gradient(90deg, var(--color-bg) 0%, rgba(21,13,16,.86) 12%, rgba(21,13,16,.42) 34%, rgba(21,13,16,0) 66%);
  --scrim-edge-bottom: linear-gradient(0deg,  var(--color-bg) 0%, rgba(21,13,16,0) 42%);

  /* ——— Глубина листа ———
     🔴 13.08.2026, ревизия дизайна. Правка по факту: страница на 7300 px
     заливалась одним плоским --color-bg, и владелец назвал результат «убого».
     Тёплое пятно на первом экране + чередование поверхностей секций дают
     объём без картинок и без веса. Оттенок взят из акцента бренда (#FD636B),
     альфа мизерная: замер контраста текста от этого не меняется
     (--color-text на bg 16.4:1, на bg+glow 16.1:1 — обе выше AAA). */
  --glow-warm: radial-gradient(60rem 40rem at 12% -10%, rgba(253, 99, 107, 0.10), transparent 62%);
  --glow-deep: radial-gradient(48rem 32rem at 88% 8%,  rgba(142, 47, 54, 0.16), transparent 60%);

  /* Ширина «вылета» контента за контейнер к краю окна. Одно место, где
     считается эта арифметика: дальше только var(--bleed-pad). */
  --bleed-pad: max(var(--container-pad), calc((100vw - var(--container-max)) / 2));
}

@media (min-width: 768px) {
  :root { --container-pad: 1.5rem; --header-h: 64px; --statusbar-h: 44px; }
}
@media (min-width: 1024px) {
  :root { --container-pad: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}