/* Фаза 1: токены design.md (светлая тема) + производная тёмная тема. Шрифт — Exo 2 (как в Tamagotchi-RPG), свой хостинг. */
@font-face {
  font-family: 'Exo 2'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/assets/fonts/exo2-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Exo 2'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/assets/fonts/exo2-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font: 'Exo 2', system-ui, sans-serif;
  /* размеры и ритм (design.md: база 4px, карточки 32px, секции 104px) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s14: 56px; --s26: 104px;
  --r-nav: 6px; --r-card: 10px; --r-panel: 12px; --r-float: 17px; --r-pill: 32px; --r-avatar: 40px;
  --wrap: 1072px;
  --hdr-h: 64px;
  --tab-h: 60px;
  --drawer-w: min(320px, 86vw);
  --rail-w: 76px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 160ms; --t-med: 260ms;
  /* safe area: системная + Telegram (переменные ставит telegram-web-app.js) */
  --safe-top: max(env(safe-area-inset-top, 0px), calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), calc(var(--tg-safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px)));
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  /* шкала текста (clamp — плавно между телефоном и ПК) */
  --fs-display: clamp(36px, 5.2vw + 14px, 68px);
  --fs-heading: clamp(28px, 2.6vw + 16px, 44px);
  --fs-card: clamp(19px, .6vw + 16px, 23px);
  --fs-lead: clamp(17px, .3vw + 16px, 19px);
  --fs-body: 17px; --fs-label: 15px; --fs-eyebrow: 14px; --fs-meta: 13px; --fs-tab: 11px;
}

/* Светлая тема — дословно design.md. Pebble Gray для мелкого текста чуть темнее (#75736f) ради контраста WCAG AA. */
:root, [data-theme="light"] {
  color-scheme: light;
  --paper: #ffffff; --canvas: #fbfaf9; --oat: #f6f4ee; --oat-hover: #efece4; --line: #f2f0ed;
  --ink: #121212; --text: #474645; --muted: #75736f; --fog: #a7a7a7; --charcoal: #343433;
  --pill: #171717; --pill-hover: #2b2b2b; --pill-text: #ffffff;
  --blue: #0086fc; --orange: #ff3e00; --mint: #00a865; --gold: #b87c00; --sky: #64c6ff; --butter: #ffcd6c;
  --hdr-bg: rgba(255, 255, 255, .86);
  --scrim: rgba(18, 18, 18, .32);
  --focus: #0086fc;
  --ring: inset 0 0 0 1px var(--line);
  --glow: 0 1px 6px rgba(0, 0, 0, .04), 0 0 24px rgba(0, 0, 0, .05);
  --halo: 0 0 24px rgba(0, 0, 0, .15);
}

/* Тёмная тема: те же роли, тёплые нейтрали вместо холодного серого, акценты чуть светлее. */
[data-theme="dark"] {
  color-scheme: dark;
  --paper: #121212; --canvas: #1a1918; --oat: #262523; --oat-hover: #302f2c; --line: #2b2a28;
  --ink: #f4f2ee; --text: #cfccc7; --muted: #9a9792; --fog: #7c7975; --charcoal: #e6e3de;
  --pill: #f6f4ee; --pill-hover: #ffffff; --pill-text: #121212;
  --blue: #47a8ff; --orange: #ff6a3d; --mint: #2bd890; --gold: #f0aa1f; --sky: #7dd0ff; --butter: #ffd483;
  --hdr-bg: rgba(18, 18, 18, .84);
  --scrim: rgba(0, 0, 0, .55);
  --focus: #47a8ff;
  --ring: inset 0 0 0 1px var(--line);
  --glow: 0 1px 6px rgba(0, 0, 0, .35), 0 0 24px rgba(0, 0, 0, .4);
  --halo: 0 0 24px rgba(0, 0, 0, .5);
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    color-scheme: dark;
    --paper: #121212; --canvas: #1a1918; --oat: #262523; --oat-hover: #302f2c; --line: #2b2a28;
    --ink: #f4f2ee; --text: #cfccc7; --muted: #9a9792; --fog: #7c7975; --charcoal: #e6e3de;
    --pill: #f6f4ee; --pill-hover: #ffffff; --pill-text: #121212;
    --blue: #47a8ff; --orange: #ff6a3d; --mint: #2bd890; --gold: #f0aa1f; --sky: #7dd0ff; --butter: #ffd483;
    --hdr-bg: rgba(18, 18, 18, .84);
    --scrim: rgba(0, 0, 0, .55);
    --focus: #47a8ff;
    --glow: 0 1px 6px rgba(0, 0, 0, .35), 0 0 24px rgba(0, 0, 0, .4);
    --halo: 0 0 24px rgba(0, 0, 0, .5);
  }
}

@media (min-width: 1024px) { :root { --hdr-h: 72px; } }