/* ============================================
   WaveWay x CHILL — CSS Custom Properties
   Тёмная тема (по умолчанию) + Светлая тема
   ============================================ */

:root {
  /* === Цветовая палитра — Тёмная тема === */
  --bg-primary: #0A0A1A;
  --bg-secondary: #0F0F2A;
  --bg-tertiary: #1A1A2E;
  --bg-card: rgba(26, 26, 46, 0.7);
  --bg-card-hover: rgba(36, 36, 66, 0.8);
  --bg-glass: rgba(26, 26, 46, 0.4);
  --bg-glass-border: rgba(255, 255, 255, 0.08);
  --bg-input: rgba(15, 15, 42, 0.6);
  --bg-nav: rgba(10, 10, 26, 0.95);

  /* Текст */
  --text-primary: #E8E6E3;
  --text-secondary: #A0A0B8;
  --text-muted: #8585A0;
  --text-accent: #D4A574;
  --text-inverse: #0A0A1A;

  /* Акценты — Раста-палитра */
  --accent-gold: #D4A574;
  --accent-amber: #E8B86D;
  --accent-warm: #C4956A;
  --accent-green: #4CAF50;
  --accent-green-soft: #66BB6A;
  --accent-red: #E57373;
  --accent-red-soft: #EF5350;
  --accent-rasta-green: #2E7D32;
  --accent-rasta-gold: #F9A825;
  --accent-rasta-red: #C62828;

  /* Состояния */
  --color-success: #66BB6A;
  --color-info: #64B5F6;
  --color-warning: #FFB74D;
  --color-error: #EF5350;

  /* Настроение — градиент от 1 до 10 */
  --mood-1: #E53935;
  --mood-2: #F4511E;
  --mood-3: #FB8C00;
  --mood-4: #FFB300;
  --mood-5: #FDD835;
  --mood-6: #C0CA33;
  --mood-7: #7CB342;
  --mood-8: #43A047;
  --mood-9: #00897B;
  --mood-10: #1E88E5;

  /* Тени */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px rgba(212, 165, 116, 0.15);
  --shadow-glow-strong: 0 0 30px rgba(212, 165, 116, 0.25);

  /* Glassmorphism */
  --glass-blur: 16px;
  --glass-bg: rgba(26, 26, 46, 0.4);
  --glass-border: 1px solid rgba(255, 255, 255, 0.08);
  --glass-border-hover: 1px solid rgba(255, 255, 255, 0.15);

  /* === Типографика === */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-handwritten: 'Caveat', cursive;

  --fs-xs: 0.75rem;    /* 12px */
  --fs-sm: 0.875rem;   /* 14px */
  --fs-base: 1rem;     /* 16px */
  --fs-md: 1.125rem;   /* 18px */
  --fs-lg: 1.25rem;    /* 20px */
  --fs-xl: 1.5rem;     /* 24px */
  --fs-2xl: 2rem;      /* 32px */
  --fs-3xl: 2.5rem;    /* 40px */
  --fs-4xl: 3rem;      /* 48px */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.75;

  /* === Отступы и размеры === */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Навигация */
  --sidebar-width: 260px;
  --bottom-nav-height: 64px;
  --header-height: 0px;

  /* Анимации */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-page: 300ms ease-in-out;

  /* Z-index */
  --z-base: 1;
  --z-nav: 100;
  --z-modal: 200;
  --z-toast: 300;
  --z-overlay: 150;
}

/* === Светлая тема === */
[data-theme="light"] {
  --bg-primary: #F5F3EF;
  --bg-secondary: #EDE9E3;
  --bg-tertiary: #E5E0D8;
  --bg-card: rgba(255, 255, 255, 0.8);
  --bg-card-hover: rgba(255, 255, 255, 0.95);
  --bg-glass: rgba(255, 255, 255, 0.5);
  --bg-glass-border: rgba(0, 0, 0, 0.08);
  --bg-input: rgba(255, 255, 255, 0.7);
  --bg-nav: rgba(245, 243, 239, 0.95);

  --text-primary: #1A1A2E;
  --text-secondary: #4A4A5A;
  --text-muted: #6E6E80;
  --text-accent: #8B5E3C;
  --text-inverse: #F5F3EF;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 20px rgba(139, 94, 60, 0.1);
  --shadow-glow-strong: 0 0 30px rgba(139, 94, 60, 0.15);

  --glass-bg: rgba(255, 255, 255, 0.5);
  --glass-border: 1px solid rgba(0, 0, 0, 0.08);
  --glass-border-hover: 1px solid rgba(0, 0, 0, 0.15);
}

/* === Плавный переход при смене темы === */
html,
body,
.sidebar,
.bottom-nav,
.card,
.modal,
.toast,
.nav-item,
.bottom-nav__item,
.form-input,
.form-textarea,
.form-select,
.btn,
.tag,
.progress-bar,
.page-title,
.page-subtitle,
h1, h2, h3, h4, h5, h6, p, a {
  transition:
    background-color var(--transition-slow),
    color var(--transition-slow),
    border-color var(--transition-slow),
    box-shadow var(--transition-slow);
}