/* Слотборд · Hyper-Bloom «стекло и свет» · токены v3.1
   Полный файл. Тема: data-theme="dark|light" на корне. Режим поверхности: data-surface="cover|work".
   Новое относительно v3.0 помечено NEW. Значений вне шкал в файле нет. */

:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* шрифты */
  --font: "Onest", system-ui, sans-serif;
  --font-cover: "Unbounded", "Onest", sans-serif;            /* только заголовки в режиме «обложка» */
  --font-widget: system-ui, -apple-system, "Segoe UI", sans-serif; /* NEW исключение: кнопка виджета на чужом сайте */
  --num: tabular-nums;                                       /* NEW */

  /* поверхности */
  --bg: #07040F;
  --card: #16112A;            /* NEW пластина режима «работа», без размытия */
  --card-2: #1E1838;          /* NEW вложенная пластина, строка при наведении на карточке */
  --solid: #1A1330;           /* плотная пластина: подсказка, всплывающий календарь */
  --glass: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  --glass-border: rgba(255,255,255,.18);
  --glass-edge: inset 0 1px 0 rgba(255,255,255,.28);
  --line: rgba(255,255,255,.12);      /* NEW кромка пластины «работа», разделители */
  --hairline: rgba(255,255,255,.08);
  --fill-06: rgba(255,255,255,.06);   /* NEW наведение строки */
  --fill-10: rgba(255,255,255,.10);   /* NEW нажатие, вторая кнопка */
  --track: rgba(255,255,255,.14);
  --field: rgba(255,255,255,.06);
  --field-border: rgba(255,255,255,.22);
  --scrim: rgba(7,4,15,.64);
  --inverse-bg: #FFFFFF;      /* NEW «где я»: пилюля навигации */
  --inverse-text: #14102B;    /* NEW */

  /* текст */
  --text: #FFFFFF;            /* 20.3:1 на --bg */
  --text-2: #EAE5F7;          /* 16.5:1 */
  --text-3: #DCD5EC;          /* 12.9:1 на --card */
  --placeholder: #A79FC2;     /* NEW 7.3:1 на --card */
  --link: #7DE7F5;            /* 12.7:1 на --card */

  /* бренд */
  --rose: #FF2E8B;
  --iris: #6B4BFF;
  --cyan: #12D6E8;
  --amber: #FFB020;
  --badge: #CE0062;           /* NEW бейдж счётчика, белый 5.5:1 */

  /* смысл: четыре статуса + нейтральный */
  --ok: #12D6E8;      --ok-ink: #9FF3FB;   --ok-fill: rgba(18,214,232,.14);  --ok-line: rgba(18,214,232,.5);
  --warn: #FFB020;    --warn-ink: #FFD08A; --warn-fill: rgba(255,176,32,.14); --warn-line: rgba(255,176,32,.5);
  --bad: #FF2E8B;     --bad-ink: #FFA5CC;  --bad-fill: rgba(255,46,139,.14);  --bad-line: rgba(255,46,139,.55);
  --sel: #6B4BFF;     --sel-ink: #B9A8FF;  --sel-fill: rgba(107,75,255,.24);  --sel-line: rgba(107,75,255,.6);
  --muted: #A79FC2;   --muted-fill: rgba(255,255,255,.08);

  /* главная кнопка: белый текст ≥5.06:1 во всех пяти точках */
  --cta-1: #DA0061;
  --cta-2: #6B4BFF;
  --cta-3: #0A7A85;
  --cta: linear-gradient(100deg, var(--cta-1), var(--cta-2) 50%, var(--cta-3));

  /* фокус и кольца */
  --focus: #B9A8FF;                                                    /* NEW */
  --ring-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus);           /* NEW 2 px, отступ 2 px */
  --ring-selected: 0 0 0 2px var(--iris);                              /* NEW */
  --press-shade: inset 0 0 0 100px rgba(7,4,15,.2);                    /* NEW нажатие любой кнопки */

  /* тени, 5 ступеней */
  --sh-1: 0 1px 2px rgba(4,2,12,.4);
  --sh-2: 0 4px 12px rgba(4,2,12,.4);
  --sh-3: 0 10px 24px rgba(4,2,12,.45);
  --sh-4: 0 18px 44px rgba(4,2,12,.5);
  --sh-5: 0 28px 64px rgba(4,2,12,.6);

  /* свечение */
  --bloom-rose: #B01C5E;
  --bloom-iris: #4632A8;
  --bloom-cyan: #0E6E7A;
  --bloom-amber: #8A5A10;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #F4F2FA;
  --card: #FFFFFF;
  --card-2: #F8F7FC;
  --solid: #241C42;
  --glass: #FFFFFF;                      /* в светлой теме пластины белые, без размытия */
  --glass-border: rgba(20,16,43,.12);
  --glass-edge: inset 0 1px 0 rgba(255,255,255,1);
  --line: rgba(20,16,43,.12);
  --hairline: rgba(20,16,43,.08);
  --fill-06: rgba(20,16,43,.04);
  --fill-10: rgba(20,16,43,.08);
  --track: rgba(20,16,43,.12);
  --field: #FFFFFF;
  --field-border: rgba(20,16,43,.24);
  --scrim: rgba(20,16,43,.4);
  --inverse-bg: #14102B;
  --inverse-text: #FFFFFF;

  --text: #14102B;            /* 16.6:1 на --bg */
  --text-2: #2E2749;          /* 14.0:1 на --card */
  --text-3: #4A4270;          /* 8.2:1 на --bg */
  --placeholder: #6E6883;     /* 5.3:1 на --card, 4.8:1 на --bg */
  --link: #0A6B8C;            /* 6.0:1 */

  --ok: #0A7A85;      --ok-ink: #066B76;   --ok-fill: rgba(10,122,133,.10);  --ok-line: rgba(10,122,133,.42);
  /* ПРАВИЛО: --warn #A86A00 на белом = 4,44:1 (< 4,5). --warn — только значки, кромки, полосы.
     Текст внимания — всегда --warn-ink #7A4E05 (7,2:1 на --card, 6,4:1 на --warn-fill). */
  --warn: #A86A00;    --warn-ink: #7A4E05; --warn-fill: rgba(168,106,0,.10); --warn-line: rgba(168,106,0,.42);
  --bad: #C70058;     --bad-ink: #A8004C;  --bad-fill: rgba(199,0,88,.08);   --bad-line: rgba(199,0,88,.45);
  --sel: #4C30C8;     --sel-ink: #4C30C8;  --sel-fill: rgba(76,48,200,.10);  --sel-line: rgba(76,48,200,.45);
  --muted: #6E6883;   --muted-fill: rgba(20,16,43,.06);

  --focus: #4C30C8;
  --press-shade: inset 0 0 0 100px rgba(20,16,43,.12);

  --sh-1: 0 1px 2px rgba(20,16,43,.08);
  --sh-2: 0 4px 12px rgba(20,16,43,.08);
  --sh-3: 0 10px 24px rgba(20,16,43,.12);
  --sh-4: 0 18px 40px rgba(20,16,43,.14);
  --sh-5: 0 28px 64px rgba(20,16,43,.18);

  --bloom-rose: #F2A6C8;
  --bloom-iris: #C4B8F4;
  --bloom-cyan: #A6E6EC;
  --bloom-amber: #F5D6A0;
}

