/* ============================================================================
   Fibra – слой дизайн-токенов.

   Шкала кегля и метрики раскладки сняты с рабочего Threads (см. DESIGN.md).
   Цвет, глубина и радиусы – свои: сдержанный монохром с одним акцентом,
   глубина по роли элемента, а не одна тень под всем подряд.
   ========================================================================= */

:root {
  /* --- типографика ---------------------------------------------------- */
  /* Системный шрифт платформы: у него уже настроены оптические размеры и
     таблицы кернинга, веб-шрифт тут ничего не улучшит.                    */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
    "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Пары «кегль / межстрочный». Межстрочные снятые, не выведены формулой. */
  --t-caption: 12px/16px var(--font-sans);
  --t-meta: 14px/18px var(--font-sans);
  --t-body: 15px/21px var(--font-sans);
  --t-body-lg: 16px/20px var(--font-sans);
  --t-title: 18px/24px var(--font-sans);
  --t-heading: 24px/27px var(--font-sans);
  --t-display: 32px/36px var(--font-sans);
  --t-hero: 40px/42px var(--font-sans);

  /* Трекинг зависит от кегля: крупный текст поджимаем, мелкий чуть
     разводим. Одно значение на все размеры всегда где-то неверно.        */
  --ls-hero: -0.022em;
  --ls-display: -0.019em;
  --ls-heading: -0.014em;
  --ls-title: -0.008em;
  --ls-body: 0;
  --ls-caption: 0.006em;

  /* --- сетка отступов -------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 16px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 48px;
  --sp-9: 64px;

  /* --- метрики раскладки ----------------------------------------------- */
  --content-width: 572px;
  --page-max: 1180px;
  --header-desktop: 64px;
  --page-padding-x: 24px;
  --bp-md: 700px;
  --bp-lg: 768px;

  /* --- форма: радиус зависит от роли ----------------------------------- */
  /* Одинаковый радиус на карточке, кнопке и аватаре – признак шаблона.
     Крупная поверхность держит больший радиус, мелкий контрол – меньший.  */
  --r-card: 16px;
  --r-panel: 14px;
  --r-control: 10px;
  --r-chip: 8px;
  --r-pill: 999px;
  --hairline: 1px;

  /* --- глубина: тоже по роли ------------------------------------------- */
  /* Карточка приподнята над холстом, панель фильтров – нет, она часть
     фона. Шапка глубины не имеет вовсе, её отделяет размытие.            */
  --shadow-card:
    0 1px 2px rgba(15, 17, 19, 0.05),
    0 1px 1px rgba(15, 17, 19, 0.03);
  --shadow-card-hover:
    0 6px 16px rgba(15, 17, 19, 0.09),
    0 2px 4px rgba(15, 17, 19, 0.05);
  --shadow-pop:
    0 12px 32px rgba(15, 17, 19, 0.14),
    0 3px 8px rgba(15, 17, 19, 0.07);

  /* --- движение --------------------------------------------------------- */
  /* Отклик мгновенный, переходы короткие. Пружинить нечему: перетаскивания
     на странице нет, а овершут на наведении читается как суета.          */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-press: 90ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;

  /* --- цвет: светлая тема ---------------------------------------------- */
  --canvas: #F4F4F2;
  --surface: #FFFFFF;
  --surface-sunken: #EDEDEA;
  --ink: #17191C;
  --muted: #6B7076;
  --faint: #868C93;
  --accent: #0A6CFF;
  --accent-hover: #0059DB;
  --accent-ink: #FFFFFF;
  --accent-wash: rgba(10, 108, 255, 0.09);
  --line: #E3E3E0;
  --line-strong: #D2D2CE;

  --hovered: rgba(15, 17, 19, 0.04);
  --pressed: rgba(15, 17, 19, 0.07);

  --positive: #1B7F4B;
  --danger: #C0392B;

  /* Полупрозрачная шапка: контент уезжает под неё, а не упирается. */
  --chrome: rgba(244, 244, 242, 0.72);
  --chrome-line: rgba(15, 17, 19, 0.07);

  --focus: 0 0 0 3px rgba(10, 108, 255, 0.34);
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #0F1113;
    --surface: #181B1E;
    --surface-sunken: #131619;
    --ink: #ECEEF0;
    --muted: #9BA1A8;
    --faint: #7C848C;
    --accent: #4D93FF;
    --accent-hover: #6BA6FF;
    --accent-ink: #0A1220;
    --accent-wash: rgba(77, 147, 255, 0.15);
    --line: #262A2E;
    --line-strong: #333940;

    --hovered: rgba(255, 255, 255, 0.05);
    --pressed: rgba(255, 255, 255, 0.09);

    --positive: #43C07B;
    --danger: #F0776A;

    /* В тёмной теме тень почти не читается – глубину держит подсветка
       верхней кромки, как свет, легший на поверхность.                   */
    --shadow-card:
      0 1px 2px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --shadow-card-hover:
      0 8px 22px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --shadow-pop:
      0 16px 40px rgba(0, 0, 0, 0.6),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);

    --chrome: rgba(15, 17, 19, 0.72);
    --chrome-line: rgba(255, 255, 255, 0.08);

    --focus: 0 0 0 3px rgba(77, 147, 255, 0.4);
  }
}

/* Меньше прозрачности – делаем поверхности плотными, размытие убираем. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --chrome: var(--canvas);
  }
}