/* ============================================================
   base.css — сброс, шрифты, палитра, единица масштаба
   Правило проекта: НИ ОДНОГО размера в px напрямую.
   Все размеры = calc(var(--u) * N), где --u ставит js/scale.js.
   При окне 1080×640 --u равен 1, дальше пропорционально.
   ============================================================ */

/* --- Шрифт. Два файла под одним именем семейства.
       Файлов пока нет в assets/fonts — браузер молча уйдёт
       на системный фолбэк, вёрстка не пострадает. --- */
@font-face {
  font-family: 'AppSans';
  src: url('../assets/fonts/sans-latin.woff2') format('woff2');
  unicode-range: U+0000-04FF, U+2000-206F, U+20A0-20BF, U+2190-21FF, U+2600-26FF;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'AppSans';
  src: url('../assets/fonts/sans-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* единица масштаба, перезаписывается из JS */
  --u: 1;

  /* палитра */
  /* Палитра из брендбука Live Informatics:
     Deep Blue RGB 20,50,90 · Noble Gold RGB 190,160,90.
     Остальное — производные оттенки той же пары. */
  --paper:      #EDF1F6;
  --paper-deep: #DDE4EC;
  --card:       #FFFFFF;   /* логотипы только на чистом белом */
  --ink:        #14325A;   /* Deep Blue */
  --ink-soft:   #5B7093;
  --line:       #C6D0DE;
  --accent:     #BEA05A;   /* Noble Gold */
  --accent-ink: #14325A;
  --pick:       #14325A;
  --danger:     #A33A28;

  /* тени: мягкие, без «залипания» */
  --lift:   0 calc(var(--u) * 3px) calc(var(--u) * 8px) rgba(20, 50, 90, .14);
  --lift-2: 0 calc(var(--u) * 6px) calc(var(--u) * 18px) rgba(20, 50, 90, .20);

  /* радиусы */
  --r-s: calc(var(--u) * 10px);
  --r-m: calc(var(--u) * 18px);
  --r-l: calc(var(--u) * 28px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;            /* ребёнок не должен уметь «уехать» со экрана */
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'AppSans', 'Segoe UI', Tahoma, system-ui, sans-serif;
  font-weight: 500;
  font-size: calc(var(--u) * 22px);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M6 3l24 15-10 2-3 11z' fill='%23FFFFFF' stroke='%2314325A' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3, auto;
}

/* Крупный курсор поверх всего интерактивного */
button, [role="option"], .avatar {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M15 6c-2 0-3 1-3 3v18l4-4 4 9 5-2-4-8h7z' fill='%23BEA05A' stroke='%2314325A' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 12 5, pointer;
}

/* Арабское письмо в том же кегле читается мельче */
html[lang="ar"] body { font-size: calc(var(--u) * 25px); line-height: 1.6; }

img { display: block; max-width: 100%; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

/* Видимый фокус — для педагога с клавиатурой */
:focus-visible {
  outline: calc(var(--u) * 4px) solid var(--pick);
  outline-offset: calc(var(--u) * 3px);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}