/* ============================================
   BASE.CSS — Variables, Reset, Typography, Animations
   Dịch Quẻ · I Ching Oracle
============================================ */

/* ── CSS VARIABLES ── */
:root {
  --bg: #f5f2ec;
  --bg2: #eceae3;
  --surface: #ffffff;
  --border: #d8d4cc;
  --border-light: #e8e5de;
  --text: #1a1814;
  --text2: #3a3830;
  --text3: #9a958e;
  --accent: #1a1814;
  --accent-soft: #2d2a24;
  --gold: #b8924a;
  --gold-light: #d4aa6a;
  --gold-hao: #c9a050;
  --red: #8b2020;
  --shadow: 0 1px 3px rgba(26,24,20,0.08);
  --shadow-md: 0 4px 16px rgba(26,24,20,0.10);
  --shadow-lg: 0 8px 32px rgba(26,24,20,0.14);
  --radius: 12px;
  --radius-sm: 6px;
  --transition: 0.2s ease;
  --font-serif: 'Cormorant Garamond', 'Noto Serif SC', serif;
  --font-sans: 'Noto Sans SC', sans-serif;
}

[data-theme="dark"] {
  --bg: #1e1b16;
  --bg2: #252118;
  --surface: #2e2a22;
  --border: #3a3628;
  --border-light: #322e26;
  --text: #f8f4ec;
  --text2: #d8d0c4;
  --text3: #908880;
  --gold: #e8b85a;
  --gold-light: #a07830;
  --gold-hao: #e8b85a;
  --red: #e86060;
  --shadow: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
}

/* ── RESET ── */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  transition: background 0.3s, color 0.3s;
  overflow-x: hidden;
  font-size: 15px;
  line-height: 1.6;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── ANIMATIONS ── */
@keyframes pulseIn {
  0%   { opacity: 0; transform: scale(0.8); }
  60%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes fadeUp {
  0%   { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes spin3d {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

@keyframes aiPulse {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
  40%            { opacity: 1;   transform: scale(1); }
}

/* ── UTILS ── */
.han-char { font-family: 'Noto Serif SC', serif; }

.tag {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 11px;
  color: var(--text3);
}

.empty-state {
  text-align: center;
  padding: 32px 20px;
  color: var(--text3);
  font-size: 13px;
}