@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Цветовая палитра согласно дизайн-гайду */
    --color-background: #121212;
    --color-background-secondary: #1a1a1a;
    --color-text-primary: #ffffff;
    --color-text-secondary: #b1b1b1;
    
    /* Акцентные цвета */
    --color-accent-primary: #f2694c;
    --color-accent-success: #22c55e;
    --color-accent-info: #3b82f6;
    --color-accent-warning: #eab308;
    
    /* Градиенты */
    --gradient-accent: linear-gradient(135deg, #f2694c 0%, #ff8c42 100%);
    --gradient-hover: linear-gradient(135deg, rgba(242, 105, 76, 0.1) 0%, rgba(255, 140, 66, 0.05) 100%);
    
    /* Статусы мероприятий */
    --status-confirmed: #22c55e;
    --status-gathering: #3b82f6;
    --status-preliminary: #eab308;
    --status-full: #ef4444;
    --status-vip: #a855f7;
    
    /* Шрифты согласно дизайн-гайду */
    --font-heading: 'Unbounded', sans-serif;
    --font-body: 'Inter Tight', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    
    /* Spacing Scale */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    
    /* Border Radius согласно гайду */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
  }
  
  /* Применяем шрифты согласно дизайн-гайду */
  body {
    font-family: var(--font-body);
    background-color: var(--color-background);
    color: var(--color-text-primary);
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
  }
  
  .font-mono {
    font-family: var(--font-mono);
  }
}

@layer utilities {
  /* Минимальные анимации - только необходимые */
  @keyframes fade-in {
    0% { 
      opacity: 0; 
      transform: translateY(10px); 
    }
    100% { 
      opacity: 1; 
      transform: translateY(0); 
    }
  }

  .animate-fade-in {
    animation: fade-in 0.5s ease-out;
  }

  /* Card hover согласно гайду */
  .card-hover {
    transition: all var(--transition-base);
  }

  .card-hover:hover {
    transform: translateY(-4px);
    border-color: rgba(242, 105, 76, 0.5);
  }

  /* Кастомные цвета согласно дизайн-гайду */
  .bg-primary {
    background-color: var(--color-background);
  }
  
  .bg-secondary {
    background-color: var(--color-background-secondary);
  }
  
  .text-primary {
    color: var(--color-text-primary);
  }
  
  .text-secondary {
    color: var(--color-text-secondary);
  }
  
  .accent-primary {
    color: var(--color-accent-primary);
  }
  
  .bg-accent-primary {
    background-color: var(--color-accent-primary);
  }
  
  .border-accent-primary {
    border-color: var(--color-accent-primary);
  }
  
  /* Статусные цвета */
  .status-confirmed {
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--status-confirmed);
    border-color: rgba(34, 197, 94, 0.2);
  }
  
  .status-gathering {
    background-color: rgba(59, 130, 246, 0.1);
    color: var(--status-gathering);
    border-color: rgba(59, 130, 246, 0.2);
  }
  
  .status-full {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--status-full);
    border-color: rgba(239, 68, 68, 0.2);
  }
  
  /* Кнопки согласно дизайн-гайду */
  .btn-primary {
    background: var(--gradient-accent);
    color: white;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: all var(--transition-base);
    border: none;
  }
  
  .btn-primary:hover {
    background: linear-gradient(135deg, #e55a42 0%, #f77332 100%);
    box-shadow: 0 0 20px rgba(242, 105, 76, 0.3);
  }
  
  .btn-outline {
    background: transparent;
    color: var(--color-text-secondary);
    border: 2px solid #374151;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: all var(--transition-base);
  }
  
  .btn-outline:hover {
    border-color: rgba(242, 105, 76, 0.5);
    color: var(--color-accent-primary);
  }
  
  /* Карточки в стиле Corporate Minimalism */
  .card {
    background-color: var(--color-background-secondary);
    border: 1px solid #374151;
    border-radius: var(--radius-md);
    padding: var(--space-6);
  }
  
  .card:hover {
    border-color: rgba(242, 105, 76, 0.5);
  }
  
  /* Градиенты только для hero - согласно гайду */
  .hero-gradient {
    background: var(--gradient-accent);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* Кастомный скроллбар */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb {
  background: var(--color-accent-primary);
  border-radius: 4px;
  opacity: 0.5;
}

::-webkit-scrollbar-thumb:hover {
  opacity: 0.7;
}