/* =========================================================
   «Пензенская открытка» — токены дизайн-системы
   Подключать первым: tokens.css → components.css → motion.css
   Шрифты: <link href="https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600&family=Prata&display=swap" rel="stylesheet">
   ========================================================= */
:root {
  /* ---- Цвет: бумага (60 %) ---- */
  --pz-paper: #F4EDE0;        /* L0: фон панелей и экранов */
  --pz-paper-2: #EAE0CD;      /* L1: подложки списков, сетки, поля */
  --pz-paper-3: #FBF7EF;      /* L2: карточки внутри панелей, листы */
  --pz-paper-sunk: #E2D6BF;   /* утопленные области: трек XP, пустой слот штампа */

  /* ---- Тушь (структура, 30 %) ---- */
  --pz-ink: #2B2620;          /* основной текст, 13:1 на бумаге */
  --pz-ink-2: #5A5146;        /* вторичный текст, 6.8:1 */
  --pz-ink-3: #736859;        /* мета 12 px, 4.7:1 */
  --pz-line: rgba(43, 38, 32, 0.12);        /* волосяная рамка */
  --pz-line-strong: rgba(43, 38, 32, 0.28); /* рамка интерактивных ≈1.8:1; кнопка отличается ещё заливкой paper-3 и подписью */
  --pz-line-control: rgba(43, 38, 32, 0.55);  /* рамка, которая одна обозначает элемент (переключатель, ползунок, пустой слот): ≥ 3:1 */

  /* ---- Акцент (10 %): геральдический зелёный ---- */
  --pz-accent: #2E5E45;
  --pz-accent-hover: #244C38;
  --pz-accent-press: #1C3D2D;
  --pz-accent-soft: #DCE5D8;  /* выбранная строка, фон выбранной вкладки */
  --pz-on-accent: #FBF7EF;
  --pz-focus: #2E5E45;

  /* ---- Награды: золото снопов ---- */
  --pz-gold: #C08A1E;
  --pz-gold-soft: #F1E2BC;
  --pz-gold-ink: #7A5410;     /* текст на золотом фоне и цифры наград, 5.6:1 */

  /* ---- Смысловые ---- */
  --pz-brick: #A9452F;        /* ошибка, неверный ответ */
  --pz-brick-soft: #F3DCD3;
  --pz-success: #2E5E45;      /* = акцент, плюс текст и иконка */
  --pz-stamp: #4C4A8A;        /* штемпельная краска */
  --pz-stamp-2: #A9452F;      /* «красная» печать особых мест */
  --pz-water: #7FA3B2;
  /* Куртка героя по умолчанию (D9): ≥ 3:1 к брусчатке и тротуару */
  --pz-hero-jacket: #9A3412;

  /* ---- Подложка для 3D-заглушки и затемнение ---- */
  --pz-scrim: rgba(30, 26, 22, 0.45);

  /* ---- Шрифты ---- */
  --pz-font-display: "Prata", "PT Serif", Georgia, serif;
  --pz-font-ui: "Golos Text", "PT Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pz-w-regular: 400;
  --pz-w-medium: 500;
  --pz-w-semibold: 600;

  --pz-text-meta: 0.75rem;   /* 12 */
  --pz-text-sm: 0.875rem;    /* 14 */
  --pz-text-body: 1rem;      /* 16 */
  --pz-text-lg: 1.25rem;     /* 20 */
  --pz-text-xl: 1.5rem;      /* 24 */
  --pz-text-2xl: 1.75rem;    /* 28 */
  --pz-text-3xl: 2.25rem;    /* 36 */
  --pz-text-4xl: 3rem;       /* 48 */

  --pz-leading-tight: 1.15;
  --pz-leading-head: 1.2;
  --pz-leading-body: 1.55;
  --pz-leading-meta: 1.4;

  /* ---- Отступы: 8 pt, мелочи 4 pt ---- */
  --pz-s1: 4px;
  --pz-s2: 8px;
  --pz-s3: 12px;
  --pz-s4: 16px;
  --pz-s6: 24px;
  --pz-s8: 32px;
  --pz-s12: 48px;
  --pz-s16: 64px;
  --pz-prose: 65ch;
  --pz-edge: 16px;          /* отступ HUD от края экрана */

  /* ---- Размеры ---- */
  --pz-hit: 44px;           /* минимальная сенсорная цель */
  --pz-btn-h: 48px;
  --pz-icon: 22px;
  --pz-minimap: 168px;
  --pz-compass: 56px;

  /* ---- Скругления ---- */
  --pz-r-sm: 4px;
  --pz-r-md: 8px;
  --pz-r-lg: 12px;
  --pz-r-round: 50%;

  /* ---- Тени (альфа < 0.08 днём) ---- */
  --pz-shadow-1: 0 1px 3px rgba(43, 38, 32, 0.06);
  --pz-shadow-2: 0 2px 4px rgba(43, 38, 32, 0.05), 0 8px 24px rgba(43, 38, 32, 0.07);
  --pz-shadow-3: 0 4px 8px rgba(43, 38, 32, 0.05), 0 16px 40px rgba(43, 38, 32, 0.07);
  --pz-edge-light: inset 0 0 0 transparent;

  /* ---- Z-уровни ---- */
  --pz-z-world: 0;
  --pz-z-hud: 10;
  --pz-z-sheet: 20;
  --pz-z-screen: 30;
  --pz-z-toast: 40;
  --pz-z-ceremony: 50;
  --pz-z-loading: 60;
  --pz-z-tooltip: 70;

  /* ---- Движение ---- */
  --pz-d-100: 100ms;
  --pz-d-150: 150ms;
  --pz-d-200: 200ms;
  --pz-d-300: 300ms;
  /* исключения слоя наград — см. DESIGN.md, раздел «Движение» */
  --pz-d-stamp: 450ms;
  --pz-d-coins: 600ms;
  --pz-d-level: 600ms;
  --pz-d-district: 700ms;
  --pz-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --pz-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --pz-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  /* штемпель: быстрое падение и мягкая посадка, без отскока */
  --pz-ease-stamp: cubic-bezier(0.5, 0, 0.75, 0);

  /* ---- Точки адаптивности (для справки, в media используются числа) ---- */
  --pz-vp-narrow: 375px;
  --pz-vp-medium: 768px;
  --pz-vp-wide: 1280px;
}

