/* =====================================================================
   Файл: public/assets/css/tokens.css
   Дизайн-токены трёх тем. Компоненты используют ТОЛЬКО эти переменные,
   поэтому чтобы поменять цвет/размер в теме — меняешь значение здесь.
   A — дети 6–10 (мультяшный), B — подростки 11–17 (аркада Doom-HUD),
   C — взрослые 18+ (спокойный). Тема включается атрибутом data-theme
   на <html>, его ставит программа по выбранному возрасту.
   ===================================================================== */

/* ---------- Общие для всех тем ---------- */
:root {
  --scale: 1;                 /* множитель шрифтов; «Крупнее текст» = 1.2 (+20 %) */
  --container: 1280px;        /* максимальная ширина контента */
  --gutter: 24px;             /* боковые поля на ПК */
  --tap: 44px;                /* минимальный размер цели нажатия */
  --dur: 220ms;               /* стандартная длительность анимации */
  --ease: cubic-bezier(.2, .8, .2, 1); /* плавность «ease-out» */
}
:root[data-large="1"] { --scale: 1.2; }

/* ---------- Тема C — взрослые (она же нейтральная для приветствия) ---------- */
:root, :root[data-theme="C"], [data-theme="C"] {
  --bg: #F5F7FA;              /* фон страницы */
  --surface: #FFFFFF;         /* карточки */
  --surface-2: #EEF3FF;       /* вложенные блоки, плитка иконки */
  --text: #111827;            /* основной текст */
  --text-muted: #4B5563;      /* второстепенный текст */
  --text-soft: #6B7280;       /* мелкие подписи «Раздел N» */
  --border: #E5E7EB;          /* обводка карточек */
  --border-strong: #D1D5DB;   /* обводка полей и кнопок */
  --border-w: 1px;            /* толщина обводки */
  --radius: 16px;             /* скругление карточек */
  --radius-lg: 18px;          /* скругление крупных блоков */
  --radius-btn: 12px;         /* скругление кнопок */
  --radius-field: 14px;       /* скругление поля поиска */
  --shadow: none;             /* тень карточек */
  --shadow-lg: none;          /* тень крупных блоков */
  --shadow-btn: none;         /* тень кнопок */
  --accent: #1D4ED8;          /* главная кнопка */
  --on-accent: #FFFFFF;       /* текст на главной кнопке */
  --accent-shadow: none;      /* тень главной кнопки */
  --primary-border: 0;        /* обводка главной кнопки */
  --accent-2: #FFFFFF;        /* «Задать вопрос» — фон */
  --on-accent-2: #1D4ED8;     /* «Задать вопрос» — текст */
  --accent-2-border: 2px solid #BFD0FF;
  --accent-2-shadow: none;
  --btn2-bg: #FFFFFF;         /* вторичная кнопка — фон */
  --btn2-text: #111827;       /* вторичная кнопка — текст */
  --btn2-border: 1px solid #D1D5DB;
  --progress: #1D4ED8;        /* заливка прогресса */
  --track: #E5E7EB;           /* дорожка прогресса */
  --track-border: 0 solid transparent;
  --bar-h: 6px;               /* высота полоски на карточке */
  --new-bg: #FFEDD5;          /* метка «Новое» — фон */
  --new-text: #9A3412;        /* метка «Новое» — текст */
  --ok: #15803D;              /* верный ответ */
  --err: #B91C1C;             /* неверный ответ */
  --icon: #1D4ED8;            /* цвет иконок разделов */
  --tile-bg: #EEF3FF;         /* фон плитки иконки */
  --face-line: #111827;       /* контур заглушки лица */
  --focus: #1D4ED8;           /* рамка фокуса с клавиатуры */
  --font-head: 'Manrope', system-ui, sans-serif;   /* заголовки */
  --font-body: 'Manrope', system-ui, sans-serif;   /* текст */
  --font-ui: 'Manrope', system-ui, sans-serif;     /* кнопки, метки */
  --w-head: 800;              /* жирность заголовков */
  --w-ui: 700;                /* жирность кнопок */
  --fs-h1: 36px;              /* H1 на ПК */
  --fs-h2: 26px;              /* «Разделы» */
  --fs-card: 19px;            /* заголовок карточки */
  --fs-body: 19px;            /* основной текст (крупнее — читается без очков) */
  --fs-small: 15px;           /* мелкие подписи — не меньше 15 px */
  --fs-btn: 16px;             /* текст вторичных кнопок */
  --fs-btn-main: 17px;        /* текст главной кнопки */
  --gap-grid: 18px;           /* зазор сетки разделов */
  --card-min: 240px;          /* минимальная ширина карточки */
  /* Иллюстрации к слайдам: линии и 4 заливки */
  --ill-line: #111827; --ill-1: #DBE5FF; --ill-2: #1D4ED8; --ill-3: #FFFFFF; --ill-4: #EEF3FF; --ill-bg: #F5F8FF;
}

/* ---------- Тема A — дети ---------- */
:root[data-theme="A"], [data-theme="A"] {
  --bg: #EAF4FF;
  --surface: #FFFFFF;
  --surface-2: #EAF4FF;
  --text: #1B2A4A;
  --text-muted: #1B2A4A;      /* у детей «вторичный» — тот же цвет, но жирнее */
  --text-soft: #1B2A4A;
  --border: #1B2A4A;
  --border-strong: #1B2A4A;
  --border-w: 3px;
  --radius: 24px;
  --radius-lg: 28px;
  --radius-btn: 18px;
  --radius-field: 999px;      /* поле поиска — «таблетка» */
  --shadow: 6px 6px 0 #1B2A4A;      /* тень-наклейка */
  --shadow-lg: 8px 8px 0 #1B2A4A;
  --shadow-btn: 4px 4px 0 #1B2A4A;
  --accent: #FF8A1F;
  --on-accent: #1B2A4A;
  --accent-shadow: 4px 4px 0 #1B2A4A;
  --primary-border: 3px solid #1B2A4A;
  --accent-2: #C8F0EC;
  --on-accent-2: #1B2A4A;
  --accent-2-border: 3px solid #1B2A4A;
  --accent-2-shadow: 4px 4px 0 #1B2A4A;
  --btn2-bg: #FFFFFF;
  --btn2-text: #1B2A4A;
  --btn2-border: 3px solid #1B2A4A;
  --progress: #3FC27A;
  --track: #EAF4FF;
  --track-border: 3px solid #1B2A4A;
  --bar-h: 14px;
  --new-bg: #FF7AA2;
  --new-text: #1B2A4A;
  --ok: #3FC27A;
  --err: #E5484D;
  --icon: #1B2A4A;
  --tile-bg: #FFD6A5;         /* у детей плитки разноцветные — см. палитру в JS */
  --face-line: #1B2A4A;
  --face-card: #FFE58F;       /* жёлтая карточка с лицом */
  --focus: #FF8A1F;
  --font-head: 'Rubik', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --font-ui: 'Nunito', system-ui, sans-serif;
  --w-head: 800;
  --w-ui: 800;
  --fs-h1: 44px;
  --fs-h2: 32px;
  --fs-card: 22px;
  --fs-body: 21px;
  --fs-small: 16px;
  --fs-btn: 18px;
  --fs-btn-main: 19px;
  --gap-grid: 28px;
  --card-min: 260px;
  --ill-line: #1B2A4A; --ill-1: #CDEBFF; --ill-2: #FF8A1F; --ill-3: #FFFFFF; --ill-4: #FFE58F; --ill-bg: #EAF4FF;
}

/* ---------- Тема B — подростки ---------- */
:root[data-theme="B"], [data-theme="B"] {
  --bg: #14121C;
  --surface: #221E30;
  --surface-2: #14121C;
  --text: #F4F1E8;
  --text-muted: #D9D4E6;
  --text-soft: #D9D4E6;
  --border: #3A3450;
  --border-strong: #3A3450;
  --border-w: 4px;
  --radius: 0;
  --radius-lg: 0;
  --radius-btn: 0;
  --radius-field: 0;
  --shadow: none;
  --shadow-lg: none;
  --shadow-btn: none;
  --accent: #FFD23F;
  --on-accent: #14121C;
  --accent-shadow: 5px 5px 0 #8A6E10;   /* тень = тёмный тон кнопки */
  --primary-border: 0;
  --accent-2: #5BE37D;
  --on-accent-2: #14121C;
  --accent-2-border: 0;
  --accent-2-shadow: 4px 4px 0 #1F7A3A;
  --btn2-bg: #221E30;
  --btn2-text: #F4F1E8;
  --btn2-border: 4px solid #3A3450;
  --progress: #5BE37D;
  --track: #14121C;
  --track-border: 3px solid #3A3450;
  --bar-h: 14px;
  --new-bg: #FF5C5C;
  --new-text: #14121C;
  --ok: #5BE37D;
  --err: #FF5C5C;
  --icon: #FFD23F;
  --tile-bg: #14121C;
  --face-line: #000000;
  --hud-streak: #FF9F43;      /* цифра «Серия» в HUD */
  --hud-points: #7CC4FF;      /* цифра «Очки» в HUD */
  --focus: #FFD23F;
  --font-head: 'Press Start 2P', ui-monospace, monospace; /* только короткие заголовки и цифры */
  --font-body: 'Rubik', system-ui, sans-serif;
  --font-ui: 'Press Start 2P', ui-monospace, monospace;
  --w-head: 400;              /* у пиксельного шрифта одна жирность */
  --w-ui: 400;
  --fs-h1: 26px;
  --fs-h2: 18px;
  --fs-card: 21px;
  --fs-body: 20px;
  --fs-small: 15px;
  --fs-btn: 12px;
  --fs-btn-main: 14px;
  --gap-grid: 24px;
  --card-min: 260px;
  /* Иллюстрации подростков — приглушённые: линии не белые, а тёплый серый; подложка светлее фона,
     чтобы рисунок не «резал глаз» контрастом белое-на-чёрном */
  --ill-line: #BDB6CF; --ill-1: #4A4366; --ill-2: #E2B93B; --ill-3: #353049; --ill-4: #403A58; --ill-bg: #2A2539;
}

/* ---------- Телефон: размеры шрифтов по таблице дизайн-системы ---------- */
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  :root, :root[data-theme="C"], [data-theme="C"] { --fs-h1: 24px; --fs-h2: 21px; --fs-card: 17px; --fs-body: 17px; --fs-small: 14px; --fs-btn: 16px; --gap-grid: 10px; }
  :root[data-theme="A"], [data-theme="A"] { --fs-h1: 26px; --fs-h2: 24px; --fs-card: 17px; --fs-body: 18px; --fs-small: 14px; --fs-btn: 16px; --fs-btn-main: 18px; --gap-grid: 16px; --bar-h: 10px; --shadow: 4px 4px 0 #1B2A4A; --shadow-lg: 5px 5px 0 #1B2A4A; --shadow-btn: 3px 3px 0 #1B2A4A; --radius: 18px; --radius-lg: 22px; --radius-btn: 16px; }
  :root[data-theme="B"], [data-theme="B"] { --fs-h1: 16px; --fs-h2: 14px; --fs-card: 16px; --fs-body: 17px; --fs-small: 14px; --fs-btn: 11px; --fs-btn-main: 13px; --gap-grid: 14px; --bar-h: 10px; }
}