/* Токены оформления. Значения перенесены из утверждённого прототипа
   (docs/prototypes/mgbot-learn-ui.dc.html) без изменений.

   Палитра синяя и намеренно отличается от books.mgbot.ru, принятой в хабе и
   IoT Platform: так утверждён макет. Если понадобится свести сервисы к одной
   палитре, правится только этот файл — разметка и остальные стили на конкретные
   цвета не завязаны. */

:root {
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #eef1f6;
  --text: #111419;
  --muted: #69717f;
  --accent: #2f6feb;
  --accent-weak: #e7eefd;
  --border: #e2e6ed;
  --panel: #111419;
  --on-panel: #ffffff;
  --ok: #17935b;
  --ok-weak: #e3f5ec;
  --warn: #b8791b;
  --warn-weak: #fcf1dd;
  --err: #c8443c;
  --err-weak: #fbe9e8;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --shadow: 0 1px 2px rgba(16, 22, 34, .05), 0 8px 24px rgba(16, 22, 34, .06);
}

:root[data-theme="dark"] {
  --bg: #0d1015;
  --surface: #151920;
  --surface-2: #1c212a;
  --text: #e7eaef;
  --muted: #98a1b0;
  --accent: #5e8dff;
  --accent-weak: #1a2439;
  --border: #252b36;
  --panel: #e7eaef;
  --on-panel: #0d1015;
  --ok: #3ec48a;
  --ok-weak: #12291f;
  --warn: #e0a84a;
  --warn-weak: #2a2113;
  --err: #f0756b;
  --err-weak: #2d1817;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none }
a:hover { color: var(--text); text-decoration: underline }
button { font: inherit; color: inherit }

@keyframes spin { to { transform: rotate(360deg) } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(47, 111, 235, .35) }
  70% { box-shadow: 0 0 0 10px rgba(47, 111, 235, 0) }
  100% { box-shadow: 0 0 0 0 rgba(47, 111, 235, 0) }
}