/* ============================================================
   Дизайн-токены · детективный квиз «true crime»
   Тёмная тема — основная (бар, тёмный зал, экраны телефонов).
   Принцип: нуар и «картон папок с делами» — в акцентах,
   читаемость и функциональность — прежде всего.
   Ит. 2 (07.2026): синхронизировано со стилем франшизного лендинга
   landing-franchise-v2.html — холодный чёрный, кирпичный красный,
   светлая бумага, узкий капс Oswald, острые углы, киношное зерно.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=PT+Sans+Narrow:wght@400;700&display=swap');

:root {
  /* ---------- ПАЛИТРА: ФОНЫ (тёплый «нуарный» чёрный, не синий) ---------- */
  --bg-app:        #141110;  /* фон приложения */
  --bg-surface:    #201C1A;  /* карточки, панели */
  --bg-elevated:   #282320;  /* модалы, всплывающие слои */
  --bg-sunken:     #0d0b0a;  /* колодцы: таймер-полоса, инпуты */
  --bg-hover:      #2e2925;  /* ховер по строкам/карточкам */

  /* «Бумага» — документы дела (единственные светлые поверхности) */
  --paper:         #F2EDE2;  /* фон документа */
  --paper-aged:    #E8E1D2;  /* старее: журналы, протоколы */
  --paper-ink:     #17130F;  /* текст на бумаге */
  --paper-ink-dim: #6F6555;  /* вторичный текст на бумаге, линовка */

  /* ---------- ПАЛИТРА: ТЕКСТ (на тёмном) ---------- */
  --text-primary:   #ece5da;
  --text-secondary: #a89f92;
  --text-muted:     #6f685e;
  --text-inverse:   #1d1a17; /* текст на акцентных кнопках */

  /* ---------- АКЦЕНТЫ ---------- */
  --accent-red:        #A83228;  /* «красная нить»: действия, выбор, улики */
  --accent-red-hover:  #C04638;
  --accent-red-dim:    #6E211A;  /* обводки, фоны-подложки красного */
  --accent-brass:      #c9a24b;  /* латунь/жетон: баллы, ставки, топ мест */
  --accent-brass-dim:  #6e5827;
  --stamp-red:         #A83228;  /* штамп «СЕКРЕТНО» на бумаге */
  --thread:            #A83228;  /* линия «нити» на доске улик */

  /* ---------- ЦВЕТА СОСТОЯНИЙ ---------- */
  --state-correct:      #55b47e;  /* правильно / зачтено */
  --state-correct-bg:   #1c3227;
  --state-wrong:        #B23B2E;  /* неправильно / штраф */
  --state-wrong-bg:     #3a201b;
  --state-locked:       #6f685e;  /* заблокировано / read-only */
  --state-locked-bg:    #211f1c;
  --state-pending:      #c9a24b;  /* на проверке / спорное */
  --state-pending-bg:   #332a17;
  --state-info:         #7aa7c7;  /* нейтральные уведомления */
  --state-info-bg:      #1c2830;

  /* Таймер: спокойный → предупреждение → критический */
  --timer-normal:   #ece5da;
  --timer-warn:     #e8b23a;  /* < 5 минут */
  --timer-critical: #C04638;  /* < 60 секунд, пульсация */
  --timer-track:    #2e2925;
  --timer-fill:     #A83228;

  /* ---------- ТИПОГРАФИКА ---------- */
  /* Акцентный (заголовки, названия дел, номера этапов) — узкий гротеск лендинга */
  --font-display: "Oswald", "PT Sans Narrow", "Arial Narrow", system-ui, sans-serif;
  /* Основной UI — системный гротеск */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  /* Документы: протоколы, логи, стенограммы — «машинопись» */
  --font-mono: "Consolas", "Menlo", "Courier New", monospace;

  --text-xs:   0.75rem;   /* 12 — метки, штампы */
  --text-sm:   0.875rem;  /* 14 — вторичный текст */
  --text-md:   1rem;      /* 16 — базовый (mobile читаемость!) */
  --text-lg:   1.125rem;  /* 18 — подзаголовки */
  --text-xl:   1.375rem;  /* 22 — заголовки карточек */
  --text-2xl:  1.75rem;   /* 28 — заголовки экранов */
  --text-3xl:  2.5rem;    /* 40 — название дела */
  --text-timer:    4.5rem;  /* таймер на телефоне/консоли */
  --text-tv-body:  3rem;    /* экран зала: текст */
  --text-tv-timer: 12rem;   /* экран зала: таймер */

  --leading-tight: 1.2;
  --leading-body:  1.5;
  --tracking-stamp: 0.14em; /* разрядка для штампов и бейджей */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* ---------- ОТСТУПЫ (шкала 4px) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Мобильные поля: 390px-экран, безопасные боковые отступы */
  --page-pad-mobile: var(--space-4);
  --tap-target: 44px; /* минимальная кликабельная высота */

  /* ---------- РАДИУСЫ (острые углы, как на лендинге) ---------- */
  --radius-xs:  2px;   /* бейджи, штампы */
  --radius-sm:  3px;   /* кнопки, инпуты */
  --radius-md:  4px;   /* карточки */
  --radius-lg:  6px;   /* модалы, крупные панели */
  --radius-pill: 999px;
  --radius-paper: 2px; /* документы почти без скругления — бумага */

  /* ---------- ТЕНИ ---------- */
  --shadow-card:  0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --shadow-float: 0 8px 24px rgba(0,0,0,.55);
  --shadow-modal: 0 16px 48px rgba(0,0,0,.7);
  /* бумага на тёмном столе */
  --shadow-paper: 0 2px 8px rgba(0,0,0,.6), 0 12px 28px rgba(0,0,0,.35);
  /* внутренняя тень «колодца» (инпуты, треки) */
  --shadow-inset: inset 0 2px 4px rgba(0,0,0,.5);
  /* свечение выбранного (красная нить вокруг карточки) */
  --glow-selected: 0 0 0 2px var(--accent-red), 0 0 16px rgba(168,50,40,.35);

  /* ---------- ГРАНИЦЫ ---------- */
  --border-subtle: 1px solid #2e2925;
  --border-strong: 1px solid #453e37;
  --border-paper:  1px solid #d3c5a5;

  /* ---------- ЭТАПЫ (бейджи) ---------- */
  --stage-1: #7aa7c7;  /* квиз — холодный, разогрев */
  --stage-2: #c9a24b;  /* карта следствия — латунь, работа */
  --stage-3: #e8b23a;  /* ставка — азарт */
  --stage-4: #B23B2E;  /* твист+реконструкция — красная нить */
  --stage-reveal: #ece5da; /* раскрытие — свет */

  /* ---------- АНИМАЦИЯ ---------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;

  /* ---------- Z-СЛОИ ---------- */
  --z-sticky: 10;   /* полоса таймера */
  --z-drawer: 20;   /* шторка бланка поверх документа */
  --z-modal:  30;
  --z-toast:  40;

  /* ---------- АРТЕФАКТЫ ДЕЛА (v2 «стол следователя») ---------- */
  --manila:       #c9b183;  /* манильская папка, конверты */
  --manila-deep:  #a8905e;  /* сгиб/тень папки, клапан конверта */
  --stamp-blue:   #3f5e82;  /* канцелярский штамп: ПРОЧИТАНО, СДАНО */
  --pencil:       #6d675c;  /* карандашный черновик на бумаге */
  --photo-paper:  #f6f2e7;  /* рамка полароида */
}

/* Киношное зерно поверх всех экранов (как на лендинге).
   ::before — чтобы не конфликтовать с локальными body::after макетов. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 90;
  pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Пульсация критического таймера */
@keyframes timer-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

/* Оттиск резинового штампа (ПРОЧИТАНО / СДАНО / ЗАЧТЕНО) */
@keyframes stamp-press {
  from { transform: scale(1.3) rotate(-6deg); opacity: 0; }
  to   { transform: scale(1)   rotate(-6deg); opacity: 1; }
}

/* Доступность: анимации — сахар, не дверь */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}