:root {
  /* радиусы — шкала из 7 */
  --r-6: 6px;     /* чекбокс, метка, бейдж */
  --r-12: 12px;   /* чип, слот, день в ленте, поле в таблице */
  --r-16: 16px;   /* кнопка, поле, пункт меню */
  --r-18: 18px;   /* карточка, тост */
  --r-26: 26px;   /* пластина раздела */
  --r-28: 28px;   /* окно, шторка */
  --r-pill: 999px;

  /* размытие */
  --blur-10: 10px;  --blur-20: 20px;  --blur-28: 28px;  --blur-40: 40px;

  /* отступы */
  --s-4: 4px;  --s-8: 8px;  --s-12: 12px; --s-16: 16px; --s-20: 20px;
  --s-24: 24px; --s-32: 32px; --s-40: 40px; --s-48: 48px; --s-56: 56px;

  /* кегли: кегль / интерлиньяж / жирность */
  --t-12: 500 12px/16px var(--font);
  --t-13: 400 13px/18px var(--font);
  --t-14: 400 14px/20px var(--font);
  --t-15: 400 15px/22px var(--font);
  --t-16: 400 16px/24px var(--font);
  --t-18: 600 18px/26px var(--font);
  --t-20: 600 20px/28px var(--font);
  --t-24: 600 24px/30px var(--font);
  --t-30: 500 30px/36px var(--font-cover);
  --t-38: 500 38px/44px var(--font-cover);
  --t-46: 500 46px/52px var(--font-cover);

  /* ширины */
  --w-720: 720px;  --w-1080: 1080px;  --w-1440: 1440px;
  --hit: 44px;     /* минимальная цель касания */

  /* длительности */
  --d-150: 150ms; --d-200: 200ms; --d-250: 250ms; --d-skeleton: 1400ms;
  --ease: cubic-bezier(.2, .7, .3, 1);
  --bar-rest: .7;  /* NEW прошлые столбики графика */
}

