/* Вайтлейбл дизайн-токены. Никаких брендов.
   Общие для всех экранов: шрифты, нейтральная палитра, статусы, роли.
   Настроение каждого экрана задаётся в самом экране. */

:root {
  /* Шрифты — системные, без внешних загрузок (работает офлайн) */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* Нейтральная шкала */
  --n-0:  #ffffff;
  --n-25: #fbfcfd;
  --n-50: #f4f6f8;
  --n-100:#e9edf1;
  --n-200:#d8dee5;
  --n-300:#b9c2cc;
  --n-400:#8a97a4;
  --n-500:#5f6b78;
  --n-600:#465059;
  --n-700:#333b43;
  --n-800:#20262c;
  --n-900:#12161a;
  --n-950:#0b0e11;

  /* Акцент (спокойный медицинский сине-зелёный) */
  --accent:       #2c8c86;
  --accent-600:   #24756f;
  --accent-050:   #e7f2f1;

  /* Статусы */
  --ok:    #2f9e50;
  --ok-bg: #e7f5ec;
  --warn:  #c9821a;
  --warn-bg:#fbf0dc;
  --alert: #cf3a3a;
  --alert-bg:#fbe6e6;
  --info:  #2f6bd6;

  /* Цвета ролей (используются во всех экранах для реплик/диаризации) */
  --role-surgeon: #3b6fb0;
  --role-anesth:  #7a5bb0;
  --role-nurse:   #2c8c86;
  --role-ai:      #55606b;

  /* Радиусы / тени */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(16,24,32,.06), 0 1px 1px rgba(16,24,32,.04);
  --shadow-md: 0 6px 20px rgba(16,24,32,.10);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; }

/* Общие мелочи, которые могут пригодиться экранам */
.role-dot { display:inline-block; width:8px; height:8px; border-radius:50%; }
.badge {
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; padding:3px 8px; border-radius:999px;
  line-height:1;
}
.badge-ok    { color:var(--ok);    background:var(--ok-bg); }
.badge-warn  { color:var(--warn);  background:var(--warn-bg); }
.badge-alert { color:var(--alert); background:var(--alert-bg); }
.badge-muted { color:var(--n-500); background:var(--n-100); }