/* Токены дизайн-системы ExadelAI.

   Источник — 00_ExadelAI_Stylebook_2025-2026.md. Здесь только те значения,
   что в нём зафиксированы: база, три акцентные пары «светлый/тёмный», тёплый
   чёрный для тёмного режима и DM Sans как единственная основная гарнитура.

   Правило контраста из §3.3 обязательно: белый текст на тёмных версиях
   зелёного, розового и синего; чёрный — на светлых. Оно соблюдено в каждом
   месте, где акцент используется как фон.

   Диаграмма держит собственное пространство --ce-* в diagram-core.css: оно
   перенесено из эталона и построено на этих же цветах стайлбука. */

:root {
  /* Тёмная тема — выбор по умолчанию для всех, независимо от системы.
     Светлая включается только явным переключателем в шапке, и выбор
     переживает перезагрузку. Ни одно значение ниже не задаётся внутри
     media-запроса: обе версии живут в light-dark(), и переключается ровно
     одно свойство — color-scheme. */
  color-scheme: dark;

  /* --- база --- */
  --ink:        light-dark(#2B2B2B, #F2F0ED);   /* основной текст            */
  --ink-strong: light-dark(#000000, #FFFFFF);   /* заголовки                 */
  --muted:      light-dark(#666666, #A8A5A0);   /* второстепенный текст      */
  --bg:         light-dark(#F6F4F1, #21201F);   /* фон страницы: cream / warm black */
  --panel:      light-dark(#FDFCFB, #2A2928);   /* карточки и панели         */
  --panel-2:    light-dark(#F3F3F3, #333130);   /* второй уровень            */
  --line:       light-dark(#EFEFEF, #3D3B38);   /* тонкие линии и разделители */

  /* --- акценты стайлбука: светлая / тёмная версия пары --- */
  --lime:        #C2F942;   /* Signature Lime — фирменный акцент */
  --lime-tint:   #F0FDD0;   /* Pale Green — заливка выносок      */
  --green-dark:  #73A301;
  --pink:        #FF9EC7;
  --pink-dark:   #F0639E;
  --blue:        #BDD0FF;
  --blue-dark:   #6A91F1;

  /* Акцент интерфейса. В светлом режиме — тёмная версия пары, чтобы текст на
     фоне страницы оставался читаемым; в тёмном — Signature Lime. */
  --accent:      light-dark(#73A301, #C2F942);
  --accent-soft: light-dark(#F0FDD0, #2E3A16);
  --accent-on:   light-dark(#2B2B2B, #2B2B2B);  /* текст поверх акцента */

  --font: "DM Sans", "Noto Sans", Arial, ui-sans-serif, system-ui, sans-serif;
}

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

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
}

*, *::before, *::after { box-sizing: border-box; }

:where(a, button, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.coc-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}