/* Design token. Mọi màu của dự án CHỈ được định nghĩa ở đây; file khác dùng var(--…).
   Bảng màu lấy theo tông pixel-art: nền xanh biển, bảng gỗ, panel xanh mòng két,
   viền tối dày đặc trưng của pixel art. */

:root {
  /* --- Dark mode (mặc định) --- */
  --bg: #16202e;
  --bg-elevated: #24384a;
  --bg-hover: #2f4a5f;
  --text: #f2f7fa;
  --text-muted: #9fb8c8;

  /* Pixel art nào cũng có viền tối. Border và shadow đều dùng màu này, không
     dùng màu nhạt — nhạt là mất hẳn nét pixel. */
  --border: #0b131c;
  --pixel-outline: #0b131c;

  --accent: #f5c542;
  --accent-hover: #ffd75e;
  --accent-text: #16202e;

  --shadow-card: #0b131c;
  --shadow-card-hover: #0b131c;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 64px;

  /* Radius — pixel art không có góc bo. Giữ biến để file khác không phải sửa. */
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;

  /* Độ dày viền và độ lệch bóng cứng */
  --pixel-border: 3px;
  --pixel-shadow: 5px;

  /* VT323 la font pixel DUY NHAT trong 4 font duoc yeu cau co bo tieng Viet
     (da kiem Google Fonts API: Press Start 2P / Pixelify Sans / Silkscreen deu
     thieu subset vietnamese). Nen VT323 lam font chinh, Press Start 2P chi
     dung qua class .font-display cho chu chac chan khong dau. */
  --font-pixel: 'VT323', 'Courier New', monospace;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

  --t-fast: 90ms;
  --t-base: 140ms;

  /* Màu riêng cho từng thể loại: trẻ chưa đọc thạo vẫn nhận ra nhóm game qua
     màu và icon. Chỉnh theo tông pixel, đậm hơn bản cũ để nổi trên viền tối. */
  --wood: #d9b382;
  --cat-all: #8fd4e8;
  --cat-action: #e8503f;
  --cat-arcade: #f08a2c;
  --cat-puzzle: #3d9be0;
  --cat-racing: #e8609b;
  --cat-sports: #4fbf5c;
  --cat-girls: #c76ce0;
  --cat-io: #2bb3c4;
  --cat-board: #8d7de8;
  --cat-kids: #f5c542;
  --cat-other: #7f9bb0;
}

[data-theme="light"] {
  /* --- Light mode: nền trời, bảng gỗ như trong ảnh mẫu --- */
  --bg: #a6dced;
  --bg-elevated: #e9d5ae;
  --bg-hover: #d9bd8b;
  --text: #16202e;
  --text-muted: #4a6272;

  --border: #16202e;
  --pixel-outline: #16202e;

  --accent: #e08a1e;
  --accent-hover: #f5a53a;
  --accent-text: #16202e;
  --wood: #e9d5ae;

  --shadow-card: #16202e;
  --shadow-card-hover: #16202e;
}