/* Токены дизайна — копия docs/design.md §1–3, §5. Компоненты используют только их. */

@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/onest-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/onest-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; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url(../fonts/unbounded-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url(../fonts/unbounded-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,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #110E1B; --surface: #1C1730; --surface-2: #262040; --surface-ledge: #0B0913; --border: #342C55;
  --text: #F4F1FF; --text-muted: #A9A1C9; --text-faint: #6E6690;
  --primary: #6B4BFF; --primary-ledge: #3F25B8; --primary-soft: #2A2160; --primary-text: #C4B5FF; --on-primary: #FFFFFF;
  --accent: #FF5CA8; --accent-ledge: #B8306F; --on-accent: #1A1530; --accent-text: #FF5CA8;
  --xp: #FFD447; --xp-ledge: #C49A12; --on-xp: #1A1530; --xp-text: #FFD447;
  --success: #2FE0A0; --success-ledge: #12936A; --on-success: #06291D; --success-bg: #0F3A2D; --success-text: #5CF2BE;
  --oops: #FFB547; --oops-ledge: #B87313; --on-oops: #1A1530; --oops-bg: #3D2A0E; --oops-text: #FFC870;
  --locked: #2E2848; --focus-ring: #FFD447; --scrim: rgb(5 3 12 / .6);
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #F6F3FF; --surface: #FFFFFF; --surface-2: #EEE9FF; --surface-ledge: #DDD5FA; --border: #DDD5FA;
  --text: #1A1530; --text-muted: #5E5680; --text-faint: #8F88AD;
  --primary: #6B4BFF; --primary-ledge: #4A2FD0; --primary-soft: #E7E0FF; --primary-text: #5B3DF0; --on-primary: #FFFFFF;
  --accent: #FF5CA8; --accent-ledge: #D63A85; --on-accent: #1A1530; --accent-text: #C42A77;
  --xp: #FFD447; --xp-ledge: #D9A916; --on-xp: #1A1530; --xp-text: #8F6900;
  --success: #2FE0A0; --success-ledge: #14A877; --on-success: #06291D; --success-bg: #DDFBEF; --success-text: #046C4A;
  --oops: #FFB547; --oops-ledge: #D98A1E; --on-oops: #1A1530; --oops-bg: #FFF1DB; --oops-text: #8A4B00;
  --locked: #E4DFF5; --focus-ring: #5B3DF0; --scrim: rgb(26 21 48 / .4);
}

:root {
  --font-display: "Unbounded", "Onest", system-ui, sans-serif;
  --font-body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --grad-hero: linear-gradient(135deg, #6B4BFF 0%, #B04BFF 55%, #FF5CA8 100%);

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --screen-pad: 20px;
  --r-sm: 12px; --r-md: 16px; --r-lg: 18px; --r-xl: 24px; --r-full: 999px;
  --ledge: 4px; --ledge-sm: 3px;
  --shadow-float: 0 -12px 32px -8px rgb(10 6 30 / .45);

  /* Безопасные зоны: системные (PWA/Safari) или от Telegram (Bot API 8.0: зона устройства + зона кнопок Telegram) */
  --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)));

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --d-press: 80ms; --d-fast: 160ms; --d-base: 240ms; --d-slow: 420ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .confetti { display: none; }
}