/* Вечерний режим: «синяя бумага» */
[data-pz-theme="night"] {
  --pz-paper: #1E2430;
  --pz-paper-2: #262D3B;
  --pz-paper-3: #2C3444;
  --pz-paper-sunk: #171C26;
  --pz-ink: #EFE8DA;
  --pz-ink-2: #D4CCBE;        /* ≥ 9:1 на бумаге */
  --pz-ink-3: #C0B8AA;        /* ≥ 7:1 на бумаге (D12) */
  --pz-line: rgba(239, 232, 218, 0.14);
  --pz-line-strong: rgba(239, 232, 218, 0.45); /* ≥ 3:1 для рамок кнопок (D12) */
  --pz-accent: #96C9AA;
  --pz-accent-hover: #A8D4B9;
  --pz-accent-press: #6AA080;
  --pz-accent-soft: #2B3D36;
  --pz-on-accent: #13201A;
  --pz-focus: #9CCBAE;
  --pz-gold: #E0B04F;
  --pz-gold-soft: #3D3422;
  --pz-gold-ink: #F0CB7A;
  --pz-brick: #EE9A84;
  --pz-brick-soft: #3E2A26;
  --pz-stamp: #B4B1EE;
  --pz-stamp-2: #EE9A84;
  --pz-scrim: rgba(8, 10, 16, 0.55);
  --pz-shadow-1: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --pz-shadow-2: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.28);
  --pz-shadow-3: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 40px rgba(0, 0, 0, 0.32);
}

@media (max-width: 767.98px) {
  :root {
    --pz-edge: 12px;
    --pz-minimap: 112px;
    --pz-compass: 48px;
  }
}