/* Дизайн-токены веб-приложения «Понятно».
 *
 * ЕДИНЫЙ ИСТОЧНИК ПРАВДЫ, зеркалящий дизайн-систему Android-приложения
 * (core/designsystem/theme: Color.kt / Type.kt / Shape.kt / Spacing.kt / Elevation.kt).
 * Значения совпадают с приложением и со статик-лендингом site/ — при изменении
 * дизайна правим и там, и тут (см. память проекта ponyatno-web-app).
 *
 * Светлая тема — база (:root). Тёмная — через [data-theme="dark"] и
 * @media (prefers-color-scheme: dark), значения из Color.kt (Dark).
 */

:root {
  /* --- Цвета (Color.kt, Light) --- */
  --accent: #2A6FDB;
  --accent-ink: #1F57B0;
  --accent-soft: #EAF1FD;
  --accent-soft-2: #F4F8FF;
  --bg: #FBFCFE;
  --surface: #FFFFFF;
  --ink: #15202B;
  --ink-2: #44515E;
  --ink-3: #6B7785;
  --line: #E6EAF0;
  --line-2: #EEF1F6;
  --ok: #1F8A5B;
  --ok-soft: #E8F5EE;
  --warn: #B6791F;
  --warn-soft: #FBF2E0;
  --alert: #C2453C;
  --alert-soft: #FBECEB;
  --scrim: rgba(16, 25, 34, 0.40);
  --on-accent: #FFFFFF;

  /* --- Радиусы (Shape.kt) --- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* --- Отступы (Spacing.kt), dp≈px --- */
  --sp-xxs: 2px;
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 20px;
  --sp-xxl: 24px;
  --sp-xxxl: 32px;
  --screen-h: 16px;   /* горизонтальный отступ экрана */
  --section: 22px;    /* зазор между секциями */

  /* --- Тени (Elevation.kt), синевато-чёрный тон #15202B --- */
  --shadow-sm: 0 2px 6px -2px rgba(21, 32, 43, 0.12);
  --shadow-md: 0 10px 24px -8px rgba(21, 32, 43, 0.18);
  --shadow-lg: 0 20px 48px -16px rgba(21, 32, 43, 0.28);

  /* --- Шрифты (Type.kt): Onest — заголовки, Golos Text — текст --- */
  --head: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Ширина большого экрана: боковая навигация + контент */
  --sidebar-w: 264px;
  --content-max: 1080px;
}

:root[data-theme="dark"] {
  --accent: #5B93EC;
  --accent-ink: #7DABF2;
  --accent-soft: #17263C;
  --accent-soft-2: #131D2B;
  --bg: #0F151B;
  --surface: #182029;
  --ink: #EEF2F6;
  --ink-2: #B3BEC9;
  --ink-3: #7F8B98;
  --line: #263038;
  --line-2: #1E262E;
  --ok: #35BC7B;
  --ok-soft: #11251C;
  --warn: #D9A441;
  --warn-soft: #2A2113;
  --alert: #E2685F;
  --alert-soft: #2A1614;
  --scrim: rgba(6, 10, 14, 0.60);
  --on-accent: #FFFFFF;
  --shadow-sm: 0 2px 6px -2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 10px 24px -8px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 20px 48px -16px rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #5B93EC;
    --accent-ink: #7DABF2;
    --accent-soft: #17263C;
    --accent-soft-2: #131D2B;
    --bg: #0F151B;
    --surface: #182029;
    --ink: #EEF2F6;
    --ink-2: #B3BEC9;
    --ink-3: #7F8B98;
    --line: #263038;
    --line-2: #1E262E;
    --ok: #35BC7B;
    --ok-soft: #11251C;
    --warn: #D9A441;
    --warn-soft: #2A2113;
    --alert: #E2685F;
    --alert-soft: #2A1614;
    --scrim: rgba(6, 10, 14, 0.60);
    --shadow-sm: 0 2px 6px -2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 10px 24px -8px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 20px 48px -16px rgba(0, 0, 0, 0.6);
  }
}