/* fun-tokens.css · 22fun.ing · подключается ПОСЛЕДНИМ (после fun-core.css и fun-ui.css).
   Только переменные :root и правила тайской типографики. Спецификация: _design/HOME_SPEC.md.
   Копия-исходник: _design/fun-tokens.css (если сборка перезапишет этот файл заглушкой — брать оттуда).
   Имена, уже занятые движком (--ff-night, --ff-panel, --ff-flame, --ff-royal …), перекрыты здесь;
   новые имена помечены «new». Контраст посчитан по WCAG 2.x, цифры — в HOME_SPEC.md, раздел «б». */

:root {
  /* ── Фоны и поверхности: тёплый «лак», не нейтральный чёрный ── */
  --ff-night: #110D0E;          /* фон страницы */
  --ff-night-2: #181213;        /* чередующаяся полоса */
  --ff-night-rgb: 17, 13, 14;
  --ff-well: #0B0809;           /* утопленные области: дорожка ползунка, ячейки таблиц */
  --ff-panel: #1F1819;          /* карточка */
  --ff-raise: #2A2022;          /* приподнятая карточка, hover, шапка таблицы */
  --ff-dusk: #3A0A12;           /* тёмно-бордовая полоса (подборщик, CTA-полоса) */
  --ff-ember: #2A1517;          /* тёплая панель-подсказка (B06) */
  --ff-ember-line: #6A2A2E;
  --ff-c-wine: #3A1218;

  /* ── Границы ── */
  --ff-line: #3B2E30;           /* декоративная граница карточки */
  --ff-line-hi: #5A4548;        /* выделенная граница, разделители таблиц */
  --ff-line-ctl: #8C7479;       /* new: граница элементов управления (≥ 3:1 к фону) */

  /* ── Текст ── */
  --ff-ink: #F7F0EA;            /* основной */
  --ff-ink-2: #CFC3BE;          /* вторичный */
  --ff-ink-3: #A89A96;          /* подписи, метки */
  --ff-ink-4: #9C8D89;          /* самые тихие подписи (не мельче 13 px) */
  --ff-link: #FFB4A8;           /* new: ссылки в тексте (подчёркнуты всегда) */

  /* ── Акцент 1: красный бренда — заливки, не текст на тёмном ── */
  --ff-red: #C42126;            /* new: основной цвет оператора */
  --ff-red-hi: #D9363B;         /* new: hover заливки (белый текст только ≥ 18 px/600) */
  --ff-red-deep: #A81B20;       /* new: нажатие, тени билета */
  --ff-red-rgb: 196, 33, 38;    /* new */
  --ff-royal: #C42126;          /* в движке: чипы-номера, точки, полосы прогресса → красный бренда */
  --ff-royal-rgb: 196, 33, 38;
  --ff-ticket-a: #5E0F18;       /* new: билет первого экрана, тёмный край градиента */
  --ff-ticket-b: #8E141D;       /* new: билет, светлый край */

  /* ── Акцент 2: золото — главная кнопка, цифры, акцентный текст ── */
  --ff-flame: #FFC83D;          /* главная кнопка /go/ и акцентный текст на тёмном */
  --ff-flame-hi: #FFDB70;       /* hover */
  --ff-flame-deep: #F5B21B;     /* нажатие, акцентные подписи */
  --ff-flame-rgb: 255, 200, 61;
  --ff-on-flame: #2A0A0D;       /* текст на золотой кнопке */
  --ff-gold: #FFF080;           /* светло-жёлтый оператора: крупные суммы, акцент в H1, подчёркивание терминов */

  /* ── Состояния ── */
  --ff-ok: #157F3D;             /* заливка «готово» (белый текст 5.08:1) */
  --ff-ok-hi: #5FD08A;          /* текст и значок «можно» на тёмном */
  --ff-alert: #FF8A80;          /* «нельзя», ошибка — текст и значок на тёмном */
  --ff-amber: #FFB454;          /* «внимание» */
  --ff-focus: #FFF080;          /* new: обводка фокуса, 2 px + отступ 2 px */

  /* ── Категории (ленты-ярлыки по продукту, как SLOT / SPORT / SPECIAL у оператора) ── */
  --ff-cat-slot: #C2185B;       /* new: слоты — белый текст 5.87:1 */
  --ff-cat-sport: #2F5FD6;      /* new: спорт — 5.63:1 */
  --ff-cat-special: #6D3BD1;    /* new: особые — 6.57:1 */
  --ff-cat-vip: #E3B341;        /* new: VIP — текст --ff-on-flame 9.4:1 */
  --ff-cat-new: #C42126;        /* new: новые участники — белый 5.85:1 */

  /* ── Ранги VIP (B24) и цветные метки ── */
  --ff-c-bronze: #E59A55;
  --ff-c-silver: #C3BDBB;
  --ff-c-cyan: #5FD6DE;
  --ff-c-blue: #7FB2FF;
  --ff-c-violet: #C3A6FF;

  /* ── Шрифты ── */
  --ff-display: "Prompt", "Anuphan", "Noto Sans Thai", "Leelawadee UI", "Thonburi", Tahoma, sans-serif;
  --ff-text: "Anuphan", "Noto Sans Thai", "Leelawadee UI", "Thonburi", Tahoma, sans-serif;
  --ff-num: "Prompt", "Anuphan", Tahoma, sans-serif;   /* new: цифры билета и калькулятора */

  /* ── Кегли (new; значения для ≥ 900 px, телефон — ниже в @media) ── */
  --ff-fs-h1: 46px;   --ff-lh-h1: 1.36;
  --ff-fs-h2: 32px;   --ff-lh-h2: 1.38;
  --ff-fs-h3: 21px;   --ff-lh-h3: 1.45;
  --ff-fs-lead: 19px; --ff-lh-lead: 1.7;
  --ff-fs-body: 17px; --ff-lh-body: 1.75;
  --ff-fs-small: 14px; --ff-lh-small: 1.6;
  --ff-fs-tag: 13px;  --ff-lh-tag: 1.5;
  --ff-fs-btn: 17px;  --ff-lh-btn: 1.4;
  --ff-fs-num: 40px;  --ff-lh-num: 1.35;
  --ff-btn-h: 52px;

  /* ── Радиусы: кнопка — скруглённый прямоугольник, не «пилюля» ── */
  --ff-r-pill: 12px;            /* в движке так называются кнопки и чипы; у нас не таблетки */
  --ff-r-card: 14px;
  --ff-r-tile: 10px;
  --ff-r-tag: 6px;              /* new: ярлыки, чипы-факты */
  --ff-r-ticket: 18px;          /* new: билет первого экрана */
  --ff-r-round: 999px;          /* new: только там, где нужен круг (аватар, точка) */

  /* ── Тени ── */
  --ff-sh-card: 0 1px 0 rgba(255, 240, 234, 0.04) inset, 0 12px 28px -18px rgba(0, 0, 0, 0.8);
  --ff-sh-raise: 0 18px 44px -20px rgba(0, 0, 0, 0.85);
  --ff-sh-ticket: 0 28px 60px -28px rgba(196, 33, 38, 0.55), 0 2px 0 rgba(255, 240, 128, 0.14) inset;
  --ff-sh-btn: 0 3px 0 #B97F00;                    /* «ребро» золотой кнопки */
  --ff-sh-btn-press: 0 1px 0 #B97F00;

  /* ── Сетка и отступы (new) ── */
  --ff-wrap: 1160px;            /* ширина контейнера */
  --ff-gutter: 24px;            /* поля страницы ≥ 900 px */
  --ff-col-gap: 24px;           /* 12 колонок */
  --ff-band-y: 72px;            /* вертикальный отступ полосы */
  --ff-s1: 4px; --ff-s2: 8px; --ff-s3: 12px; --ff-s4: 16px; --ff-s5: 24px; --ff-s6: 32px; --ff-s7: 48px; --ff-s8: 72px;
  --ff-head-h: 68px;            /* высота шапки */
}

