/* ============================================================
   English from Zero — токены и базовый слой
   Подключается первым: все остальные слои опираются на эти переменные.
   Порядок сборки: tokens → style (legacy) → components → shell.
   ============================================================ */

:root {
  /* ---------- Поверхности ---------- */
  --bg: #0e0c14;
  --surface-1: #191622;
  --surface-2: #211d2e;
  --surface-3: #2a2538;
  --surface-inset: #14111c;          /* поля ввода, слоты, legend */
  --topbar-bg: rgba(20, 17, 28, .88);

  --line: #2a2538;
  --line-strong: #37324a;
  --line-accent: rgba(139, 124, 246, .42);

  /* ---------- Текст: 4 уровня, контраст проверен на bg и surface-* ---------- */
  --text-1: #eceaf4;   /* 15.4:1 на bg   */
  --text-2: #b7b1c8;   /*  9.4:1 на bg   */
  --text-3: #9a94ae;   /*  6.7:1 на bg, 5.5:1 на surface-2 */
  --text-4: #7d7891;   /*  4.6:1 на bg — disabled / locked  */
  --text-inv: #17121f; /* текст на светлой/акцентной подложке */

  /* ---------- Акценты ---------- */
  --accent: #8b7cf6;
  --accent-strong: #6d5cf0;
  --accent-ink: #d5ccff;             /* текст на accent-tint */
  --accent-grad: linear-gradient(135deg, #8b7cf6, #6d5cf0);

  /* Шаги урока — один источник правды для цвета и подложки */
  --step-words: #5fd0e6;
  --step-theory: #a78bfa;
  --step-practice: #f5b84c;
  --step-reading: #5bd68c;
  --step-review: #f08bb0;

  /* Семантика */
  --ok: #4ade80;
  --ok-ink: #b9f3d0;
  --warn: #ff7a59;
  --warn-ink: #ffc9b8;
  --err: #f87171;
  --err-ink: #fdc9c9;
  --gold: #f5b84c;
  --gold-ink: #ffd98a;
  --fire: #ff8f5c;

  /* Роли слов в примерах: подлежащее / сказуемое / объект / обстоятельство / прочее */
  --role-s: #6fdcd3;
  --role-v: #f5c04a;
  --role-o: #ff8f70;
  --role-a: #82b1ff;
  --role-x: #9aa3b8;

  /* ---------- Tint: полупрозрачные подложки, чтобы в CSS не было литералов ---------- */
  --tint-accent: rgba(139, 124, 246, .16);
  --tint-accent-line: rgba(139, 124, 246, .42);
  --tint-words: rgba(95, 208, 230, .14);
  --tint-theory: rgba(167, 139, 250, .16);
  --tint-theory-line: rgba(167, 139, 250, .34);
  --tint-practice: rgba(245, 184, 76, .14);
  --tint-practice-line: rgba(245, 184, 76, .42);
  --tint-reading: rgba(91, 214, 140, .14);
  --tint-review: rgba(240, 139, 176, .14);
  --tint-ok: rgba(74, 222, 128, .12);
  --tint-ok-line: rgba(74, 222, 128, .40);
  --tint-err: rgba(248, 113, 113, .12);
  --tint-err-line: rgba(248, 113, 113, .35);
  --tint-warn: rgba(255, 122, 89, .10);
  --tint-warn-line: rgba(255, 122, 89, .40);
  --tint-gold: rgba(245, 184, 76, .14);
  --tint-info: rgba(111, 220, 211, .10);
  --tint-info-line: rgba(111, 220, 211, .38);
  --tint-glass: rgba(255, 255, 255, .12);

  /* ---------- Типографика ---------- */
  --font-sans: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-en: "Source Serif 4", Georgia, "Times New Roman", serif;

  --fs-display: 2rem;    /* 32 */
  --fs-h1: 1.6rem;       /* 26 */
  --fs-h2: 1.2rem;       /* 19 */
  --fs-h3: 1rem;         /* 18 */
  --fs-body: 1.05rem;    /* 17 — связный текст, подсказки */
  --fs-sm: .875rem;      /* 14 */
  --fs-xs: .78rem;       /* 12.5 — подписи, cap */
  --fs-body-root: 18px;  /* базовый размер документа */

  --lh-tight: 1.2;
  --lh-snug: 1.45;
  --lh-body: 1.65;
  --lh-en: 2;

  --ls-cap: .07em;       /* uppercase-подписи */
  --ls-head: -.015em;

  /* ---------- Геометрия ---------- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-pill: 999px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 40px;
  --s-6: 64px;

  --gap: 20px;           /* типовой зазор сетки */
  --gap-sm: 12px;
  --tap: 44px;           /* минимальная зона нажатия */
  --page-max: 1160px;
  --page-max-reading: 760px;
  --page-max-narrow: 460px;
  --page-pad: 30px 20px 70px;
  --topbar-h: 60px;

  /* ---------- Тени и кольца ---------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .5), 0 20px 50px rgba(0, 0, 0, .45);
  --ring: 0 0 0 3px rgba(139, 124, 246, .55);
  --ring-soft: 0 0 0 3px rgba(139, 124, 246, .2);

  /* ---------- Фоновая живопись холста ---------- */
  --canvas:
    radial-gradient(1100px 700px at 12% -8%, rgba(167, 139, 250, .12) 0%, transparent 55%),
    radial-gradient(900px 650px at 100% 0%, rgba(95, 208, 230, .08) 0%, transparent 50%),
    radial-gradient(1000px 800px at 50% 120%, rgba(91, 214, 140, .06) 0%, transparent 55%),
    var(--bg);

  /* ---------- Алиасы legacy-имён (css/style.css). Удалить вместе со style.css ---------- */
  --bg-2: var(--surface-inset);
  --surface: var(--surface-1);
  --text: var(--text-1);
  --muted: var(--text-2);
  --faint: var(--text-3);
  --border: var(--line);
  --border-strong: var(--line-strong);
  --brand: var(--accent);
  --success: var(--ok);
  --danger: var(--err);
  --radius: var(--r-lg);
  --radius-sm: var(--r-md);
  --c-words: var(--step-words);
  --c-theory: var(--step-theory);
  --c-practice: var(--step-practice);
  --c-reading: var(--step-reading);
  --c-review: var(--step-review);
}

/* ============================================================
   Reset
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: var(--fs-body-root);
  line-height: var(--lh-body);
  color: var(--text-1);
  background: var(--canvas);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0 0 var(--s-2); line-height: var(--lh-tight); letter-spacing: var(--ls-head); font-weight: 800; }
p { margin: 0 0 var(--s-3); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--s-3); padding-left: 1.25em; }
li + li { margin-top: var(--s-1); }
strong, b { font-weight: 700; color: var(--text-1); }
small { font-size: var(--fs-sm); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-4) 0; }

a { color: var(--accent-ink); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }

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

button { font: inherit; color: inherit; }

::selection { background: var(--accent); color: #fff; }

/* ============================================================
   Базовые роли
   ============================================================ */

/* Английский язык всегда набирается в другом шрифте — не путать с интерфейсным. */
[lang="en"], .en { font-family: var(--font-en); }

/* Иконки Phosphor: базовая линия подогнана под текст, декоративные — скрыты от AT. */
.ph, .ph-fill { font-size: 1.2em; line-height: 1; vertical-align: -.18em; }
.ph-fill { font-size: 1.15em; }
i.ph[aria-hidden="true"] + span { margin-left: .1em; }

/* Единое кольцо фокуса: box-shadow не обрезает скругления, в отличие от outline. */
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* Служебные */
.hidden { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Отключить подсветку тапа поверх собственных :active-состояний. */
a, button, .chip, .option, .known-btn { -webkit-tap-highlight-color: transparent; }

/* Скроллбары в теме — иначе на Windows выглядит чужеродной полосой. */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   Уважение к настройкам пользователя
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Forced colors (Windows High Contrast): не теряем границы карточек и кнопок. */
@media (forced-colors: active) {
  .card, .btn, .chip, .option, .field__input, .row { border: 1px solid CanvasText; }
  .progress__bar { background: Highlight; }
}

@media print {
  .topbar, .sidebar, .btn, .page-actions, .toast, .gloss-tip { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .row { box-shadow: none; border-color: #bbb; }
  a { color: #000; }
}