/* Токены оформления. Направление — «архив и чернила»:
   тёплая бумажная нейтраль и один чернильный акцент.

   Слои, в порядке возрастания силы:
     1. :root                                светлый набор
     2. @media (prefers-color-scheme: dark)  тёмный набор
     3. :root[data-theme="light" | "dark"]   явный выбор: внутри Telegram его
                                             ставит клиент, в браузере — выбор
                                             сотрудника (сервер отдаёт его в
                                             разметке сразу, до входа действует
                                             системная тема и локальный выбор)
     4. html[data-env="telegram"]            поверх выбранного набора
                                             переопределяются шесть якорей

   Наборы 1–3 самодостаточны и задают только «якорные» значения `*-own`.
   Всё остальное выведено из них через color-mix, поэтому когда Telegram
   подменяет якоря своими цветами, за ними следуют границы, поверхности и
   мягкие заливки. Это и есть страховка от нечитаемого экрана: ни один
   производный токен не может остаться от чужой темы. */

:root {
  color-scheme: light;

  --bg-own: oklch(0.972 0.005 75);
  --bg-raised-own: oklch(0.995 0.003 75);
  --fg-own: oklch(0.245 0.012 75);
  --fg-muted-own: oklch(0.495 0.010 75);
  --fg-on-accent: oklch(0.99 0.003 250);

  --accent-own: oklch(0.470 0.090 250);
  --accent-hover: oklch(0.395 0.095 250);

  --ok: oklch(0.470 0.100 150);
  --warn: oklch(0.520 0.110 75);
  --danger-own: oklch(0.500 0.160 27);

  --hatch-line: oklch(0.520 0.110 75 / 0.28);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg-own: oklch(0.178 0.008 75);
    --bg-raised-own: oklch(0.228 0.008 75);
    --fg-own: oklch(0.940 0.006 75);
    --fg-muted-own: oklch(0.760 0.008 75);
    --fg-on-accent: oklch(0.170 0.020 250);

    --accent-own: oklch(0.760 0.090 250);
    --accent-hover: oklch(0.840 0.075 250);

    --ok: oklch(0.775 0.105 150);
    --warn: oklch(0.815 0.105 75);
    --danger-own: oklch(0.725 0.150 27);

    --hatch-line: oklch(0.815 0.105 75 / 0.30);
  }
}

/* Явный выбор темы. Значения обязаны совпадать с блоками выше. */
:root[data-theme="light"] {
  color-scheme: light;

  --bg-own: oklch(0.972 0.005 75);
  --bg-raised-own: oklch(0.995 0.003 75);
  --fg-own: oklch(0.245 0.012 75);
  --fg-muted-own: oklch(0.495 0.010 75);
  --fg-on-accent: oklch(0.99 0.003 250);

  --accent-own: oklch(0.470 0.090 250);
  --accent-hover: oklch(0.395 0.095 250);

  --ok: oklch(0.470 0.100 150);
  --warn: oklch(0.520 0.110 75);
  --danger-own: oklch(0.500 0.160 27);

  --hatch-line: oklch(0.520 0.110 75 / 0.28);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-own: oklch(0.178 0.008 75);
  --bg-raised-own: oklch(0.228 0.008 75);
  --fg-own: oklch(0.940 0.006 75);
  --fg-muted-own: oklch(0.760 0.008 75);
  --fg-on-accent: oklch(0.170 0.020 250);

  --accent-own: oklch(0.760 0.090 250);
  --accent-hover: oklch(0.840 0.075 250);

  --ok: oklch(0.775 0.105 150);
  --warn: oklch(0.815 0.105 75);
  --danger-own: oklch(0.725 0.150 27);

  --hatch-line: oklch(0.815 0.105 75 / 0.30);
}

/* Шесть якорей. В браузере берутся собственные значения, в Telegram —
   значения клиента с фолбэком на собственные. */
:root {
  --bg: var(--bg-own);
  --bg-raised: var(--bg-raised-own);
  --fg: var(--fg-own);
  --fg-muted: var(--fg-muted-own);
  --accent: var(--accent-own);
  --danger: var(--danger-own);
}

html[data-env="telegram"] {
  --bg: var(--tg-theme-secondary-bg-color, var(--bg-own));
  --bg-raised: var(--tg-theme-bg-color, var(--bg-raised-own));
  --fg: var(--tg-theme-text-color, var(--fg-own));
  --fg-muted: var(--tg-theme-hint-color, var(--fg-muted-own));
  --accent: var(--tg-theme-link-color, var(--accent-own));
  --danger: var(--tg-theme-destructive-text-color, var(--danger-own));
}

/* Производные значения. Следуют за якорями в любой теме. */
:root {
  --bg-sunken: color-mix(in oklab, var(--bg), var(--fg) 5%);
  --bg-hover: color-mix(in oklab, var(--bg-raised), var(--fg) 6%);
  --bg-active: color-mix(in oklab, var(--bg-raised), var(--fg) 11%);

  --border: color-mix(in oklab, var(--bg-raised), var(--fg) 15%);
  --border-strong: color-mix(in oklab, var(--bg-raised), var(--fg) 46%);

  --accent-soft: color-mix(in oklab, var(--accent), var(--bg-raised) 88%);
  --accent-line: color-mix(in oklab, var(--accent), var(--bg-raised) 55%);

  --ok-soft: color-mix(in oklab, var(--ok), var(--bg-raised) 88%);
  --warn-soft: color-mix(in oklab, var(--warn), var(--bg-raised) 88%);
  --danger-soft: color-mix(in oklab, var(--danger), var(--bg-raised) 88%);
  --danger-line: color-mix(in oklab, var(--danger), var(--bg-raised) 45%);

  /* Штриховка Демо-рынка. Единственная текстура во всём интерфейсе:
     оттенок не переживает тёмную тему, дальтонизм и пережатое видео,
     а диагональ переживает. */
  --hatch: repeating-linear-gradient(
    -45deg,
    transparent 0 5px,
    var(--hatch-line) 5px 6px
  );

  /* Отступы: восьмипиксельная сетка, плотность рабочего инструмента. */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;

  /* Типографика: один Inter с системным фолбэком, шаг шкалы 1.2.
     Внешние шрифты не подключаются: в WebView они могут не догрузиться. */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", system-ui, sans-serif;
  --ts-xs: 0.75rem;
  --ts-sm: 0.8125rem;
  --ts-base: 0.9375rem;
  --ts-md: 1.0625rem;
  --ts-lg: 1.3125rem;
  --ts-xl: 1.625rem;

  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  --dur: 180ms;
  --dur-slow: 240ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --page-max: 1180px;
  --row-h: 2.375rem;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}