/* 3. Компоненты — сайт и холсты. Ссылаются только на семантику. */
:root{
  /* кнопка: светлая по умолчанию, акцентная — одна на экран */
  --btn-h:48px; --btn-pad:12px 24px; --btn-r:var(--r-s);
  --btn-bg:var(--ink); --btn-ink:var(--slate-1); --btn-bg-hover:var(--white);
  --btn-acc-bg:var(--acc); --btn-acc-ink:var(--on-acc);
  /* наведение — ступенью темнее: на indigo-10 белый текст даёт 4.28:1, ниже AA */
  --btn-acc-bg-hover:var(--indigo-8);
  --btn-disabled-bg:var(--slate-4); --btn-disabled-ink:var(--ink3);

  /* плитка: полупрозрачная панель, блюр, тонкая рамка, подсветка кромки */
  --tile-bg:color-mix(in srgb,var(--panel) 70%,transparent);
  --tile-blur:blur(64px);
  --tile-border:color-mix(in srgb,var(--ink) 10%,transparent);
  --tile-border-hover:var(--line2);
  --tile-highlight:inset 0 1px 0 color-mix(in srgb,var(--ink) 5%,transparent);
  --tile-r:var(--r);
  --tile-pad:32px;

  /* плашка на холсте (поверх фото или фона) — тот же материал, без блюра на экспорте */
  --plate-bg:color-mix(in srgb,var(--panel) 85%,transparent);
  --plate-border:var(--tile-border);
  --plate-r:var(--r);

  /* фирменные градиенты больших плиток */
  --glow-hero:radial-gradient(70% 90% at 100% 0%,var(--glow-1),transparent 70%),radial-gradient(70% 90% at 0% 100%,var(--glow-1),transparent 70%),var(--glow-base);
  --glow-promo:linear-gradient(135deg,var(--glow-base) 10%,var(--glow-2));

  /* поле ввода */
  --field-bg:var(--slate-1); --field-border:var(--line); --field-border-hover:var(--slate-7);
  --field-border-focus:var(--slate-8); --field-ring:color-mix(in srgb,var(--acc) 35%,transparent);
  --field-error:var(--danger);

  /* состояния — общие для всех интерактивных элементов */
  --focus-ring:var(--acc-text);    /* обводка фокуса с клавиатуры: 2px, отступ 2px */
  --press-scale:.98;               /* нажатие: чуть меньше, сразу, без отскока */
  --btn-bg-press:var(--slate-11);
  --btn-acc-bg-press:var(--indigo-7);
  --ghost-border:color-mix(in srgb,var(--ink) 20%,transparent);   /* видна и на тёмном, и на синем */
  --ghost-bg-hover:var(--slate-3); --ghost-bg-press:var(--slate-4);
  --chip-bg:var(--slate-3); --chip-bg-hover:var(--slate-4); --chip-bg-press:var(--slate-5);
  --chip-bg-on:var(--ink); --chip-ink-on:var(--slate-1); --chip-bg-on-hover:var(--slate-11);

  /* ---------- Характер стиля: ручки, которыми стили отличаются не только цветом ---------- */
  --bw:1px;                                  /* толщина обводки компонентов */
  --display-weight:500; --display-tracking:-0.02em;
  --acc-style:normal; --acc-font:inherit;    /* акцентное слово: цвет, курсив, другой шрифт */
  --acc-bg:transparent;                      /* или подложка под акцентным словом */
  --hero-bg:var(--noise),var(--glow-hero); --hero-border:1px solid var(--line2); --hero-r:var(--r);
  --hero-shadow:none; --hero-pixels:var(--pixels); --hero-ink:var(--ink);
  --btn-shadow:none; --btn-shadow-hover:var(--btn-shadow); --btn-shadow-press:var(--btn-shadow);
  --hover-shift:none; --press-shift:scale(var(--press-scale));
  --tile-highlight-hover:var(--tile-highlight); --tile-pad-block:var(--tile-pad);
  --chip-r:var(--r-s); --chip-border:transparent; --field-r:var(--r-s);

  /* ---------- Холсты (черновик значений, 22.10 — подтвердить у автора) ---------- */
  /* шкала кегля на холсте шириной 1080: заголовок · подзаголовок · текст · подпись */
  --c-display:96px;  --c-display-lh:100px;  --c-display-ls:-0.035em;
  --c-title:64px;    --c-title-lh:72px;     --c-title-ls:-0.025em;
  --c-body:36px;     --c-body-lh:48px;
  --c-caption:28px;  --c-caption-lh:36px;
  --c-pad:64px;      /* поле холста 1080 */

  /* шкала слайда 1920×1080 */
  --s-display:88px;  --s-display-lh:96px;
  --s-title:64px;    --s-title-lh:72px;
  --s-body:36px;     --s-body-lh:48px;
  --s-caption:24px;  --s-caption-lh:32px;
  --s-pad:96px;      /* поля слайда */
  --s-gutter:24px;   /* 12 колонок */
}