/* ============================================================================
   YAVI · Дизайн-токены и базовая типографика
   ----------------------------------------------------------------------------
   Источник правды — yavi-design-system/project/colors_and_type.css.
   Подробности — docs/DESIGN.md и yavi-design-system/project/README.md.

   Vibe: «кинематографичная, тихая, интимная — почти-чёрная комната, освещённая
   латунной лампой». Серифы повсюду (Spectral + Caveat для брендового акцента).
   Никаких градиентов кроме чёрного фейда поверх фото. Никаких теней. Никаких
   hover-стейтов: только :active scale(0.985). Только mobile (360–430px).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=Caveat:wght@400;500;600;700&display=swap');

:root {
  color-scheme: dark;

  /* — Ink (фон — почти-чёрный с тёплым отливом, никогда чистого #000) — */
  --ink-0: #0B0907;   /* primary background */
  --ink-1: #15110D;   /* card / surface */
  --ink-2: #1E1813;   /* raised surface, инпуты */
  --ink-3: #2A211A;   /* press / lift */

  /* — Foreground (ivory family, никогда не #FFFFFF) — */
  --fg-1: #EDE3D2;    /* primary text */
  --fg-2: #C8B89A;    /* secondary text */
  --fg-3: #9C8B6E;    /* tertiary / captions */
  --fg-4: #6B5D49;    /* disabled / faint labels */

  /* — Brass («лампа» — основной акцент) — */
  --brass-100: #F0D9A7;   /* highlights inside brass */
  --brass-200: #D8B47A;   /* hover-ish (не используется в touch) */
  --brass-300: #C9A36A;   /* PRIMARY — иконки, контуры, заливка прогресса */
  --brass-400: #B8895C;   /* amber — заливка filled-кнопки */
  --brass-500: #8C6840;   /* pressed */
  --brass-600: #5A3F25;   /* deep — только декор */

  /* — Бордеры — */
  --line-faint: #3A2E20;   /* default */
  --line-brass: #6B5238;   /* active / selected */
  --line-strong: #8C6840;  /* emphasized (редко) */

  /* — Semantic — */
  --success: #4A8A5C;       /* deep forest — «завершено» */
  --success-bg: #1A3024;    /* completion banner bg */
  --success-fg: #B8D8C2;    /* текст на success-bg */
  --success-line: #2F5C3E;  /* зелёный бордер */

  /* — Brand red — ТОЛЬКО эмблема, никогда в UI — */
  --brand-red: #D63B3B;
  --brand-red-2: #B12A2A;

  /* — Scrim'ы для фото-фонов — */
  --scrim-top:    linear-gradient(180deg, rgba(11,9,7,0.0) 0%, rgba(11,9,7,0.85) 70%, rgba(11,9,7,1) 100%);
  --scrim-bottom: linear-gradient(0deg,   rgba(11,9,7,0.0) 0%, rgba(11,9,7,0.85) 70%, rgba(11,9,7,1) 100%);
  --scrim-full:   linear-gradient(180deg, rgba(11,9,7,0.5) 0%, rgba(11,9,7,0.5) 100%);

  /* — Семантические алиасы (используем в компонентах) — */
  --bg:                var(--ink-0);
  --bg-surface:        var(--ink-1);
  --bg-surface-raised: var(--ink-2);
  --text:              var(--fg-1);
  --text-muted:        var(--fg-2);
  --text-faint:        var(--fg-3);
  --text-disabled:     var(--fg-4);
  --accent:            var(--brass-300);
  --accent-pressed:    var(--brass-500);
  --border:            var(--line-faint);
  --border-active:     var(--line-brass);

  /* --------------------------------------------------------------------------
     Типографика — Spectral для всего, Caveat ТОЛЬКО для брендового акцента.
     Никаких sans-serif. Никаких системных шрифтов в основном тексте.
     -------------------------------------------------------------------------- */
  --font-serif:  'Spectral', 'PT Serif', Georgia, 'Times New Roman', serif;
  --font-script: 'Caveat', 'Comic Sans MS', cursive;     /* эмблема only */

  /* Type ramp (mobile, 360–430) */
  --t-display-2xl: 600 56px/1.05 var(--font-serif);  /* hero archetype */
  --t-display-xl:  500 40px/1.10 var(--font-serif);  /* «Архетипы», «КОД ИЗУЧЕН» */
  --t-display-lg:  500 32px/1.15 var(--font-serif);  /* archetype card title */
  --t-display-md:  500 28px/1.20 var(--font-serif);  /* h2 */

  --t-archetype:    italic 500 32px/1.10 var(--font-serif);
  --t-archetype-sm: italic 500 18px/1.20 var(--font-serif);
  --t-archetype-xs: italic 500 15px/1.25 var(--font-serif);

  --t-h1: 500 24px/1.25 var(--font-serif);
  --t-h2: 500 20px/1.30 var(--font-serif);
  --t-h3: 500 17px/1.35 var(--font-serif);

  --t-body-lg: 400 17px/1.50 var(--font-serif);
  --t-body:    400 15px/1.55 var(--font-serif);
  --t-body-sm: 400 14px/1.50 var(--font-serif);
  --t-caption: 400 12px/1.40 var(--font-serif);

  --t-label-lg: 500 14px/1.4 var(--font-serif);   /* «ДОСЬЕ ПЕРСОНАЖА» */
  --t-label:    500 12px/1.4 var(--font-serif);   /* «СЕГОДНЯ» */
  --t-label-sm: 500 11px/1.3 var(--font-serif);   /* «ДЕНЬ» / tab */

  --t-cta:     500 15px/1 var(--font-serif);
  --t-cta-sm:  500 13px/1 var(--font-serif);

  --t-num-xl:  300 56px/1 var(--font-serif);      /* «14 / 30» */
  --t-num-md:  400 16px/1 var(--font-serif);
  --t-num-sm:  400 12px/1 var(--font-serif);

  --t-script-lg: 600 36px/0.95 var(--font-script);
  --t-script-md: 600 24px/0.95 var(--font-script);

  /* Tracking */
  --tracking-tight:   -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.08em;
  --tracking-wider:    0.16em;   /* uppercase-tracked labels */
  --tracking-widest:   0.24em;   /* tab labels, slide numbers */

  /* --------------------------------------------------------------------------
     Spacing & geometry (4-pt scale)
     -------------------------------------------------------------------------- */
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  8px;
  --space-4:  12px;
  --space-5:  16px;
  --space-6:  20px;    /* screen edge padding, card inner padding */
  --space-7:  24px;
  --space-8:  32px;    /* default vertical rhythm */
  --space-9:  40px;
  --space-10: 56px;

  /* Radii */
  --r-xs:   4px;
  --r-sm:   8px;       /* инпуты, small buttons */
  --r-md:   12px;      /* default card */
  --r-lg:   16px;      /* hero card */
  --r-xl:   20px;
  --r-pill: 999px;

  /* Heights */
  --h-input:   48px;
  --h-button:  56px;
  --h-tabbar:  72px;
  --h-header:  56px;

  /* Mobile viewport bounds (для гайдов; реально на больших экранах центрируем колонку) */
  --viewport-min: 360px;
  --viewport-max: 430px;

  --safe-top:    max(20px, env(safe-area-inset-top));
  --safe-bottom: max(8px,  env(safe-area-inset-bottom));

  /* --------------------------------------------------------------------------
     Backward-compat aliases — старые имена → новые токены.
     Удалить, когда все screens пересобраны под Yavi-токены.
     -------------------------------------------------------------------------- */
  --bg-base:           var(--ink-0);
  --bg-elevated:       var(--ink-1);
  --bg-card:           var(--ink-1);
  --bg-card-completed: var(--success-bg);

  --border-subtle: var(--line-faint);
  --border-strong: var(--line-brass);

  --text-primary:    var(--fg-1);
  --text-secondary:  var(--fg-2);
  /* --text-muted уже определён выше */
  --text-on-accent:  var(--ink-0);

  --accent-brass:    var(--brass-300);
  --accent-brass-hi: var(--brass-200);
  --accent-brass-lo: var(--brass-500);

  --accent-green:      var(--success);
  --accent-green-soft: var(--success-bg);
  --accent-red-vinyl:  var(--brand-red);

  --overlay-strong: rgba(11, 9, 7, 0.85);
  --overlay-soft:   rgba(11, 9, 7, 0.50);

  --radius-card:   var(--r-md);
  --radius-button: var(--r-sm);
  --radius-input:  var(--r-sm);
  --radius-pill:   var(--r-pill);

  /* Старый алиас был --font-sans → теперь serif, потому что система serif-only. */
  --font-sans: var(--font-serif);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--t-body);
  font-feature-settings: 'liga', 'kern', 'onum' 1;   /* old-style figures по умолчанию */
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
}

#app {
  min-height: 100dvh;
}

button {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
a:active { color: var(--brass-200); }

h1, h2, h3, p { margin: 0; }

::selection {
  background: var(--brass-300);
  color: var(--ink-0);
}

/* === Типографические утилиты (Yavi-канон) ================================== */

.yv-uppercase { text-transform: uppercase; letter-spacing: var(--tracking-wider); }

.yv-label {
  font: var(--t-label);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}
.yv-label-sm {
  font: var(--t-label-sm);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}
.yv-label-lg {
  font: var(--t-label-lg);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.yv-archetype    { font: var(--t-archetype); color: var(--text); }
.yv-archetype-sm { font: var(--t-archetype-sm); color: var(--text); }

.yv-script {
  font: var(--t-script-md);
  color: var(--brand-red);
  font-style: italic;
}

.yv-num {
  font: var(--t-num-md);
  color: var(--text-faint);
  letter-spacing: var(--tracking-widest);
  font-variant-numeric: tabular-nums;
}

/* Старые алиасы, чтобы не сломать существующую разметку до перепрошивки экранов */
.h1-archetype {
  font: var(--t-archetype);
  color: var(--text);
  text-transform: lowercase;
}
.eyebrow {
  display: inline-block;
  font: var(--t-label);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}
.caption {
  font: var(--t-caption);
  color: var(--text-faint);
}

/* === Контейнер страницы ==================================================== */

.page {
  max-width: var(--viewport-max);
  margin: 0 auto;
  padding: var(--safe-top) var(--space-6) calc(var(--space-9) + var(--safe-bottom));
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

/* Reduce-motion: уважаем системные предпочтения */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}