/* ==========================================================================
   Гав VPN — общая дизайн-система. Один файл на все три варианта.
   Меняется здесь — меняется везде. Вариант правит композицию, не токены.
   ========================================================================== */

/* --- Шрифты. Свои, со своего адреса. Ни одного внешнего источника. ------- */


/* --- Дисплейные гарнитуры на выбор. Точные шрифты первого референса
   (тяжёлый нейтральный гротеск вроде Archivo Black) кириллицы не имеют —
   здесь их ближайшие родственники с полным русским набором. Браузер
   качает только ту, которая реально применена. ------------------------ */


/* --- Узкие тяжёлые гротески: именно такой набор в первом референсе.
   Замер строки «В ИНТЕРНЕТ» при одном кегле: Onest 286, Roboto Cond 233,
   Oswald 221, Fira Extra Condensed 204 пикселей. Узкому шрифту нужен
   кегль крупнее, иначе заголовок звучит тише — компенсация ниже. ------ */

@font-face {
  font-family: 'FiraXC';
  src: url('../fonts/firaxc-900-cyrillic.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'FiraXC';
  src: url('../fonts/firaxc-900-latin.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2212,U+2215;
}
@font-face {
  font-family: 'RobotoCond';
  src: url('../fonts/robotocond-900-cyrillic.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'RobotoCond';
  src: url('../fonts/robotocond-900-latin.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2212,U+2215;
}

/* --- Выбор владельца: Serati и Sagewold от GGBotNet, лицензия SIL OFL 1.1,
   свободны для коммерческого использования. Файлы взяты у автора
   (ggbot.itch.io), не с зеркал, и нарезаны под кириллицу и латиницу.
   Тексты лицензий — assets/fonts/licenses/. Замер «В ИНТЕРНЕТ» при
   одном кегле: Sagewold 144, Fira Extra Condensed 204, Serati 251 px.
   ВАЖНО про Serati: у него строчные нарисованы как заглавные, обычный
   текст им не набрать — только заголовки, а они у нас и так капсом. -- */

@font-face {
  font-family: 'Serati';
  src: url('../fonts/serati-400-cyrillic.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Serati';
  src: url('../fonts/serati-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2212,U+2215;
}
@font-face {
  font-family: 'Sagewold';
  src: url('../fonts/sagewold-400-cyrillic.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Sagewold';
  src: url('../fonts/sagewold-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2212,U+2215;
}
@font-face {
  font-family: 'SagewoldI';
  src: url('../fonts/sagewold-400i-cyrillic.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'SagewoldI';
  src: url('../fonts/sagewold-400i-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2212,U+2215;
}

/* --- Переменные гарнитуры: у них ось толщины, а у трёх и ось ширины —
   ручки в панели двигают сам шрифт, а не подделывают его наклоном или
   растяжением. Диапазоны здесь совпадают с тем, что объявляет сам файл;
   панель берёт их из своей таблицы и не даёт выйти за границы. ------- */

@font-face {
  font-family: 'RobotoFlex';
  src: url('../fonts/robotoflex-var-cyrillic.woff2') format('woff2');
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-style: normal; font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'RobotoFlex';
  src: url('../fonts/robotoflex-var-latin.woff2') format('woff2');
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2212,U+2215;
}
@font-face {
  font-family: 'NotoDisp';
  src: url('../fonts/notodisp-var-cyrillic.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-style: normal; font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'NotoDisp';
  src: url('../fonts/notodisp-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2212,U+2215;
}
@font-face {
  font-family: 'OnestV';
  src: url('../fonts/onest-var-cyrillic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal; font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'OnestV';
  src: url('../fonts/onest-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2212,U+2215;
}
@font-face {
  font-family: 'InterV';
  src: url('../fonts/inter-var-cyrillic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal; font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'InterV';
  src: url('../fonts/inter-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2212,U+2215;
}
@font-face {
  font-family: 'GolosV';
  src: url('../fonts/golos-var-cyrillic.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal; font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'GolosV';
  src: url('../fonts/golos-var-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2212,U+2215;
}
@font-face {
  font-family: 'MontserratV';
  src: url('../fonts/montserrat-var-cyrillic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal; font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'MontserratV';
  src: url('../fonts/montserrat-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2212,U+2215;
}
@font-face {
  font-family: 'OswaldV';
  src: url('../fonts/oswald-var-cyrillic.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal; font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'OswaldV';
  src: url('../fonts/oswald-var-latin.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2212,U+2215;
}
@font-face {
  font-family: 'UnboundedV';
  src: url('../fonts/unbounded-var-cyrillic.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal; font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'UnboundedV';
  src: url('../fonts/unbounded-var-latin.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2212,U+2215;
}
@font-face {
  font-family: 'MartianV';
  src: url('../fonts/martian-var-cyrillic.woff2') format('woff2');
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-style: normal; font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'MartianV';
  src: url('../fonts/martian-var-latin.woff2') format('woff2');
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2212,U+2215;
}

:root {
  /* --- Палитра. Акценты сняты пипеткой с самого Гавчика. ---------------- */
  /* Куртка полупрозрачная: пиксель кадра — не цвет материала. Замер даёт
     #C0C848…#DFE743 (тон совпадает, насыщенность ниже из-за студийного
     фона сквозь ткань). Берём чистое значение из mascot/CHARACTER.md. */
  --lime: #d1fe17;          /* куртка — основной акцент, фирменный        */
  --lime-hi: #eaf20a;       /* светящаяся кромка куртки, только для бликов  */
  --lime-deep: color-mix(in oklab, var(--lime) 68%, #000);  /* нажатое, рамки */
  --pink: #f97fd0;          /* молния куртки — второй акцент, замер         */
  --pink-soft: #fdacd8;     /* её светлый оттенок: подсветка, ховер         */
  --iris: #6ee7e0;          /* линза очков — редкий третий сигнал           */

  --paper: #f2f4ea;         /* белый с зеленцой, а не стерильный #fff       */
  /* Доли подобраны замером контраста на всех пяти фонах, включая «Смоль»
     (чистый чёрный — худший случай): dim ≈ 9.7:1, mute ≈ 4.85:1. Опускать
     mute ниже 60 % нельзя — на нём сидят метки, сноски и полоса подвала. */
  --paper-dim: color-mix(in oklab, var(--paper) 78%, var(--ink));
  --paper-mute: color-mix(in oklab, var(--paper) 60%, var(--ink));
  --line: color-mix(in oklab, var(--paper) 16%, transparent);
  --line-strong: color-mix(in oklab, var(--paper) 30%, transparent);
  --veil: color-mix(in oklab, var(--ink) 78%, transparent);
  --raise: color-mix(in oklab, var(--paper) 5%, var(--ink));   /* поднятая плоскость */
  --sink: color-mix(in oklab, #000 42%, var(--ink));           /* утопленная         */

  /* --- Тёмный фон. Меняется твиком: html[data-bg] ниже. ----------------- */
  --ink: #08090a;

  /* --- Типографика ------------------------------------------------------ */
  /* Два слота: заголовки и текст. У каждого своя гарнитура, толщина, ширина
     и межстрочный — всё меняется твиками. Числовые значения панель пишет
     прямо в style элемента html, поэтому здесь только значения по умолчанию.
     Заголовки по умолчанию — Serati (выбор владельца, SIL OFL). */
  --f-display: 'Serati', system-ui, sans-serif;
  --w-head: 400;
  --wd-head: 100%;
  --lh-head: 0.88;

  --f-text: 'GolosV', system-ui, sans-serif;
  --w-text: 400;
  --wd-text: 100%;
  --lh-text: 1.55;

  /* Моноширинный — исходный замысел для кнопок, ссылок и мелких меток:
     он держит статусы и показания как измерительный прибор. Переключается
     твиком «Кнопки и метки»: --f-ui ниже. */
  --f-mono: 'MartianV', ui-monospace, 'DejaVu Sans Mono', monospace;
  --f-ui: var(--f-text);

  /* Потолки посчитаны по реальным метрикам Unbounded 800: строка
     «В ИНТЕРНЕТ» занимает 7.77 em, «РАБОТАЕТ НА ТОМ,» — 11.97 em. Кириллица
     у этого шрифта широкая, и прежние 16.5vw вылезали за край на 360 px. */
  /* --tsc — множитель твика «Крупность текста». Единица по умолчанию. */
  --tsc: 1;
  --t-mega: calc(clamp(2.9rem, 13.4vw, 7rem) * var(--tsc));   /* слово-плита */
  --t-d1:   calc(clamp(1.85rem, 7.4vw, 3.6rem) * var(--tsc)); /* заголовок секции */
  --t-d2:   calc(clamp(1.4rem, 5.8vw, 2.3rem) * var(--tsc));  /* крупный факт */
  --t-h:    calc(clamp(1.15rem, 4.6vw, 1.5rem) * var(--tsc)); /* заголовок карточки */
  --t-body: calc(clamp(1rem, 4vw, 1.0625rem) * var(--tsc));
  --t-sm:   calc(0.9375rem * var(--tsc));
  --t-label: 0.6875rem;                       /* моноширинная метка          */
  --t-num:  clamp(2.6rem, 12vw, 5rem);        /* цифры табло                 */

  /* Межстрочные заголовков — производные от ручки слота: у секционного
     заголовка строк больше, ему нужно чуть просторнее, чем плите. */
  --lh-mega: var(--lh-head);
  --lh-d: calc(var(--lh-head) + 0.14);
  --lh-body: var(--lh-text);
  --tr-mega: -0.035em;
  --tr-label: 0.16em;

  /* --- Ритм. Шаг 4px, дальше по музыке. -------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --s10: clamp(96px, 16vw, 160px);   /* воздух между секциями */
  --s11: clamp(64px, 11vw, 112px);   /* воздух внутри секции  */

  /* --- Сетка ------------------------------------------------------------ */
  --gutter: clamp(18px, 5.4vw, 44px);
  --maxw: 1280px;
  --measure: 62ch;

  /* --- Форма. Мир жёсткий: скругления почти нет. ------------------------ */
  --r0: 0;
  --r1: 2px;
  --r2: 8px;
  --pill: 999px;
  --bw: 1px;
  --bw-strong: 2px;

  /* --- Движение --------------------------------------------------------- */
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --e-snap: cubic-bezier(0.7, 0, 0.2, 1);
  --d1: 160ms; --d2: 320ms; --d3: 640ms; --d4: 1100ms;

  /* --- Глубина. Смещение + мягкое размытие, без цветных ореолов. -------- */
  --sh-1: 0 2px 8px rgb(0 0 0 / 0.45);
  --sh-2: 0 12px 32px -8px rgb(0 0 0 / 0.6);
  --sh-3: 0 28px 70px -20px rgb(0 0 0 / 0.75);
  --glow: 0 0 0 1px color-mix(in oklab, var(--lime) 40%, transparent),
          0 10px 40px -12px color-mix(in oklab, var(--lime) 45%, transparent);

  --z-sticky: 40;
  --z-panel: 90;
  --z-switch: 100;
}


/* --- Основной акцент. Все оттенки сняты с куртки Гавчика, кроме двух
       намеренно уведённых в стороны — чтобы было с чем сравнивать. ------- */
html[data-accent='brand']  { --lime: #d1fe17; }   /* фирменный, подтверждён замером */
html[data-accent='glow']   { --lime: #eaf20a; }   /* светящаяся кромка куртки       */
html[data-accent='citrus'] { --lime: #f2ff00; }   /* в жёлтую сторону               */
html[data-accent='acid']   { --lime: #a6ff2e; }   /* в зелёную сторону              */
html[data-accent='fabric'] { --lime: #c0c848; }   /* как ткань читается на тёмном   */

/* --- Второй акцент. «Молния» — замер, «светлее» — предположение владельца,
       «линза» подменяет розовый бирюзой очков: другой характер целиком. --- */
html[data-pink='zip']  { --pink: #f97fd0; }
html[data-pink='soft'] { --pink: #fdacd8; }
html[data-pink='hot']  { --pink: #ff4fc0; }
html[data-pink='iris'] { --pink: #6ee7e0; }

/* --- Крупность текста. Трогает только кегли, ритм и сетка не едут. ------ */
html[data-scale='small'] { --tsc: 0.9; }
html[data-scale='norm']  { --tsc: 1; }
html[data-scale='big']   { --tsc: 1.14; }

/* --- Углы. Мир задуман жёстким, но проверить стоит оба края. ------------ */
html[data-round='sharp'] { --r1: 0; --r2: 0; --pill: 3px; }
html[data-round='edge']  { --r1: 2px; --r2: 8px; --pill: 999px; }
html[data-round='soft']  { --r1: 8px; --r2: 20px; --pill: 999px; }

/* --- Скорость движения. Кривые те же, меняются только длительности. ----- */
html[data-speed='slow'] { --d1: 260ms; --d2: 520ms; --d3: 1000ms; --d4: 1600ms; }
html[data-speed='norm'] { --d1: 160ms; --d2: 320ms; --d3: 640ms;  --d4: 1100ms; }
html[data-speed='fast'] { --d1: 90ms;  --d2: 180ms; --d3: 330ms;  --d4: 560ms; }

/* --- Гавчик. Выключается, чтобы стало видно, сколько на странице держится
       на персонаже, а сколько на самой вёрстке. -------------------------- */
html[data-dog='off'] .mascot { display: none; }

/* --- Кнопки, ссылки, навигация и мелкие метки: чей шрифт носить ---------- */
html[data-ui='text'] { --f-ui: var(--f-text); }
html[data-ui='head'] { --f-ui: var(--f-display); }
html[data-ui='mono'] { --f-ui: var(--f-mono); }

/* --- Пять тёмных фонов. Твик пишет html[data-bg]. ------------------------ */
html[data-face='onest']      { --f-display: 'OnestV', system-ui, sans-serif; }
html[data-face='inter']      { --f-display: 'InterV', system-ui, sans-serif; }
html[data-face='unbounded']  { --f-display: 'UnboundedV', system-ui, sans-serif; }
html[data-face='golos']      { --f-display: 'GolosV', system-ui, sans-serif; }
html[data-face='montserrat'] { --f-display: 'MontserratV', system-ui, sans-serif; }
html[data-face='firaxc']     { --f-display: 'FiraXC', system-ui, sans-serif; }
html[data-face='robotocond'] { --f-display: 'RobotoCond', system-ui, sans-serif; }
html[data-face='oswald']     { --f-display: 'OswaldV', system-ui, sans-serif; }
html[data-face='serati']     { --f-display: 'Serati', system-ui, sans-serif; }
html[data-face='sagewold']   { --f-display: 'Sagewold', system-ui, sans-serif; }
html[data-face='sagewoldi']  { --f-display: 'SagewoldI', system-ui, sans-serif; }
html[data-face='flex']       { --f-display: 'RobotoFlex', system-ui, sans-serif; }
html[data-face='notodisp']   { --f-display: 'NotoDisp', system-ui, sans-serif; }
html[data-face='martian']    { --f-display: 'MartianV', ui-monospace, monospace; }

/* --- Слот текста --------------------------------------------------------
   Здесь ОБЯЗАН быть свой ряд для каждой гарнитуры реестра FONTS в shell.js:
   панель строит кнопки обоих слотов из одного списка, и гарнитура без правила
   даёт молчаливый отказ — кнопка нажимается, атрибут ставится, а шрифт
   остаётся прежним. Так 10.08.2026 «не работал» Sagewold в слоте текста. */
html[data-text='golos']      { --f-text: 'GolosV', system-ui, sans-serif; }
html[data-text='onest']      { --f-text: 'OnestV', system-ui, sans-serif; }
html[data-text='inter']      { --f-text: 'InterV', system-ui, sans-serif; }
html[data-text='montserrat'] { --f-text: 'MontserratV', system-ui, sans-serif; }
html[data-text='flex']       { --f-text: 'RobotoFlex', system-ui, sans-serif; }
html[data-text='notodisp']   { --f-text: 'NotoDisp', system-ui, sans-serif; }
html[data-text='martian']    { --f-text: 'MartianV', ui-monospace, monospace; }
html[data-text='serati']     { --f-text: 'Serati', system-ui, sans-serif; }
html[data-text='sagewold']   { --f-text: 'Sagewold', system-ui, sans-serif; }
html[data-text='sagewoldi']  { --f-text: 'SagewoldI', system-ui, sans-serif; }
html[data-text='firaxc']     { --f-text: 'FiraXC', system-ui, sans-serif; }
html[data-text='robotocond'] { --f-text: 'RobotoCond', system-ui, sans-serif; }
html[data-text='oswald']     { --f-text: 'OswaldV', system-ui, sans-serif; }
html[data-text='unbounded']  { --f-text: 'UnboundedV', system-ui, sans-serif; }

/* Serati шире прочих узких — кегль ему меньше. Sagewold, наоборот, самый
   узкий из всех: ему можно и нужно крупнее, иначе заголовок теряется. */
html[data-face='serati'] {
  --t-mega: calc(clamp(2.8rem, 13.2vw, 7rem) * var(--tsc));
  --t-d1:   calc(clamp(1.8rem, 7.2vw, 3.5rem) * var(--tsc));
  --t-d2:   calc(clamp(1.4rem, 5.8vw, 2.3rem) * var(--tsc));
}
html[data-face='sagewold'], html[data-face='sagewoldi'] {
  --t-mega: calc(clamp(4.2rem, 21vw, 11rem) * var(--tsc));
  --t-d1:   calc(clamp(2.6rem, 11vw, 5.4rem) * var(--tsc));
  --t-d2:   calc(clamp(1.9rem, 8.4vw, 3.3rem) * var(--tsc));
  --lh-mega: 0.92;
}

/* Узкие гарнитуры набираются крупнее: при кегле, подобранном под Onest, они
   выглядят мельче и теряют голос. Пределы проверены приёмкой на 320-1440. */
html[data-face='firaxc'], html[data-face='robotocond'], html[data-face='oswald'] {
  --t-mega: calc(clamp(3.4rem, 16.6vw, 8.6rem) * var(--tsc));
  --t-d1:   calc(clamp(2.1rem, 8.8vw, 4.3rem) * var(--tsc));
  --t-d2:   calc(clamp(1.6rem, 6.8vw, 2.7rem) * var(--tsc));
}

/* Unbounded шире прочих — при нём кегли поджимаются, иначе заголовок за краем. */
html[data-face='unbounded'] {
  --t-mega: calc(clamp(2.5rem, 11vw, 6rem) * var(--tsc));
  --t-d1: calc(clamp(1.7rem, 6.3vw, 3.2rem) * var(--tsc));
}

html[data-bg='void']   { --ink: #08090a; }   /* Уголь — по умолчанию   */
html[data-bg='moss']   { --ink: #0a1008; }   /* Мох — зелёная подложка */
html[data-bg='night']  { --ink: #080b14; }   /* Ночь — синяя подложка  */
html[data-bg='carbon'] { --ink: #141412; }   /* Графит — тёплый серый  */
html[data-bg='pitch']  { --ink: #000000; }   /* Смоль — OLED-чёрный    */

/* Фон-подложка страницы: ровное поле плюс два очень слабых пятна света,
   чтобы чернота не читалась как выключенный экран. */
html { background: var(--ink); color-scheme: dark; }