/* ============================================================================
   Дизайн-токены новой веб-админки TarsAuto.

   Палитра — брендовые красный/чёрный/белый (красный #D32020 из files/logo.png,
   тот же, что RED в src/branding.py) + тёплые нейтрали со сдвигом оттенка к
   красному. Акцент тратится в одном месте: активный пункт меню, primary-кнопка,
   focus-ring, ключевые цифры. Семантика (ok/warn/danger) — отдельный слой,
   danger глубже брендового и всегда идёт с иконкой + подтверждением.

   Три состояния темы (см. artifact-design / CLAUDE.md): bare :root — светлая;
   @media (prefers-color-scheme: dark) под :root:not([data-theme="light"]) —
   тёмная по системе, но явный выбор «светлая» её перебивает;
   :root[data-theme="dark"] — явный выбор «тёмная» перебивает системную светлую.
   ============================================================================ */

:root {
  color-scheme: light;

  --brand:        #D32020;
  --brand-press:  #AE1818;
  --brand-wash:   #FBEAEA;
  --brand-ring:   rgba(211, 32, 32, .32);

  --ink:          #17130F;

  --bg:           #F6F4F1;
  --surface:      #FFFFFF;
  --surface-2:    #FBFAF8;
  --line:         #E6E1DB;
  --line-strong:  #D6CFC6;
  --text:         #1E1A16;
  --muted:        #726A61;
  --faint:        #9A9089;

  --ok:     #2E7D53;  --ok-wash:     #E7F2EC;
  --warn:   #B27A1B;  --warn-wash:   #F7EEDD;
  --danger: #C0392B;  --danger-wash: #F8E9E7;

  --sidebar-bg:          var(--ink);
  --sidebar-text:        #B9AFA4;
  --sidebar-hover:       rgba(255, 255, 255, .06);
  --sidebar-active:      rgba(211, 32, 32, .18);
  --sidebar-active-text: #FFFFFF;
  --sidebar-line:        rgba(255, 255, 255, .09);

  --fs-xs: .75rem;
  --fs-sm: .8125rem;
  --fs-base: .9375rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(23, 19, 15, .06), 0 1px 3px rgba(23, 19, 15, .05);
  --sh-2: 0 2px 4px rgba(23, 19, 15, .05), 0 8px 24px rgba(23, 19, 15, .08);
  --sh-pop: 0 12px 40px rgba(23, 19, 15, .16);

  --font: "Golos Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --topbar-h: 60px;
  --sidebar-w: 244px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --brand:        #E8443B;
    --brand-press:  #C93027;
    --brand-wash:   #2A1614;
    --brand-ring:   rgba(232, 68, 59, .38);

    --ink:          #0E0C0B;

    --bg:           #121010;
    --surface:      #1B1917;
    --surface-2:    #211E1B;
    --line:         #322D28;
    --line-strong:  #423B34;
    --text:         #ECE7E1;
    --muted:        #9A9089;
    --faint:        #746B63;

    --ok:     #52B583;  --ok-wash:     #16281F;
    --warn:   #D69B3F;  --warn-wash:   #2A2115;
    --danger: #E36457;  --danger-wash: #2C1815;

    --sidebar-bg:          #0C0A09;
    --sidebar-text:        #948A80;
    --sidebar-hover:       rgba(255, 255, 255, .05);
    --sidebar-active:      rgba(232, 68, 59, .20);
    --sidebar-active-text: #FFFFFF;
    --sidebar-line:        rgba(255, 255, 255, .07);

    --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
    --sh-2: 0 2px 6px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .5);
    --sh-pop: 0 16px 48px rgba(0, 0, 0, .6);
  }
}

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

  --brand:        #E8443B;
  --brand-press:  #C93027;
  --brand-wash:   #2A1614;
  --brand-ring:   rgba(232, 68, 59, .38);

  --ink:          #0E0C0B;

  --bg:           #121010;
  --surface:      #1B1917;
  --surface-2:    #211E1B;
  --line:         #322D28;
  --line-strong:  #423B34;
  --text:         #ECE7E1;
  --muted:        #9A9089;
  --faint:        #746B63;

  --ok:     #52B583;  --ok-wash:     #16281F;
  --warn:   #D69B3F;  --warn-wash:   #2A2115;
  --danger: #E36457;  --danger-wash: #2C1815;

  --sidebar-bg:          #0C0A09;
  --sidebar-text:        #948A80;
  --sidebar-hover:       rgba(255, 255, 255, .05);
  --sidebar-active:      rgba(232, 68, 59, .20);
  --sidebar-active-text: #FFFFFF;
  --sidebar-line:        rgba(255, 255, 255, .07);

  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 2px 6px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .5);
  --sh-pop: 0 16px 48px rgba(0, 0, 0, .6);
}