/* design-base/semantic.css — семантические роли цвета. НЕ МЕНЯЕТСЯ.
   Компоненты используют ТОЛЬКО эти роли, никогда не хексы напрямую.
   Значения ступеней приходят из brand.css (--neutral-*, --accent). */

:root {
  --bg: var(--neutral-50);            /* фон страницы */
  --fg: var(--neutral-900);           /* основной текст */
  --surface: var(--neutral-0);        /* карточки, панели */
  --muted: var(--neutral-100);        /* приглушённый фон */
  --muted-foreground: var(--neutral-500); /* вторичный текст (3-й уровень иерархии) */
  --border: var(--neutral-200);       /* границы, разделители */
  --ring: var(--accent);              /* фокус */

  --accent-foreground: var(--accent-fg);

  /* Смысловые (одинаковы во всех проектах — смысл не брендируется). */
  --danger: #c0362c;
  --danger-foreground: #ffffff;
  --success: #2e7d32;
  --warning: #b26a00;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--neutral-900);
    --fg: var(--neutral-50);
    --surface: var(--neutral-800);
    --muted: var(--neutral-800);
    --muted-foreground: var(--neutral-400);
    --border: var(--neutral-700);
  }
}

/* Применение ролей к странице. */
body { background: var(--bg); color: var(--fg); }
:where(a) { color: var(--accent); }
:where(*):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }