/* ============================================
   TOVARIUM — CSS ЗМІННІ ТА ТЕМИ
   Тут зберігаються ВСІ кольори, шрифти, розміри.
   Інші CSS файли використовують ці змінні через var(--name)
   ============================================ */

/* Імпорт шрифтів */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@300;400;500;600;700;800;900&family=Montserrat:wght@300;400;500;600;700&display=swap');

/* Спільні змінні (не залежать від теми) */
:root {
  /* Неонові кольори */
  --neon-blue: #00d4ff;
  --neon-pink: #ff00e5;
  --neon-purple: #7b2fff;
  --neon-cyan: #00ffd5;
  --neon-violet: #a855f7;

  /* Свічення */
  --glow-blue: rgba(0, 212, 255, 0.3);
  --glow-pink: rgba(255, 0, 229, 0.3);
  --glow-purple: rgba(123, 47, 255, 0.3);

  /* Градієнти */
  --gradient-main: linear-gradient(135deg, #00d4ff, #7b2fff, #ff00e5);
  --gradient-btn: linear-gradient(135deg, #00d4ff, #7b2fff);
  --gradient-btn-hover: linear-gradient(135deg, #7b2fff, #ff00e5);
  --gradient-accent: linear-gradient(135deg, #00ffd5, #00d4ff);

  /* Шрифти */
  --font-heading: 'Unbounded', sans-serif;
  --font-body: 'Montserrat', sans-serif;

  /* Закруглення */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Тіні */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.12);
  --shadow-glow-blue: 0 0 20px rgba(0, 212, 255, 0.25);
  --shadow-glow-purple: 0 0 20px rgba(123, 47, 255, 0.25);

  /* Анімації */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-індекси (щоб не заплутатись що зверху що знизу) */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-overlay: 1000;
  --z-modal: 1001;
  --z-toast: 5000;
  --z-preloader: 9999;
  --z-tooltip: 6000;
}

/* ============================================
   СВІТЛА ТЕМА (по замовчуванню)
   ============================================ */
[data-theme="light"] {
  --bg-primary: #f0f2f7;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f5f6fa;
  --bg-hover: #eef0f5;
  --bg-active: #e4e6ee;

  --text-primary: #1a1a2e;
  --text-secondary: #5a5d7a;
  --text-muted: #9ca3af;
  --text-inverse: #ffffff;

  --border-primary: #e2e5ee;
  --border-secondary: #d1d5e0;
  --border-hover: #c0c4d0;

  --surface-card: #ffffff;
  --surface-sidebar: #ffffff;
  --surface-input: #f5f6fa;
  --surface-overlay: rgba(255, 255, 255, 0.85);
  --surface-backdrop: rgba(15, 16, 35, 0.4);
}

/* ============================================
   ТЕМНА ТЕМА
   ============================================ */
[data-theme="dark"] {
  --bg-primary: #0f1023;
  --bg-secondary: #1a1b35;
  --bg-tertiary: #1e1f3a;
  --bg-hover: #252648;
  --bg-active: #30315a;

  --text-primary: #e8e9f3;
  --text-secondary: #9b9cb8;
  --text-muted: #6b6d8a;
  --text-inverse: #0f1023;

  --border-primary: #2a2b4a;
  --border-secondary: #3a3b5a;
  --border-hover: #4a4b6a;

  --surface-card: #1a1b35;
  --surface-sidebar: #14152a;
  --surface-input: #1e1f3a;
  --surface-overlay: rgba(15, 16, 35, 0.9);
  --surface-backdrop: rgba(0, 0, 0, 0.6);
}