/* режимы поверхности */
[data-surface="cover"] {
  --title: var(--t-38);   /* NEW заголовок экрана: Unbounded только здесь */
  --plate: var(--glass);
  --plate-border: var(--glass-border);
  --plate-filter: blur(var(--blur-28)) saturate(180%);
  --bloom-opacity: 1;
}
[data-surface="work"] {
  --title: var(--t-24);
  --plate: var(--card);
  --plate-border: var(--line);
  --plate-filter: none;
  --bloom-opacity: 0;
}
[data-theme="light"][data-surface="cover"],
[data-theme="light"] [data-surface="cover"] {
  --plate: var(--card);     /* белые пластины без размытия */
  --plate-filter: none;     /* пятна остаются, их тона уже пастельные */
}

:focus-visible { outline: none; box-shadow: var(--ring-focus); }

@keyframes hb-skeleton { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ───────── Заход 2 · добавления ───────── */
[data-theme="dark"], :root {
  /* аватар: 6 тональных заливок, номер = хэш имени % 6 + 1 */
  --av-1: #3B2E66; --av-2: #1F4A5A; --av-3: #5A3B22; --av-4: #24503F; --av-5: #5A2A4E; --av-6: #3E3E58;
  --av-text: #FFFFFF;
  /* текст и тона на плотной пластине: тост, подсказка */
  --solid-text: #FFFFFF; --solid-text-2: #DCD5EC; --solid-fill: rgba(255,255,255,.12);
  --solid-ok: #9FF3FB; --solid-warn: #FFD08A; --solid-bad: #FFA5CC;
}
[data-theme="light"] {
  --av-1: #E6E0FA; --av-2: #D6ECF2; --av-3: #F5E4D2; --av-4: #D8EEE2; --av-5: #F5DDEC; --av-6: #E4E4EE;
  --av-text: #14102B;
  /* --solid-* не меняются: пластина тёмная в обеих темах */
}
:root {
  --toast-w: 480px;
  --modal-w: 520px; --modal-w-wide: 720px;
  --widget-panel-w: 440px; --widget-launcher: 48px;
  --menu-w: 232px; --rail-w: 72px; --settings-list-w: 240px;
  --bottom-bar-h: 64px;
  --mail-w: 560px;
  --toast-timer: 5000ms;
}
/* виджет на чужом сайте: --site — цвет сайта или var(--iris); --on-site — #FFFFFF или #14102B,
   выбирается по большему контрасту; оба значения задаёт скрипт встраивания */

/* ───────── Заход 3 · добавления ───────── */
:root {
  --tag-h: 24px;              /* метка «скоро» / «недоступно»: --muted-fill, --text-2, --r-6, --t-12 */
  --netbar-h: 40px;           /* полоса сети под шапкой */
  --sticky-bar-h: 72px;       /* липкая полоса лендинга на телефоне, + safe-area */
  --board-l: 48px 32px; --board-m: 28px 20px; --board-s: 14px 10px;  /* ячейка табло: ширина высота */
  --og-w: 1200px; --og-h: 630px; --og-pad: 72px;
  --help-w: 800px; --help-h: 1000px; --help-label: 600 32px/40px var(--font);
  --mark-radius: 28%;
  --range-cell: 40px;         /* день в поле периода; 44 на телефоне */
}

/* ───────── Продукт · добавления к киту v3.1 (релиз 6.24) ─────────
   Всё, что выше этой черты, — файл кита docs/ui-kit-v3-1/tokens.css без изменений
   (сторож: frontend/tests/tokens.test.ts). Ниже — только то, чего киту не хватило
   в коде; у каждой строки причина. Новых значений шкал здесь нет: размеры кеглей
   и тени повторяют ступени кита. Лендинг получает копию этого файла (npm run tokens). */
:root {
  /* Белый текст на --cta, --iris, --badge, --sel и цвете сайта: в ките он назван словом
     «белый» и одинаков в обеих темах, а --inverse-text в светлой теме тёмный. */
  --on-accent: #FFFFFF;
  /* Кегль без жирности и интерлиньяжа — те же ступени, что у --t-*. Для font-size там,
     где шорткат font сбросил бы жирность и межстрочный интервал элемента. */
  --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px;
  --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-30: 30px; --fs-38: 38px; --fs-46: 46px;
  /* Штриховка: нерабочее время в «Сетке», закрытый день, «не пришёл». Кит рисует табло
     без неё, но нерабочее время нельзя отличать от свободного только цветом. */
  --hatch: repeating-linear-gradient(135deg, var(--fill-10) 0 5px, transparent 5px 10px);
  /* Пятна обложки: заливка пятна из тонов --bloom-* кита. */
  --bloom-rose-bg: radial-gradient(circle, var(--bloom-rose) 0%, transparent 70%);
  --bloom-iris-bg: radial-gradient(circle, var(--bloom-iris) 0%, transparent 72%);
  --bloom-cyan-bg: radial-gradient(circle, var(--bloom-cyan) 0%, transparent 72%);
  --bloom-amber-bg: radial-gradient(circle, var(--bloom-amber) 0%, transparent 74%);
  /* Полоса 3 px слева: выбранная строка таблицы (лист 07, «inset 3px 0 0 var(--iris)») и тон
     карточки «требует решения» вместо розовой заливки (V-65). Кит задаёт её только для --iris. */
  --stripe-sel: inset 3px 0 0 var(--iris);
  --stripe-bad: inset 3px 0 0 var(--bad);
  --stripe-warn: inset 3px 0 0 var(--warn);
  --stripe-ok: inset 3px 0 0 var(--ok);
  /* Кольца, которые кит описывает словами: фокус строки таблицы «inset 0 0 0 2px --focus»
     (лист 04), включённое радио «кольцо 6 --iris», нейтральный знак светофора «кольцо --muted»
     (лист 08), обводка бейджа на панели «2 px --card» (лист 10). */
  --ring-focus-inset: inset 0 0 0 2px var(--focus);
  --ring-radio: inset 0 0 0 6px var(--iris);
  --ring-muted: inset 0 0 0 1.5px var(--muted);
  --ring-card: 0 0 0 2px var(--card);
  /* Линии часов в «Сетке» — один пиксель --hairline; шаг задаёт background-size по месту. */
  --rule-x: linear-gradient(to right, var(--hairline) 0 1px, transparent 1px);
  --rule-y: linear-gradient(to bottom, var(--hairline) 0 1px, transparent 1px);
  /* Подложка QR-кода: сканер читает код только тёмным по белому — в обеих темах. */
  --qr-bg: #FFFFFF;
  /* Заливка знака (лист 25): 140°, #DA0061 → #6B4BFF на 55 % → #0A7A85. Цвета те же, что
     у --cta-1..3, но угол и опорная точка свои — кит задаёт их числами, а не токеном.
     Нужна лендингу: знак в шапке и подвале рисуется CSS, без запроса картинки. */
  --mark-fill: linear-gradient(140deg, var(--cta-1), var(--cta-2) 55%, var(--cta-3));
}
/* Тень пластины зависит от режима: в «работе» — --sh-2 (лист 05), в «обложке» к ней
   добавляется световая кромка стекла. Кит задаёт обе части, но не их сумму. */
[data-surface="cover"] { --plate-shadow: var(--glass-edge), var(--sh-3); }
/* Сила пятен обложки. В тёмной теме пластины — стекло, и пятно под ним просвечивает:
   при полной силе --bloom-* фон стеклянной пластины над ирисовым пятном доходил до
   #6837AF, и --bad-ink на нём давал 4,18:1, --text-3 — 4,58:1 (замер лендинга на 390,
   Л-32). При половине силы тот же замер — 5,43 и 5,94:1. В светлой теме пластины
   белые и непрозрачные, пятна пастельные — сила полная. */
:root, [data-theme="dark"] { --bloom-strength: .5; }
[data-theme="light"] { --bloom-strength: 1; }
[data-surface="work"] { --plate-shadow: var(--sh-2); }