/* =====================================================================
   🎨 Aura Gift — дизайн-токены (этап 9). Единственное место, где задаются цвета, шрифты, размеры, отступы,
   радиусы, тени, слои z-index, длительности и кривые движения. В style.css и в компонентах — только var(--…).
   Каталог компонентов: /catalog.html. Темы событий меняют здесь акценты: [data-theme="halloween"], [data-theme="newyear"].
   ===================================================================== */
:root {
  /* ✨ Aura: фиолетовое сияние + золото. Два фирменных цвета — --aura1 (сияние) и --aura2 (золото) */
  --aura1: #9b5cff;
  --aura1-rgb: 155, 92, 255;
  --aura2: #f5c451;
  --aura2-rgb: 245, 196, 81;
  --aura3: #58d4ff;            /* холодный отблеск авроры — только в фоне */

  --bg: #0c0920;
  --bar-bg: rgba(16, 11, 38, .82);
  --surface: #191233;
  --surface-2: #241a47;
  --line: rgba(196, 170, 255, .10);
  --text: #f5f0ff;
  --muted: #a49ac8;
  --accent: var(--aura2);
  --accent-soft: rgba(var(--aura2-rgb), .14);
  --gold: var(--aura2);
  --win: #34d399;
  --lose: #fb7185;
  --glow: 0 14px 34px -20px rgba(var(--aura1-rgb), .9);

  --r-none: #3f3a55;
  --r-common: #7c7799;
  --r-uncommon: #3b82f6;
  --r-rare: #a855f7;
  --r-epic: #ec4899;
  --r-legendary: #f59e0b;
  --r-nft: var(--aura2);
  --r-coin: #b8700f;           /* плитка монеты: свой тёплый оттенок, не серый «обычный» */

  --radius: 18px;
  --tabbar-h: 76px;
  --display: "Unbounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ——— шрифты и размеры текста ——— */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --fs-xs: 11px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 26px;

  /* ——— отступы (шаг 4px) ——— */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;

  /* ——— радиусы ——— */
  --r-xs: 6px; --r-sm: 12px; --r-md: 14px; --r-lg: 16px; --r-pill: 99px;   /* --radius (18px) — карточки */

  /* ——— тени ——— */
  --shadow-1: 0 4px 14px -6px rgba(0, 0, 0, .45);
  --shadow-2: 0 14px 34px -18px rgba(0, 0, 0, .7);

  /* ——— слои (z-index): чем выше — тем поверх ——— */
  --z-raised: 2; --z-sticky: 20; --z-select: 25; --z-tabbar: 30; --z-flash: 40; --z-modal: 50; --z-modal-top: 60;
  --z-toast: 70; --z-fuse: 75; --z-coach: 90; --z-pop: 95; --z-maint: 100; --z-moment: 110; --z-particles: 115;
  --z-juice: 120; --z-splash: 200; --z-terms: 9999;

  /* ——— движение ——— */
  --cls-power: #ff8a5c; --cls-magic: #a88bff; --cls-agile: #4fe3a8;   /* цвета классов карт Арены */
  --dur-press: 90ms; --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 420ms; --dur-peak: 900ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.2, 1.4, .4, 1);
  --ease-in-out: cubic-bezier(.45, 0, .2, 1);

  /* ——— зона нажатия (доступность) ——— */
  --tap: 44px;
}

/* 🎃 темы событий (включаются в веб-админке → Настройки → theme_event): меняют акценты, фон и частицы */
[data-theme="halloween"] { --aura1: #ff7a1a; --aura1-rgb: 255, 122, 26; --aura3: #7c3aed; --bg: #0f0a14; --surface: #1b1222; --surface-2: #2a1a33; }
[data-theme="newyear"] { --aura1: #4fb3ff; --aura1-rgb: 79, 179, 255; --aura3: #a7f3ff; --bg: #08101f; --surface: #101a33; --surface-2: #182848; }