/* Токены — единственное место, где задаются цвета, шрифты, размеры, отступы, тени и движение.
   Остальные стили берут значения только отсюда: var(--…). Новый цвет или размер — сначала сюда.
   Шкала проверяется сама (npm test → tools/scale.js). */

@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 800; font-display: optional;
  src: url(../fonts/onest-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 800; font-display: optional;
  src: url(../fonts/onest-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* «Ночь и лайм» — тёмная тема из макета (design/). Контраст текста ≥ 4.5:1 */
  --bg: #07090C;            /* страница вокруг окна */
  --surface: #0B0F14;       /* окно */
  --surface-side: #0F141A;  /* боковая панель */
  --surface-2: #151B23;     /* поле, кнопки-призраки, заметка */
  --surface-3: #1C2530;     /* выбранная строка */
  --surface-hover: #151C24;
  --pill: #121820;
  --line: rgba(255, 255, 255, .08);
  --line-soft: rgba(255, 255, 255, .05);
  --ink: #E8ECF1;
  --ink-strong: #F4F7FA;
  --ink-soft: #AEB7C4;
  --ink-mid: #8F99A7;
  --ink-faint: #8A94A3;
  --ink-ghost: #6B7584;
  --accent: #C6F432;        /* лайм */
  --accent-ink: #0B0F14;
  --accent-soft: rgba(198, 244, 50, .1);
  --accent-line: rgba(198, 244, 50, .6);
  --accent-dim: #2A3320;    /* кнопка «Позвонить», когда звонить некому */
  --accent-dim-ink: #A3B86A;
  --accent-deep: #B3E021;
  --ok: #3DDC84;
  --ok-ring: rgba(61, 220, 132, .18);
  --danger: #FF8A7F;
  --danger-bg: #C4302A;
  --danger-soft: #3A1A1A;
  --dot-red: #FF5F57; --dot-yellow: #FEBC2E; --dot-green: #28C840;
  --kbd-bg: rgba(255, 255, 255, .08);
  --kbd-on-accent: rgba(11, 15, 20, .14);
  --scrim: rgba(5, 7, 10, .6);

  /* Аватарки: фон / буква */
  --av-orange: #3A2618; --av-orange-ink: #FFB27A;
  --av-pink: #3A1C28;   --av-pink-ink: #FF8FB1;
  --av-blue: #1A2740;   --av-blue-ink: #7DB2FF;
  --av-teal: #14322F;   --av-teal-ink: #5ED6C4;
  --av-purple: #2A2140; --av-purple-ink: #B79CFF;
  --av-olive: #2E3016;  --av-olive-ink: #D9DC6A;

  /* Шрифты: как в макете — системный шрифт Mac, на остальных — Onest */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Onest', 'Segoe UI', Roboto, sans-serif;
  --font-head: var(--font);

  /* Размеры шрифта — 8 штук на весь сайт */
  --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px; --fs-24: 24px; --fs-28: 28px; --fs-40: 40px;
  --fs-18: 16px; --fs-20: 24px;
  --fs-h3: 16px; --fs-h2: 24px; --fs-h1: 24px;
  --lh: 1.5; --lh-head: 1.2;
  --num-track: .04em;       /* цифры номера чуть разрежены, как в макете */

  /* Отступы — шкала 4px */
  --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-12: 48px; --sp-16: 64px;
  --section: clamp(32px, 4vw, 48px);
  --gutter: clamp(12px, 2.4vw, 32px);
  --maxw: 1440px;                        /* окно приложения из макета — 1440 */
  --maxw-text: 68ch;
  --maxw-form: 560px;
  --maxw-dial: 720px;                    /* само поле ввода — не шире 720 (правило «не растягивать») */
  --maxw-card: 600px;                    /* карточка контакта и панель звонка */
  --side-w: 216px;
  --list-w: 392px;
  --win-h: 900px;

  /* Форма: 4 скругления + круг/таблетка */
  --r-xs: 4px; --r-sm: 6px; --r: 8px; --r-lg: 12px; --r-pill: 999px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, .35), 0 24px 64px rgba(0, 0, 0, .55);
  --tap: 44px;

  /* Движение: мягко, только transform и opacity */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: 400ms;
  --dur-fast: 200ms;
}