/**
 * Design Tokens — Cinematic Dark Luxury
 * Thương hiệu: Khánh Linh
 * Vị trí: assets/css/tokens.css
 */

:root {
  /* Color Palette - HSL Tailored */
  --bg-0: hsl(30, 12%, 4%);
  --bg-1: hsl(30, 10%, 7%);
  --bg-2: hsl(30, 10%, 11%);
  --bg-card: rgba(22, 19, 16, 0.78);
  --bg-card-hover: rgba(30, 26, 22, 0.9);

  /* Glassmorphism Surface Tokens */
  --surface-glass: rgba(255, 235, 210, 0.04);
  --surface-border: rgba(245, 197, 66, 0.16);
  --surface-border-hover: rgba(245, 197, 66, 0.55);
  --glass-blur: blur(16px);
  --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);

  /* Gold Metallic Tokens */
  --gold-50: hsl(44, 90%, 92%);
  --gold-100: hsl(44, 85%, 85%);
  --gold-200: hsl(44, 75%, 76%);
  --gold-300: hsl(42, 75%, 66%);
  --gold-400: hsl(42, 78%, 56%);
  --gold-500: hsl(40, 82%, 48%);
  --gold-600: hsl(36, 78%, 38%);
  --gold-gradient: linear-gradient(135deg, hsl(44, 85%, 72%) 0%, hsl(36, 75%, 46%) 50%, hsl(44, 85%, 68%) 100%);
  --gold-gradient-hover: linear-gradient(135deg, hsl(44, 90%, 78%) 0%, hsl(36, 80%, 52%) 50%, hsl(44, 90%, 74%) 100%);
  --gold-glow: 0 0 32px rgba(245, 197, 66, 0.28);
  --gold-glow-intense: 0 0 45px rgba(245, 197, 66, 0.45);

  /* Typography Colors */
  --text-1: hsl(40, 25%, 96%);
  --text-2: hsl(35, 12%, 72%);
  --text-muted: hsl(35, 8%, 50%);

  /* Functional Status Colors */
  --success: hsl(150, 70%, 45%);
  --danger: hsl(350, 75%, 58%);
  --telegram-color: #229ed9;
  --zalo-color: #0068ff;

  /* VIP Tier Colors */
  --tier-bronze: #c97d42;
  --tier-silver: #b0b8c4;
  --tier-gold: #f5c542;
  --tier-platinum: #8fe3db;
  --tier-diamond: #68c5ff;
  --tier-legend: #ff5470;

  /* Typography */
  --font-body: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;

  /* Spacing Scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Transitions */
  --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.5s cubic-bezier(0.16, 1, 0.3, 1);

  /* Container width */
  --container-max: 1200px;
}