/* FAVEO — токены сайта faveo.bio. Значения совпадают с DESIGN.md буквально (v0.2.0, 04.09.2026).
   В коде «сырые» hex и px вне этой шкалы запрещены (проверка Design/tools/ai_slop_check.py). */
:root {
  /* цвета — роли из DESIGN.md */
  --c-surface:    #FBF8F2;   /* стена и столешница */
  --c-ash:        #E4CCA8;   /* массив ясеня: полосы, подложки, таблицы */
  --c-line:       #D9C7A6;   /* границы 1 px, оси */
  --c-ink:        #1C1814;   /* текст */
  --c-muted:      #6E5A45;   /* вторичный текст; на ясене не использовать */
  --c-accent:     #10C090;   /* ТОЛЬКО заливка: одна кнопка, бейдж состояния */
  --c-accent-hover: #0EAE82;
  --c-accent-ink: #086349;   /* ссылки, слова-состояния текстом */
  --c-warn:       #D6A243;   /* только зоны данных */
  --c-danger:     #E5484D;   /* только зоны данных */
  --c-screen:     #0C0C0C;   /* экран прибора */
  --c-screen-ink: #ECEDEE;
  --c-screen-muted: #8B9299;

  /* шрифты — woff2 в web/site/fonts/, font-display: swap */
  --f-display: "Commissioner", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Commissioner", "Helvetica Neue", Arial, sans-serif;
  --f-data:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* шкала кегля */
  --t-1: 13px; --t-2: 15px; --t-3: 17px; --t-4: 21px; --t-5: 28px; --t-6: 40px; --t-7: 56px;
  --lh-body: 1.5; --lh-display: 1.08;
  --measure-lead: 38ch; --measure: 62ch;

  /* три уровня ритма */
  --s-inner: 8px;
  --s-between: 24px;
  --s-section: 64px;

  /* сетка */
  --grid-max: 1200px; --grid-gap: 24px; --grid-pad: 24px;

  /* формы */
  --r-control: 6px;
  --r-media: 0;
  --r-screen: 8px;

  /* натуральная величина: 129,5 мм → 489 px при 96 dpi; 1:2 ниже 900 px */
  --device-width: 245px;

  /* движение — одна сцена при загрузке */
  --m-duration: 240ms;
  --m-easing: ease-out;
}
@media (min-width: 900px) {
  :root { --s-section: 96px; --grid-pad: 56px; --device-width: 489px; }
}
@media (min-width: 1200px) {
  :root { --t-6: 56px; }
}

html { -webkit-text-size-adjust: 100%; hyphens: auto; }
body { margin: 0; background: var(--c-surface); color: var(--c-ink);
       font: 400 var(--t-3)/var(--lh-body) var(--f-body); }
img, video { max-width: 100%; height: auto; }
h1, h2 { font-family: var(--f-display); font-weight: 700; line-height: var(--lh-display); text-wrap: balance; margin: 0; }
h1 { font-size: var(--t-6); }
h2 { font-size: var(--t-5); }
p { max-width: var(--measure); text-wrap: pretty; }
a { color: var(--c-accent-ink); text-underline-offset: 3px; }
table, .data { font-family: var(--f-data); font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }
.btn { display: inline-block; height: 48px; line-height: 48px; padding: 0 22px; border-radius: var(--r-control);
       background: var(--c-accent); color: var(--c-ink); font-weight: 500; font-size: 16px; text-decoration: none; }
.btn:hover { background: var(--c-accent-hover); }
.screen { background: var(--c-screen); color: var(--c-screen-ink); border-radius: var(--r-screen); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }