/* ============================================================
   FGS · «ПРО Будущее» — дизайн-токены
   Версия 2.1 · превью, этап 1
   ------------------------------------------------------------
   Основа — 04_дизайн/tokens.css v2.0, перенесена БЕЗ изменений
   значений. Всё, что добавлено для превью, помечено «+ ПРЕВЬЮ».

   ЕДИНСТВЕННЫЙ файл, где допустимы hex-значения.
   Три слоя: primitive → semantic → component.
   Тема переключается подменой ТОЛЬКО semantic-слоя.
   В компонентах писать var(--...), никогда не hex.
   ============================================================ */

:root {
  /* ---------- СЛОЙ 1 · PRIMITIVE (сырые значения) ---------- */

  /* нейтральные тёплые */
  --c-sand-50:  #F6F5F0;
  --c-sand-100: #FAF9F5;
  --c-sand-200: #E4E0D5;
  --c-sand-300: #CFC9B8;   /* + ПРЕВЬЮ: усиленная граница, снята с макета */
  --c-white:    #FFFFFF;

  /* ночной лес */
  --c-night-900: #0A1316;
  --c-night-800: #122328;
  --c-night-700: #16292F;
  --c-night-600: #1E3A41;
  --c-night-500: #2A4A52;  /* + ПРЕВЬЮ: усиленная граница, снята с макета */

  /* текст */
  --c-ink-900: #1B2620;
  --c-ink-700: #4C5C53;
  --c-ink-600: #5E6C63;
  --c-cream-100: #EFE9DC;
  --c-cream-300: #BFC9C1;

  /* акценты, светлая тема */
  --c-green-600: #2F7D4F;
  --c-gold-700:  #85631A;
  --c-teal-600:  #1F6F7A;
  --c-coral-700: #A8412C;
  --c-gold-500:  #C9A34A;

  /* + ПРЕВЬЮ: лаванда — только эмблема команды в шапке админа.
     В продуктовой палитре не участвует и больше нигде не используется. */
  --c-lavender-500: #8E7BC3;
  --c-lavender-300: #C3B5E8;

  /* акценты, тёмная тема */
  --c-green-300: #8FCFA1;
  --c-gold-200:  #E7CE92;
  --c-teal-300:  #8FCBD3;
  --c-coral-300: #EDA894;
  --c-gold-400:  #D9B968;

  /* ---------- СЛОЙ 3 · размеры (общие для тем) ---------- */

  /* шкала отступов, кратна 8 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 48px;
  --sp-9: 64px; --sp-10: 80px;

  /* между смысловыми блоками — всегда --sp-8, не меньше */
  --gap-block: var(--sp-8);

  /* радиусы */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px;
  --r-full: 999px;         /* + ПРЕВЬЮ: пилюли, круглые бейджи */
  --r-card: var(--r-lg);
  --r-hero: var(--r-xl);

  /* типографика */
  --font-serif: "PT Serif", Georgia, serif;      /* заголовки, реплики персонажей */
  --font-sans:  "Inter", system-ui, sans-serif;  /* интерфейс, body */
  --fs-body: 16.5px;
  --fs-body-child: 17.5px;
  --lh-body: 1.6;
  --fs-h1: clamp(28px, 4vw, 44px);
  --fs-h2: clamp(22px, 3vw, 32px);
  --fs-h3: clamp(18px, 2.2vw, 22px);
  --fs-small: 14px;
  --fs-xs: 13px;                                 /* + ПРЕВЬЮ: подписи, легенды */
  --fs-display: clamp(30px, 4.6vw, 46px);        /* + ПРЕВЬЮ: заголовок отчёта */
  --lh-tight: 1.25;                              /* + ПРЕВЬЮ: заголовки */
  --tracking-eyebrow: .14em;                     /* + ПРЕВЬЮ: надзаголовок */

  /* движение */
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 300ms;
  --ease: cubic-bezier(.2,.8,.2,1);

  /* зоны нажатия */
  --tap-min: 44px;
  --tap-child: 48px;

  /* + ПРЕВЬЮ: геометрия иконок из ТЗ на иллюстрации */
  --icon-stroke: 1.8;
  --icon-16: 16px;
  --icon-20: 20px;
  --icon-24: 24px;

  /* + ПРЕВЬЮ: ширина полосы контента */
  --wrap-max: 1140px;
  --measure: 62ch;          /* комфортная длина строки */
}

/* ============================================================
   СЛОЙ 2 · SEMANTIC — светлая тема (основная)
   Философия: «утренний лес». Фон не белый, а молочно-песочный,
   тогда белые карточки светятся, а иллюстрации выглядят дороже.
   ============================================================ */

:root,
[data-theme="light"] {
  --bg:          var(--c-sand-50);
  --surface:     var(--c-white);
  --surface-2:   var(--c-sand-100);
  --border:      var(--c-sand-200);
  --border-strong: var(--c-sand-300);          /* + ПРЕВЬЮ */

  --text:        var(--c-ink-900);   /* 14.31:1 на фоне, 15.62:1 на карточке */
  --text-2:      var(--c-ink-700);   /* 7.09:1 на карточке */
  --text-muted:  var(--c-ink-600);   /* 5.52:1 на карточке */

  --accent-grow:  var(--c-green-600); /* рост / сильная сторона */
  --accent-win:   var(--c-gold-700);  /* достижения / развивается */
  --accent-think: var(--c-teal-600);  /* нейтральный акцент, focus-ring */
  --accent-care:  var(--c-coral-700); /* внимание / нужна поддержка */
  --thread:       var(--c-gold-500);  /* «золотая нить» — НИКОГДА не текст */
  --emblem:       var(--c-lavender-500); /* эмблема команды, только шапка админа */

  /* + ПРЕВЬЮ: непрозрачная панель поверх тёмной сцены (описание локации
     на карте). Полупрозрачная подложка на пёстрой карте не читается. */
  --hero-panel:   var(--c-night-800);

  /* + ПРЕВЬЮ: цвет текста поверх заливки акцентом.
     Меняется по теме, иначе белым по светло-зелёному в тёмной теме
     контраст падает до 1.7:1. */
  --on-accent:   var(--c-white);

  --shadow-1: 0 1px 2px rgba(27,38,32,.06);
  --shadow-2: 0 4px 14px rgba(27,38,32,.08);
  --shadow-3: 0 12px 32px rgba(27,38,32,.10);

  /* + ПРЕВЬЮ: затемнение под модальным окном */
  --scrim: rgba(27,38,32,.55);

  /* + ПРЕВЬЮ: полупрозрачные подложки статусов и акцентов */
  --tint-strength: 12%;
  --tint-strength-hover: 18%;
}

/* ============================================================
   СЛОЙ 2 · SEMANTIC — тёмная тема
   Настроение «ночной лес», контраст выправлен до 4.5:1+.
   ============================================================ */

[data-theme="dark"] {
  --bg:          var(--c-night-900);
  --surface:     var(--c-night-800);
  --surface-2:   var(--c-night-700);
  --border:      var(--c-night-600);
  --border-strong: var(--c-night-500);          /* + ПРЕВЬЮ */

  --text:        var(--c-cream-100);
  --text-2:      var(--c-cream-300);
  --text-muted:  var(--c-cream-300);

  --accent-grow:  var(--c-green-300);
  --accent-win:   var(--c-gold-200);
  --accent-think: var(--c-teal-300);
  --accent-care:  var(--c-coral-300);
  --thread:       var(--c-gold-400);
  --emblem:       var(--c-lavender-300);
  --hero-panel:   var(--c-night-700);            /* + ПРЕВЬЮ, см. светлую тему */

  --on-accent:   var(--c-night-900);            /* + ПРЕВЬЮ, см. светлую тему */

  /* в тёмной теме иерархию держим фоном и границей, а не тенью */
  --shadow-1: none;
  --shadow-2: 0 4px 18px rgba(0,0,0,.35);
  --shadow-3: 0 16px 40px rgba(0,0,0,.45);

  --scrim: rgba(0,0,0,.66);                     /* + ПРЕВЬЮ, см. светлую тему */

  --tint-strength: 14%;
  --tint-strength-hover: 20%;
}

/* ============================================================
   СЛОЙ 3 · COMPONENT
   Компоненты ссылаются только на semantic-токены.

   Селектор «:root, [data-theme]» вместо «:root» — чтобы вложенный
   <div data-theme="dark"> получал СВОЙ пересчитанный набор
   компонентных токенов. Иначе тёмный островок внутри светлой
   страницы брал бы компонентные токены светлой темы.
   Нужно для показа обеих тем рядом на P51.
   ============================================================ */

:root, [data-theme] {
  /* карточка */
  --card-bg: var(--surface);
  --card-border: var(--border);
  --card-radius: var(--r-card);
  --card-pad: var(--sp-5);
  --card-shadow: var(--shadow-2);
  --card-pad-lg: var(--sp-6);                    /* + ПРЕВЬЮ */

  /* блок-герой: ВСЕГДА тёмный, в обеих темах.
     Советник и Хранитель «пишут из другого мира» — фирменный приём. */
  --hero-bg: var(--c-night-800);
  --hero-text: var(--c-cream-100);
  --hero-text-2: var(--c-cream-300);
  --hero-accent: var(--c-gold-400);
  --hero-radius: var(--r-hero);
  /* + ПРЕВЬЮ */
  --hero-gradient: linear-gradient(140deg, var(--c-night-900) 0%, var(--c-night-800) 55%, var(--c-night-700) 100%);
  --hero-glow: radial-gradient(circle, rgba(217,185,104,.22), transparent 62%);
  --hero-border: rgba(217,185,104,.28);
  --hero-quote-bg: rgba(217,185,104,.09);
  --hero-panel-bg: linear-gradient(160deg, rgba(217,185,104,.16), rgba(217,185,104,.03));
  --hero-grow: var(--c-green-300);   /* «сильная сторона» на тёмной подложке */

  /* круглый бейдж с номером блока отчёта (1–8) */
  --badge-num-size: 34px;
  --badge-num-bg: var(--surface-2);
  --badge-num-fg: var(--accent-win);
  --badge-num-border: var(--thread);
  /* + ПРЕВЬЮ: тот же бейдж на тёмной подложке героя (блоки 1 и 8) */
  --badge-num-bg-hero: var(--hero-quote-bg);
  --badge-num-fg-hero: var(--hero-accent);

  /* статусы миров. НИКОГДА не только цвет — всегда иконка + слово */
  --status-strong-fg: var(--accent-grow);
  --status-strong-bg: color-mix(in srgb, var(--accent-grow) var(--tint-strength), transparent);
  --status-growing-fg: var(--accent-win);
  --status-growing-bg: color-mix(in srgb, var(--accent-win) var(--tint-strength), transparent);
  --status-hard-fg: var(--accent-care);   /* в ПЕРВОМ отчёте не используется */
  --status-hard-bg: color-mix(in srgb, var(--accent-care) var(--tint-strength), transparent);
  /* + ПРЕВЬЮ: те же статусы поверх тёмного героя */
  --status-strong-fg-hero: var(--c-green-300);
  --status-growing-fg-hero: var(--c-gold-200);

  /* кнопки */
  --btn-primary-bg: var(--accent-grow);
  --btn-primary-fg: var(--on-accent);
  --btn-primary-bg-hover: color-mix(in srgb, var(--accent-grow) 85%, black);
  --btn-secondary-bg: transparent;
  --btn-secondary-fg: var(--text);
  --btn-secondary-border: var(--border-strong);
  --btn-radius: var(--r-md);
  --btn-min-h: var(--tap-min);
  /* + ПРЕВЬЮ */
  --btn-secondary-bg-hover: var(--surface-2);
  --btn-pad-x: var(--sp-4);
  --btn-disabled-fg: var(--text-muted);
  --btn-disabled-bg: var(--surface-2);
  --btn-disabled-border: var(--border);

  /* вариант ответа в тесте */
  --option-bg: var(--surface);
  --option-bg-hover: var(--surface-2);
  --option-border: var(--border);
  --option-border-selected: var(--accent-think);
  --option-min-h: var(--tap-child);
  /* + ПРЕВЬЮ */
  --option-bg-selected: color-mix(in srgb, var(--accent-think) var(--tint-strength), transparent);
  --option-radius: var(--r-md);
  --option-pad: var(--sp-4);
  --option-marker-size: 22px;

  /* поле ввода */
  --input-bg: var(--surface);
  --input-border: var(--border-strong);
  --input-border-focus: var(--accent-think);
  --input-error: var(--accent-care);
  /* + ПРЕВЬЮ */
  --input-radius: var(--r-md);
  --input-min-h: var(--tap-min);
  --input-pad-x: var(--sp-3);
  --input-placeholder: var(--text-muted);
  --input-error-bg: color-mix(in srgb, var(--accent-care) 8%, transparent);

  /* фокус — НИКОГДА не убирать */
  --focus-ring: 3px solid var(--accent-think);
  --focus-offset: 2px;

  /* золотая нить между блоками */
  --thread-width: 2px;

  /* ---------- + ПРЕВЬЮ: компоненты, которых не было в v2.0 ---------- */

  /* шапка экрана */
  --topbar-bg: color-mix(in srgb, var(--bg) 88%, transparent);
  --topbar-border: var(--border);
  --topbar-h: 64px;

  /* плашка «ПРЕВЬЮ · демо-данные» — обязательна на каждом экране */
  --ribbon-bg: var(--surface-2);
  --ribbon-fg: var(--text-muted);
  --ribbon-border: var(--border-strong);

  /* плитка иконки мира */
  --tile-size: 36px;
  --tile-radius: var(--r-sm);
  --tile-border: currentColor;

  /* пилюля-чип (легенды, теги, счётчики) */
  --chip-bg: var(--surface-2);
  --chip-fg: var(--text-2);
  --chip-border: var(--border);
  --chip-radius: var(--r-full);

  /* заглушка иллюстрации: рамка --border, фон --surface-2, подпись */
  --ph-bg: var(--surface-2);
  --ph-border: var(--border-strong);
  --ph-fg: var(--text-muted);
  --ph-radius: var(--r-md);
  --ph-glow: radial-gradient(120% 80% at 50% 100%,
             color-mix(in srgb, var(--accent-grow) 10%, transparent), transparent 65%);

  /* таблица (только экраны родителя и админки) */
  --table-head-bg: var(--surface-2);
  --table-border: var(--border);
  --table-row-hover: var(--surface-2);

  /* чат с Хранителем */
  --bubble-ai-bg: var(--surface-2);
  --bubble-ai-fg: var(--text);
  --bubble-child-bg: color-mix(in srgb, var(--accent-think) var(--tint-strength), transparent);
  --bubble-child-fg: var(--text);
  --bubble-radius: var(--r-lg);
  --bubble-max: 46ch;

  /* прогресс главы (без чисел на детских экранах) */
  --progress-track: var(--border);
  --progress-fill: var(--accent-grow);
  --progress-h: 6px;

  /* разделительная линия внутри карточки */
  --rule: var(--border);

  /* затемнение поверх сюжетной иллюстрации — без него светлый текст
     не читается на светлых участках картинки (луна, свечение) */
  --scene-veil: rgba(10,19,22,.72);
  --scene-veil-strong: rgba(10,19,22,.92);
}

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

*:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

h1, h2, h3, .character-line {
  font-family: var(--font-serif);
}

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

/* Шрифты хостим локально: Google Fonts CDN из РФ нестабилен,
   а падение шрифта ломает всю визуальную ценность продукта.
   Сами правила @font-face вынесены в css/fonts.css — их 16 штук,
   по одному на подмножество (кириллица / латиница), чтобы браузер
   грузил только нужное. Подключать fonts.css ПЕРЕД tokens.css. */