/* Токены альбома чертежей. Три слоя, каждый опирается только на предыдущий:
   1. базовые — сырые значения: палитра, шкала кеглей, шаги отступов. В правилах компонентов не используются;
   2. смысловые — роли в мире альбома: стол, лист, тушь, графит, синяя; кегли по ступеням DESIGN.md;
      крупные кегли и поля листа — жидкие между 375 и 1440;
   3. токены компонентов — в начале файла компонента, на его селекторе (--btn-*, --stamp-*…);
      страница меняет компонент токеном, а не переписывает правило.
   Источник значений — _dev/DESIGN.md. Новый цвет или кегль — сначала туда, потом сюда.

   Точки перелома (в @media переменные не работают — числа пишутся буквально):
     1180 (max-width: 1179px) — разворот складывается в колонку;
     1024 (max-width: 1023px) — разделы шапки уходят в меню «Разделы»;
      720 (max-width: 719px)  — узкий лист;
      480, 360               — только шапка (знак вместо логотипа, короткая кнопка);
     высота 820 (max-height: 820px) — только для разворота шире 1180.
   Остальное — container queries по ширине своей колонки. */

/* ---------- 1. Базовые ---------- */

:root {
  /* холодная серая: от туши до листа */
  --gray-900: #1d2229;
  --gray-700: #4b535d;
  --gray-400: #a3abb5;
  --gray-300: #cdd3da;
  --gray-200: #dde3ea;
  --gray-150: #e3e7ec;
  --gray-100: #eef1f5;
  --gray-50:  #eff3f7;
  --gray-10:  #fbfcfd;
  --white:    #fff;

  /* синяя — одна, с оттенками для граней и подложек */
  --blue-800: #1a3188;
  --blue-700: #2340a8;
  --blue-300: #b7c6f0;
  --blue-200: #ccd7f6;
  --blue-100: #e2e8fb;

  --red-700: #b0361f;

  /* шкала кеглей, px */
  --size-13: 13px;
  --size-14: 14px;
  --size-15: 15px;
  --size-16: 16px;
  --size-17: 17px;
  --size-18: 18px;
  --size-20: 20px;
  --size-22: 22px;

  /* шаги отступов */
  --step-1: 6px;
  --step-2: 10px;
  --step-3: 18px;
  --step-4: 28px;
  --step-5: 44px;
}

/* ---------- 2. Смысловые ---------- */

:root {
  /* материалы */
  --desk: var(--gray-150);        /* стол под листами */
  --paper: var(--gray-10);        /* лист */
  --tracing: var(--gray-50);      /* калька — только целым листом или графой */
  --side-l: var(--gray-100);      /* грани изделия на чертеже */
  --side-r: var(--gray-200);

  /* тушь и линии */
  --ink: var(--gray-900);         /* текст, рамки, основные линии */
  --graphite: var(--gray-700);    /* вторичный текст, подписи */
  --thin: var(--gray-400);        /* тонкие линии, подчёркивания */
  --hair: var(--gray-300);        /* сетка таблиц, разделители */

  /* синяя — главное действие и подсветка связей */
  --blue: var(--blue-700);
  --blue-ink: var(--blue-800);    /* наведение, текст на светло-синем */
  --blue-tint: var(--blue-100);   /* подсветка строки, выбранный сегмент */
  --blue-side-l: var(--blue-200);
  --blue-side-r: var(--blue-300);
  --on-blue: var(--white);

  --red: var(--red-700);          /* только ошибки форм */

  /* шрифты */
  --sans: 'Fira Sans Condensed', 'Arial Narrow', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* кегли: крупные — жидкие (значение при 1440 — верхняя граница), до 18px — постоянные */
  --fs-display:  clamp(34px, 4.6vw, 68px);
  --fs-final:    clamp(36px, calc(20px + 3.06vw), 64px);
  --fs-headline: clamp(30px, calc(22px + 1.7vw), 46px);
  --fs-chapter:  clamp(24px, calc(17px + 1.2vw), 34px);
  --fs-title:    clamp(20px, calc(18.6px + .25vw), 22px);
  --fs-article:  clamp(18px, calc(17.3px + .2vw), 20px);
  --fs-figure:     var(--size-20);  /* цифры JetBrains Mono */
  --fs-body:       var(--size-18);
  --fs-annotation: var(--size-17);  /* подписи на чертеже, кнопки */
  --fs-small:      var(--size-16);
  --fs-label:      var(--size-15);
  --fs-caption:    var(--size-14);
  --fs-micro:      var(--size-13);  /* счётчик символов поля */

  /* линии */
  --frame: 2px;                   /* рамка листа, внешняя граница таблиц и штампов */
  --rule: 1px;                    /* внутренние линии */

  /* отступы */
  --space-xs: var(--step-1);
  --space-sm: var(--step-2);
  --space-md: var(--step-3);
  --space-lg: var(--step-4);
  --space-xl: var(--step-5);

  /* лист на столе: поля сужаются плавно, но не исчезают */
  --sheet-max: 1392px;
  --sheet-gap: var(--space-lg);            /* между листами */
  --bind: clamp(12px, 3.3vw, 44px);        /* поле подшивки слева */
  --edge: clamp(6px, 1vw, 10px);           /* поле стола вокруг листа на узком экране */
  --pad: clamp(16px, 3vw, 40px);           /* внутренние поля рамки */

  /* скругления — только у элементов MD3 в формах */
  --r-check: 2px;
  --r-field: 4px;
  --r-segment: 20px;

  /* глубина: тень — свойство бумаги */
  --shadow-sheet: 0 1px 2px rgb(24 34 48 / .08), 0 18px 40px -22px rgb(24 34 48 / .35);
  --shadow-banner: 0 2px 4px rgb(24 34 48 / .1), 0 18px 40px -12px rgb(24 34 48 / .35);

  /* движение */
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* липкая шапка: на сколько прокрутка к якорю не доходит до верха */
  --scroll-offset: 84px;

  color-scheme: light;
  scrollbar-color: var(--thin) var(--desk);
  interpolate-size: allow-keywords;
}

@media (max-width: 1023px) {
  :root { --scroll-offset: 72px; }
}