/* ============================================================
   Токены фирменного стиля Deutsch Alexandra Stolz.
   Источник — дизайн-система из Claude Design (tokens/*.css).
   Шрифты лежат локально (static/fonts), без запросов к Google:
   у части учеников Google заблокирован.
   Пути — относительные, чтобы работать и под префиксом /hausaufgaben.
   ============================================================ */

/* ---- Шрифты: Montserrat (заголовки) + Raleway (текст), вариативные, латиница + кириллица ---- */
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/montserrat-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/montserrat-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Raleway"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/raleway-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Raleway"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/raleway-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Raleway"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url(../fonts/raleway-latin-wght-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Raleway"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url(../fonts/raleway-cyrillic-wght-italic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  /* ---- Фирменная гамма ---- */
  --red-600: #D10D1B;          /* главный акцент: маркеры секций, главная кнопка */
  --red-700: #A80813;          /* наведение / тёмный красный текст */
  --red-500: #E23744;
  --red-100: #FBE3E4;          /* мягкая красная подложка */

  /* Зелёный — из презентации школы (КК, эфир 13.07): яркий #20AB0E и его оттенки, без оливкового.
     Контраст (WCAG): белый на --green-900 — 5,79:1, на --green-800 — 7,98:1; --green-900 на --green-100 — 5,10:1;
     сам #20AB0E с белым — 3,05:1, поэтому он только для рамок, полосок, точек и крупных значков, не под текст. */
  --green-900: #16760A;        /* тёмный оттенок #20AB0E: кнопки с белым текстом, зелёный текст, «верно» */
  --green-800: #125E08;        /* наведение на зелёную кнопку */
  --green-600: #20AB0E;        /* фирменный яркий зелёный: рамки «верно», полоски, точки */
  --green-300: #ABF7A1;        /* светлый — на тёмно-зелёном фоне (дуга прогресса, подпись): 4,56:1 к --green-900 */
  --green-100: #D4FBCF;        /* мягкая зелёная подложка (карточки, «верно») */
  --green-bright: var(--green-600);
  --green-bright-600: var(--green-600);

  /* ---- Нейтральные ---- */
  --ink-900: #383B44;          /* графит: основной текст */
  --grey-600: #797B84;         /* вторичный текст */
  --grey-300: #BFC0C6;         /* линии, рамки полей */
  --paper: #E7E6E2;            /* тёплая бумага */
  --paper-50: #F8F9FC;         /* почти белый фон страниц и полей — как в презентации школы */
  --white: #FFFFFF;

  /* ---- Вторичная палитра иллюстраций (только подложки) ---- */
  --sun-yellow: #F4C84B;
  --sun-orange: #E98A2B;

  /* ---- Состояния (смысловые имена; собраны из палитры бренда) ---- */
  /* «верно» — светло-зелёная заливка + рамка #20AB0E + ✓; «неверно» — светло-красная + рамка #D10D1B + ✗.
     Заполненный, но не проверенный ответ — нейтральный (белый, рамка графит/серый), не зелёный. */
  --ok-ink: var(--green-900);  --ok-wash: var(--green-100);  --ok-line: var(--green-600);
  --bad-ink: var(--red-700);   --bad-wash: var(--red-100);   --bad-line: var(--red-600);
  /* «Ждёт ментора» и «оранжевое окошко» — фирменный оранжевый #E98A2B (синий — не цвет школы):
     очень светлый тёплый фон, средняя рамка, тёмно-коричневый текст. */
  --orange-600: #E98A2B;
  --brown-ink: #6E4A2C;
  --mentor-ink: var(--brown-ink); --mentor-wash: #FDF4EA;     --mentor-line: #F2C597;
  --mentor-tint: #FBE6CF;      --mentor-focus: rgba(233,138,43,.28);
  /* «Нужно внимание» (на доработку, ждёт 24–36 ч) — тёплый солнечный, приглушённый */
  --attn-ink: #6B5412;         --attn-wash: #FBF1D3;         --attn-line: #EBCD7C;
  /* «Ждёт 36–48 ч» — приглушённый оранжевый из иллюстраций */
  --late-ink: #7E4310;         --late-wash: #FBE6D0;         --late-line: #EFB98A;

  /* ---- Семантика ---- */
  --color-primary: var(--red-600);
  --color-primary-hover: var(--red-700);
  --color-deep: var(--green-900);
  --text-heading: var(--ink-900);
  --text-body: var(--ink-900);
  --text-muted: var(--grey-600);
  --surface-page: var(--paper-50);
  --surface-card: var(--white);
  --surface-muted: var(--paper);
  --border-subtle: rgba(56, 59, 68, .12);
  --focus-ring: rgba(32, 171, 14, .28);
  --focus-ring-neutral: rgba(56, 59, 68, .16); /* фокус и выбор в заданиях: до проверки ответ не зелёный */

  /* ---- Шрифты ---- */
  --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800; --fw-black: 900;

  /* ---- Кегли ---- */
  --text-xs: .75rem;    /* 12 */
  --text-sm: .875rem;   /* 14 */
  --text-base: 1rem;    /* 16 */
  --text-md: 1.125rem;  /* 18 */
  --text-lg: 1.375rem;  /* 22 */
  --text-xl: 1.75rem;   /* 28 */
  --text-2xl: 2.25rem;  /* 36 */
  --lh-tight: 1.08; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.65;
  --ls-tight: -.02em; --ls-caps: .08em; --ls-caps-wide: .14em;

  /* ---- Отступы (шаг 4 px) ---- */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem;

  /* ---- Радиусы ---- */
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 32px; --radius-pill: 999px;

  /* ---- Тени: мягкие, низкие ---- */
  --shadow-xs: 0 1px 2px rgba(56,59,68,.08);
  --shadow-sm: 0 2px 8px rgba(56,59,68,.08);
  --shadow-md: 0 8px 24px rgba(56,59,68,.10);
  --shadow-lg: 0 18px 48px rgba(56,59,68,.14);
  --shadow-card: 0 1px 2px rgba(56,59,68,.06), 0 6px 20px -12px rgba(56,59,68,.18);

  /* ---- Движение: мягко, без прыжков ---- */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 140ms; --dur-base: 240ms;

  /* ---- Раскладка ---- */
  --container: 880px;
  --header-h: 52px;
}