/* ============================================================
 * 🎨 24G PREMIUM GAME DESIGN TOKENS — S37 Phase 1
 * ============================================================
 * NGUỒN SỰ THẬT DUY NHẤT cho màu / bo góc / bóng / nhịp animation
 * của toàn bộ Game Center. Mọi CSS mới PHẢI dùng token — không
 * hard-code màu lẻ tẻ. g24.css cũ được chuyển dần sang token theo
 * từng phase (không big-bang để không phá giao diện đang chạy).
 * Nạp TRƯỚC g24.css trong index.html.
 * ============================================================ */
:root {
  /* ---------- MÀU THƯƠNG HIỆU 24G ---------- */
  --g24-red:        #E60012;   /* đỏ chủ đạo — CẤM đổi */
  --g24-red-dark:   #B3000E;
  --g24-red-deep:   #7A0F1C;   /* nền sâu, viền đậm */
  --g24-red-light:  #FF4D4D;
  --g24-white:      #FFFFFF;
  --g24-gold:       #F5C518;   /* vàng kim — nhấn mạnh */
  --g24-gold-deep:  #C89B00;
  --g24-gold-soft:  #FFE9A8;
  --g24-cream:      #FFF6E9;   /* nền ấm */
  --g24-navy:       #1B2A4A;   /* chữ đậm / nền đêm */
  --g24-sky:        #CDEBFF;
  --g24-ink:        #2B1419;   /* chữ chính trên nền sáng */
  --g24-muted-2:    #8A7A7A;

  /* ngữ nghĩa (chỉ dùng khi cần đúng/sai) */
  --g24-ok:         #1F9D55;
  --g24-ok-soft:    #E8F5E9;
  --g24-bad:        #E60012;
  --g24-bad-soft:   #FFEBEE;

  /* ---------- BO GÓC ---------- */
  --game-radius-sm:  10px;
  --game-radius-md:  16px;
  --game-radius-lg:  22px;
  --game-radius-xl:  30px;
  --game-radius-pill: 999px;

  /* ---------- BÓNG / ÁNH SÁNG ---------- */
  --game-shadow-soft:  0 4px 14px rgba(43, 20, 25, .12);
  --game-shadow-deep:  0 12px 30px rgba(43, 20, 25, .22);
  --game-shadow-inner: inset 0 2px 6px rgba(43, 20, 25, .18);
  --game-glow-gold:    0 0 18px rgba(245, 197, 24, .55);
  --game-glow-red:     0 0 16px rgba(230, 0, 18, .35);
  /* cạnh 3D cho nút bấm (đè lên :active để "lún" xuống) */
  --game-edge:         0 5px 0;

  /* ---------- NHỊP ANIMATION (spec: 150-250 / 250-450 / 500-1000ms) ---------- */
  --game-transition-fast:   180ms cubic-bezier(.34, 1.56, .64, 1);  /* micro — có nảy */
  --game-transition-normal: 320ms cubic-bezier(.22, .8, .36, 1);    /* chuyển màn */
  --game-transition-slow:   700ms cubic-bezier(.22, .8, .36, 1);    /* ăn mừng */

  /* ---------- TYPOGRAPHY (đúng 2 font — không thêm) ---------- */
  --game-font-display: "Baloo 2", "Be Vietnam Pro", system-ui, sans-serif;
  --game-font-ui:      "Be Vietnam Pro", "Noto Sans SC", system-ui, sans-serif;

  /* ---------- SPACING (thang 4px) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* ---------- SAFE AREA (notch điện thoại) ---------- */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);

  /* ---------- GAME SURFACES (bề mặt chuẩn) ---------- */
  --surface-panel:  linear-gradient(180deg, #FFFFFF 0%, #FFF6E9 100%);
  --surface-red:    linear-gradient(180deg, #E60012 0%, #B3000E 100%);
  --surface-gold:   linear-gradient(180deg, #FFD54D 0%, #F5C518 60%, #E0A800 100%);
  --surface-night:  linear-gradient(180deg, #2A0A10 0%, #7A1420 100%);
  --surface-sky:    linear-gradient(180deg, #CDEBFF 0%, #EAF7FF 60%, #FFF3D6 100%);

  /* ---------- LỚP (z-index có kỷ luật) ---------- */
  --z-hud:      40;
  --z-bottomnav: 50;
  --z-modal:    80;
  --z-fx:       90;   /* canvas particle phủ trên cùng, không bắt chuột */
  --z-toast:    95;
}

/* Giảm chuyển động theo cài đặt hệ điều hành (accessibility) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --game-transition-fast:   1ms linear;
    --game-transition-normal: 1ms linear;
    --game-transition-slow:   1ms linear;
  }
}