@media (max-width: 899px) {
  :root {
    --ff-fs-h1: 26px;   --ff-lh-h1: 1.38;
    --ff-fs-h2: 23px;   --ff-lh-h2: 1.4;
    --ff-fs-h3: 18px;   --ff-lh-h3: 1.45;
    --ff-fs-lead: 16px; --ff-lh-lead: 1.7;
    --ff-fs-body: 16px; --ff-lh-body: 1.7;
    --ff-fs-small: 13px;
    --ff-fs-tag: 12.5px;
    --ff-fs-btn: 16px;
    --ff-fs-num: 30px;
    --ff-btn-h: 48px;
    --ff-gutter: 16px;
    --ff-band-y: 44px;
    --ff-r-ticket: 14px;
    --ff-head-h: 56px;
  }
}

/* ══ Тайская типографика ══
   Верхние и нижние знаки требуют воздуха: текст ≥ 1.6, заголовки ≥ 1.35.
   Прописных в тайском нет, разрядка рвёт связки знаков — оба приёма выключены для всего сайта. */

html:lang(th) {
  font-family: var(--ff-text);
  font-size: var(--ff-fs-body);
  line-height: var(--ff-lh-body);
  font-synthesis: none;                 /* без искусственного жирного и курсива: нужного веса нет — видно сразу */
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html:lang(th) body,
html:lang(th) body * {
  letter-spacing: 0 !important;         /* эталон разряжает метки на 0.04–0.12em */
  text-transform: none !important;      /* эталон ставит uppercase на метки и шапки таблиц */
  font-style: normal !important;        /* курсивных начертаний не грузим */
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* Перенос: слова в тайском не разделены пробелами, строку режет словарь браузера. */
html:lang(th) body {
  word-break: normal;                   /* не keep-all и не break-all */
  line-break: auto;
  overflow-wrap: break-word;            /* длинная латиница и адреса не распирают карточку */
  text-wrap: pretty;
}

html:lang(th) p,
html:lang(th) li,
html:lang(th) dd,
html:lang(th) td,
html:lang(th) th,
html:lang(th) figcaption,
html:lang(th) blockquote,
html:lang(th) summary,
html:lang(th) label {
  line-height: max(1.6, var(--ff-lh-body));
}

html:lang(th) h1,
html:lang(th) h2,
html:lang(th) h3,
html:lang(th) h4 {
  font-family: var(--ff-display);
  font-weight: 700;
  text-wrap: balance;
  overflow-wrap: break-word;
  padding-block: 0.06em;                /* запас под верхние знаки при overflow у родителя */
}
html:lang(th) h1 { font-size: var(--ff-fs-h1); line-height: max(1.35, var(--ff-lh-h1)); }
html:lang(th) h2 { font-size: var(--ff-fs-h2); line-height: max(1.35, var(--ff-lh-h2)); }
html:lang(th) h3 { font-size: var(--ff-fs-h3); line-height: max(1.35, var(--ff-lh-h3)); font-weight: 600; }
html:lang(th) h4 { line-height: 1.45; font-weight: 600; }

/* Кнопки и элементы управления: подпись может уйти на вторую строку, высота не фиксируется. */
html:lang(th) a[href^="/go/"],
html:lang(th) button,
html:lang(th) [role="button"],
html:lang(th) summary {
  font-family: var(--ff-text);
  line-height: var(--ff-lh-btn);
  white-space: normal;
  text-wrap: balance;
}
/* Размер и высоту кнопок (--ff-fs-btn, --ff-btn-h как min-height, не height) инженер ставит в классах кнопок:
   общий селектор сломал бы значки-кнопки (меню, «копировать», «сердечко»). */

/* Цифры и знак ฿: табличные, из шрифта цифр; сумма не отрывается от «บาท» и «฿». */
html:lang(th) [data-num],
html:lang(th) table td,
html:lang(th) output,
html:lang(th) time {
  font-variant-numeric: tabular-nums lining-nums;
}
html:lang(th) [data-num] {
  font-family: var(--ff-num);
  font-weight: 700;
  line-height: var(--ff-lh-num);
  white-space: nowrap;                  /* «2,000 บาท», «฿ 36.00» не рвутся посередине */
}

/* Мелкий текст: тайский при 12 px и ниже теряет знаки — нижняя граница 12.5 px. */
html:lang(th) small,
html:lang(th) figcaption,
html:lang(th) [data-small] {
  font-size: max(12.5px, var(--ff-fs-small));
  line-height: var(--ff-lh-small);
}

/* Обрезка одной строкой срезает знаки по высоте и рвёт слог: строк с многоточием на тайском нет. */
html:lang(th) [data-clip] {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

html:lang(th) :focus-visible {
  outline: 2px solid var(--ff-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html:lang(th) *,
  html:lang(th) *::before,
  html:lang(th) *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}