/* Токены дизайн-системы Budzirka — цвет и шрифты сборки R20 + R17 + R24 (31.10.2026, ниже), раскладка 2 на телефоне
   и компоновка компьютера Б1 (выбор агентства 25.10.2026, approvals.md A10 «второй круг»).
   Все числа — только здесь. Инварианты и запреты — в дизайн.md. Источник цвета и шрифтов — прототипы/стили-2.html (стиль 1),
   размеры и раскладка — прототипы/b1.html и прототипы/f2-b1.html. Прототипы этот файл не подключают. */
:root {
  /* Цвет — сборка R20 + R17 + R24 (31.10.2026, демо на ветке feat/design-sborka; референсы/сборка-r20-r17-r24.md):
     светлый нейтральный фон, почти чёрный текст и кнопки, один глубокий цвет — только заставка и подвал.
     Цветных плашек под текстом нет: цвет странице даёт облицовка фасада. Контраст (WCAG): ink/bg 16,5 · muted/bg 6,0 ·
     on-deep/deep 15,0 · on-panel/panel 17,1. */
  --c-bg: #efeeea;              /* фон страницы — светлый тёплый серый */
  --c-surface: #ffffff;         /* форма */
  --c-mist: #e4e2dd;            /* светлые подложки: поля формы, под формой */
  --c-panel-hover: #3d3b39;     /* кнопка под курсором */
  --c-on-panel-hover: #d6d3cd;  /* светлая кнопка под курсором */
  --c-panel: #161616;           /* почти чёрный: кнопки, ссылки, шапка внутренних страниц */
  --c-panel-deep: #000000;      /* текст светлой кнопки на тёмном */
  --c-deep: #2e0f14;            /* глубокий цвет: заставка главной и подвал — Burgundy iPhone 18 Pro, образец цвета apple.com (владелец 01.11; было #641c2c) */
  --c-on-deep: #f3ece6;         /* текст на глубоком цвете */
  --c-ink: #161616;             /* текст */
  --c-muted: #5c5a56;           /* вторичный текст на светлом */
  --c-line: #d6d3cd;            /* линии-разделители */
  --c-on-panel: #f5f4f1;        /* текст на тёмном; фон светлой кнопки на тёмном */
  --c-on-panel-muted: #cfccc6;  /* вторичный текст на тёмном и на фото */
  --c-on-ink-muted: #d7c9c3;    /* текст подвала на глубоком цвете */
  --c-scrim: rgba(10, 10, 10, 0.55);     /* затемнение низа фото под заголовком */
  --c-scrim-hdr: rgba(10, 10, 10, 0.7);   /* затемнение под прозрачной шапкой: приглушённые EN/EL/RU держат 4.5:1 на белом небе */
  --c-scrim-text: rgba(10, 10, 10, 0.62);  /* затемнение под текстом на фото: держит 3:1 и 4.5:1 на любом кадре, даже белом */
  --c-focus-light: #161616;     /* контур фокуса на светлом */
  --c-focus-dark: #ffffff;      /* контур фокуса на тёмном и на фото */
  --c-error: #b3261e;
  --c-success: #2e7d4f;

  /* Шрифты: простой гротеск (как Suisse Int'l у R20; он платный — бесплатная замена с греческим и кириллицей):
     Inter Tight — заголовки и подписи, Inter — текст и интерфейс. OFL, файлы в assets/fonts/. */
  --font-display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Inter", "Helvetica Neue", Arial, sans-serif;
  --fw-display: 500;
  --fw-caption: 400;            /* подписи к фото */
  --fw-text: 400;
  --fw-ui: 500;
  --tracking-display: -0.025em;
  --tracking-logo: 0.22em;
  --tracking-badge: 0.08em;
  --tracking-caps: 0.01em;      /* крупный текст капсом */

  /* Шкала размеров: телефон → компьютер */
  --fs-hero: clamp(40px, 4.4vw, 72px);        /* H1 главной на компьютере; 25.10: меньше, Piazzolla шире прежней антиквы */
  --fs-hero-phone: clamp(28px, 9vw, 34px);    /* H1 на панели первого экрана телефона */
  --fs-hero-material: clamp(34px, 4.6vw, 68px); /* H1 страницы материала */
  --fs-h2: clamp(32px, 3.8vw, 56px);
  --fs-h3: clamp(30px, 3vw, 44px);
  --fs-sub: clamp(19px, 1.6vw, 24px);         /* подзаголовки в описании материала */
  --fs-caption: clamp(15px, 1.2vw, 18px);     /* курсивные подписи к фото */
  --fs-lead: clamp(14.5px, 1.3vw, 19px);      /* подзаголовок первого экрана */
  --fs-body: clamp(16px, 1.15vw, 17px);
  --fs-ui: 15px;
  --fs-small: 14px;
  --lh-hero: 0.98;
  --fs-mark: clamp(56px, 19vw, 340px);       /* BUDZIRKA на всю ширину: заставка и подвал */
  --fs-say: clamp(30px, 5.4vw, 88px);         /* проявляющаяся фраза капсом */
  --lh-display: 1.02;
  --lh-text: 1.55;
  --lh-ui: 1;                   /* одна строка: логотип, кнопки */
  --lh-caption: 1.2;            /* курсивные подписи и ссылки «к материалу» */
  --lh-label: 1.3;              /* служебная подпись группы («Five facade materials») */
  --measure: 65ch;
  --measure-lead: 34ch;

  /* Отступы */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-14: 56px;
  --sp-18: 72px;
  --sp-22: 88px;
  --gutter: max(16px, 4vw);
  /* Самое длинное слово сайта — греческое Πυροσυσσωματωμένη: 9,65 em строчными и 11,6 em капсом. Кегль, при котором оно
     целиком входит в ширину колонки телефона, с запасом; применяется только в EL (base.css) */
  --fit-word: calc((100vw - 2 * var(--gutter)) / 9.8);
  --fit-word-caps: calc((100vw - 2 * var(--gutter)) / 11.7);
  --section-y: clamp(56px, 7vw, 88px);
  --header-h: 52px;

  /* Формы, линии, тени, движение */
  --radius-pill: 99px;
  --radius-field: 10px;
  --line-w: 1px;
  --focus-w: 2px;
  --focus-offset: 3px;
  --shadow-facade: 0 30px 60px -30px rgba(10, 20, 50, 0.55);
  --control-min: 44px;          /* минимальная высота любой кнопки, таблетки, поля */
  --button-h: clamp(48px, 3.6vw, 52px);

  /* Заставка (фасад растёт из буквы Z до полного экрана) и рост фото */
  --intro-scroll: 100svh;          /* длина прокрутки, за которую окно раскрывается */
  --mhero-h: 82svh;               /* первый экран страницы материала на телефоне: виден край следующего блока */
  --mhero-h-wide: 100svh;         /* то же на компьютере */
  --grow-from: 14%;                /* фото объекта входит с такими полями по бокам и растёт до полной ширины */

  /* Фасад */
  --facade-ratio-phone: 7 / 5;     /* закреплённая полоса на телефоне: высота только от ширины */
  --scrim-ramp: 160px;              /* над текстом на фото затемнение сходит на нет за это расстояние */
  --facade-h-landscape: 45svh;     /* та же полоса на телефоне поперёк: иначе закрывает весь экран */
  --facade-ratio-desktop: 4 / 3;
  --facade-swap: 320px;            /* длина смены облицовки при прокрутке, px */

  /* Сетка и фото */
  --home-columns: minmax(0, 1fr) minmax(0, 1.3fr);  /* главная на компьютере: текст и блоки | фасад */
  --ratio-photo: 3 / 2;            /* фото в блоках материалов */

  /* Брейкпоинт (дизайн.md — «Брейкпоинты»): телефон — width < 900px, компьютер — width >= 900px */
  --bp-desktop: 900px;
}
@media (width >= 900px) { :root { --header-h: 68px; } }  /* 44 px элементы + поля 12 px; шапка закреплена, под неё считаются отступы */