/**Chỉ chứa biến màu sắc, font chữ, theme (Light/Dark).
 * ============================================
 * STYLE.CSS - Rạp Chiếu Phim Blockchain
 * ============================================
 * Phong cách: Netflix + Cyberpunk
 * Hỗ trợ: Dark/Light Theme, Responsive============================================
 *  CSS VARIABLES - DỄ DÀNG TÙY CHỈNH MÀU SẮC
   ============================================ **/
:root {
  /* Dark Theme (Mặc định) */
  --bg-primary: #0a0a0f;
  --bg-secondary: #1a1a2e;
  --bg-tertiary: #16213e;
  --bg-card: rgba(26, 26, 46, 0.8);
  --bg-glass: rgba(26, 26, 46, 0.6);

  /* Accent Colors (BLUE THEME - HIỆN ĐẠI & TINH TẾ) */
  --accent-primary: #4db8ff; /* Xanh lơ nhạt (Main) */
  --accent-secondary: #007aff; /* Xanh dương đậm (Accent) */
  --accent-tertiary: #80d4ff; /* Xanh ngọc sáng */
  
  /* Gradient xanh hiện đại */
  --accent-gradient: linear-gradient(135deg, #007aff 0%, #4db8ff 100%);
  
  /* Gradient Neon (Xanh nhạt -> Xanh dương) */
  --accent-neon: linear-gradient(135deg, #4db8ff, #007aff);

  /* Text Colors */
  --text-primary: #ffffff;
  --text-secondary: #b0b0b0;
  --text-muted: #666666;

  /* Status Colors */
  --success: #00ff88;
  --warning: #ffaa00;
  --error: #ff4444;
  --info: #00d4ff;

  /* Shadows & Effects */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
  --shadow-neon: 0 0 20px rgba(77, 184, 255, 0.5); /* #4db8ff */
  --shadow-red: 0 0 20px rgba(0, 122, 255, 0.5); /* Đổi sang màu xanh #007aff để match theme */

  /* Border */
  --border-color: rgba(255, 255, 255, 0.1);
  --border-radius: 12px;
  --border-radius-sm: 8px;
  --border-radius-lg: 20px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;

  /* Font Sizes */
  --font-xs: 12px;
  --font-sm: 14px;
  --font-md: 16px;
  --font-lg: 18px;
  --font-xl: 24px;
  --font-xxl: 32px;
  --font-hero: 48px;
}

/* Light Theme */
/* Light Theme (Đã Fix lỗi hiển thị & Tăng tương phản) */
[data-theme="light"] {
  --bg-primary: #e9ebee; /* Nền xám mát dịu mắt (giảm chói) */
  --bg-secondary: #ffffff; /* Card vẫn giữ trắng để nổi bật */
  --bg-tertiary: #d8dadf; /* Input/Button xám rõ hơn */
  --bg-card: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.95); /* Giảm độ trong suốt để text rõ hơn */

  --text-primary: #000000; /* Đen tuyệt đối cho tiêu đề */
  --text-secondary: #333333; /* Xám đậm (gần như đen) cho nội dung phụ */
  --text-muted: #555555; /* Xám vừa phải, không quá mờ */

  /* Status Colors cho Light Mode (tối hơn để dễ đọc, tránh chói) */
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;

  --border-color: rgba(0, 0, 0, 0.2); /* Viền đậm hơn giúp phân tách rõ ràng */

  /* Shadow đậm hơn chút để tạo chiều sâu trên nền sáng */
  --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.2);
  --shadow-neon: 0 0 15px rgba(0, 150, 255, 0.5); /* Blue highlight rõ hơn */
  --shadow-red: 0 0 15px rgba(0, 122, 255, 0.5); /* Đổi sang xanh lam */
}