/* Сгенерировано web/scripts/jinja-tokens.mjs из web/app/globals.css — руками не править (npm run tokens:jinja).
   Токены и темы дизайн-системы CRM (owear/rsmt → knowledge/specs/crm-design-system.md) для страниц Jinja:
   тема — атрибут data-theme на <html> из cookie crm_theme, как у Next. */
@font-face {
  font-family: "Onest Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/static/fonts/onest-cyrillic-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Onest Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/static/fonts/onest-latin-wght-normal.woff2) format("woff2-variations");
  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;
}

/* ───────── темы ───────── */
/* По умолчанию — «как в системе»: color-scheme: light dark, light-dark() выбирает цвет сам.
   Явный выбор пользователя — cookie crm_theme → атрибут data-theme на <html> (ставит сервер,
   поэтому вспышки нет). Тот же атрибут может ставить Jinja (base.html) — ADR crm-frontend. */
:root {
  color-scheme: light dark;
}
:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}

/* Участок страницы в заданной теме (превью на /system): токены пересчитываются на элементе,
   т.к. браузеры вычисляют light-dark() внутри custom properties там, где они объявлены. */
[data-scheme="light"] { color-scheme: light; }
[data-scheme="dark"] { color-scheme: dark; }

/* ───────── токены: цвет (OKLCH, оттенок нейтралей — 85°, «бетон») ───────── */
:root,
[data-scheme] {
  /* Поверхности */
  --canvas: light-dark(oklch(0.992 0.002 85), oklch(0.19 0.006 85));
  --sidebar: light-dark(oklch(0.962 0.006 85), oklch(0.165 0.006 85));
  --surface: light-dark(oklch(1 0 0), oklch(0.225 0.007 85));
  --subtle: light-dark(oklch(0.968 0.005 85), oklch(0.235 0.007 85));
  --selected: light-dark(oklch(0.938 0.01 85), oklch(0.275 0.009 85));
  --border: light-dark(oklch(0.905 0.007 85), oklch(0.29 0.008 85));
  --border-strong: light-dark(oklch(0.83 0.009 85), oklch(0.375 0.01 85));
  /* Рамка поля ввода: ≥ 3:1 к фону (WCAG 1.4.11) — поле должно читаться как поле */
  --border-input: light-dark(oklch(0.66 0.01 85), oklch(0.52 0.01 85));

  /* Текст */
  --fg: light-dark(oklch(0.205 0.008 85), oklch(0.93 0.011 88));
  --fg-2: light-dark(oklch(0.4 0.011 85), oklch(0.8 0.011 88));
  --fg-3: light-dark(oklch(0.52 0.011 85), oklch(0.67 0.011 88));
  --fg-disabled: light-dark(oklch(0.7 0.008 85), oklch(0.47 0.008 85));

  /* Главное действие — «чернила» (как .btn-primary на сайте), не красный */
  --primary: light-dark(oklch(0.205 0.008 85), oklch(0.93 0.011 88));
  --primary-hover: light-dark(oklch(0.33 0.01 85), oklch(0.85 0.012 88));
  --on-primary: light-dark(oklch(0.985 0.004 85), oklch(0.19 0.006 85));
  --ring: light-dark(oklch(0.205 0.008 85), oklch(0.93 0.011 88));

  /* Сигнальный красный бренда: знак, непрочитанное, активный пункт. Не для кнопок. */
  --signal: light-dark(oklch(0.6 0.205 33), oklch(0.69 0.19 35));

  /* Статусы: fg — текст и значок, bg — подложка, border — рамка, solid — сплошная заливка */
  --success-fg: light-dark(oklch(0.47 0.12 150), oklch(0.8 0.13 150));
  --success-bg: light-dark(oklch(0.965 0.025 150), oklch(0.255 0.035 150));
  --success-border: light-dark(oklch(0.87 0.06 150), oklch(0.38 0.07 150));
  --success-solid: light-dark(oklch(0.52 0.13 150), oklch(0.62 0.14 150));
  --on-success-solid: light-dark(oklch(1 0 0), oklch(0.17 0.02 150));

  --warning-fg: light-dark(oklch(0.5 0.12 65), oklch(0.84 0.12 80));
  --warning-bg: light-dark(oklch(0.97 0.035 80), oklch(0.27 0.04 75));
  --warning-border: light-dark(oklch(0.86 0.08 80), oklch(0.42 0.07 75));
  --warning-solid: light-dark(oklch(0.78 0.15 75), oklch(0.8 0.14 78));
  --on-warning-solid: oklch(0.205 0.008 85);

  --danger-fg: light-dark(oklch(0.52 0.19 30), oklch(0.77 0.15 30));
  --danger-bg: light-dark(oklch(0.965 0.02 30), oklch(0.26 0.05 30));
  --danger-border: light-dark(oklch(0.86 0.07 30), oklch(0.42 0.1 30));
  --danger-solid: oklch(0.53 0.19 32);
  --on-danger-solid: oklch(1 0 0);

  --info-fg: light-dark(oklch(0.47 0.09 245), oklch(0.8 0.08 245));
  --info-bg: light-dark(oklch(0.965 0.015 245), oklch(0.26 0.03 245));
  --info-border: light-dark(oklch(0.86 0.04 245), oklch(0.4 0.05 245));
  --info-solid: light-dark(oklch(0.5 0.1 245), oklch(0.66 0.09 245));

  /* Категории: роли контрагента и вид письма. Всегда с подписью, цвет — подсказка, не смысл. */
  --buyer-fg: light-dark(oklch(0.45 0.08 190), oklch(0.82 0.08 190));
  --buyer-bg: light-dark(oklch(0.962 0.02 190), oklch(0.26 0.03 190));
  --buyer-dot: light-dark(oklch(0.6 0.11 190), oklch(0.72 0.11 190));
  --supplier-fg: light-dark(oklch(0.46 0.12 290), oklch(0.83 0.09 290));
  --supplier-bg: light-dark(oklch(0.962 0.022 290), oklch(0.27 0.04 290));
  --supplier-dot: light-dark(oklch(0.58 0.15 290), oklch(0.72 0.13 290));
  --personal-fg: light-dark(oklch(0.48 0.13 350), oklch(0.83 0.09 350));
  --personal-bg: light-dark(oklch(0.965 0.02 350), oklch(0.27 0.04 350));
  --personal-dot: light-dark(oklch(0.6 0.16 350), oklch(0.74 0.13 350));

  /* Плашки окружения */
  --stage-bg: light-dark(oklch(0.955 0.045 85), oklch(0.27 0.045 80));
  --stage-fg: light-dark(oklch(0.38 0.07 70), oklch(0.88 0.09 85));
  --stage-stripe: light-dark(oklch(0.92 0.06 85), oklch(0.3 0.05 80));

  /* Тени: в светлой — мягкая глубина, в тёмной — рамка + светлее поверхность */
  --shadow-color: light-dark(oklch(0.2 0.01 85 / 0.1), oklch(0 0 0 / 0.5));
  --shadow-sm: 0 1px 2px var(--shadow-color);
  --shadow-md: 0 0 0 1px var(--border), 0 4px 10px -2px var(--shadow-color), 0 12px 28px -8px var(--shadow-color);
  --shadow-lg: 0 0 0 1px var(--border), 0 8px 18px -4px var(--shadow-color), 0 28px 56px -12px var(--shadow-color);

  /* Метрики */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 56px;
  --topbar-h: 52px;
  --row-h: 40px;
  --row-px: 12px;

  /* Движение */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 240ms;

  /* Слои */
  --z-sticky: 10;
  --z-banner: 20;
  --z-sidebar: 30;
  --z-dropdown: 40;
  --z-overlay: 50;
  --z-modal: 60;
  --z-toast: 70;
  --z-tooltip: 80;

  accent-color: var(--fg);
  scrollbar-color: var(--border-strong) transparent;
}

:root[data-density="compact"] {
  --row-h: 32px;
  --row-px: 10px;
}