/* ════════════════════════════════════════
   BASE — biến màu sắc, reset, font chữ
   Đây là nền tảng, file khác đều dùng lại
════════════════════════════════════════ */

/* Biến toàn cục — chỉnh ở đây là đổi màu cả app */
:root {
  /* Màu chủ đạo */
  --purple:       #0EA5E9;
  --purple-d:     #0284C7;
  --purple-light: #E0F2FE;
  --green:        #059669;
  --green-light:  #D1FAE5;
  --orange:       #D97706;
  --orange-light: #FEF3C7;
  --pink:         #DB2777;
  --pink-light:   #FCE7F3;
  --red:          #DC2626;
  --red-light:    #FEE2E2;

  /* Nền & bề mặt */
  --bg:      #F8FAFC;
  --surface: #FFFFFF;

  /* Chữ */
  --text:       #1E293B;
  --text-muted: #6B7280;

  /* Viền & bo góc */
  --border:    #E5E7EB;
  --radius:    16px;
  --radius-sm: 10px;

  /* Shadow */
  --shadow:    0 4px 20px rgba(14,165,233,0.12);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.07);

  /* Kích thước layout */
  --nav-h:      68px;   /* chiều cao nav mobile */
  --top-h:      56px;   /* chiều cao topbar */
  --sb-w:       220px;  /* chiều rộng sidebar Desktop */
  --sb-w-icon:  64px;   /* chiều rộng sidebar Tablet icon-only */

  /* Spacing responsive — dùng ở container, không dùng cho component nhỏ */
  --space-page: clamp(16px, 3vw, 60px);  /* horizontal padding trang */
  --space-gap:  clamp(8px, 1.5vw, 20px); /* gap giữa các card */

  /* Font chữ — đổi ở đây là đổi cả app */
  --font: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-base: clamp(14px, 0.875rem + 0.2vw, 16px); /* scale nhẹ trên màn nhỏ */
}

/* Reset box model — tránh vỡ layout */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* Cho phép chọn text trong ô nhập liệu */
input, textarea {
  user-select: text;
  -webkit-user-select: text;
}

/* Form elements kế thừa font từ body thay vì dùng font mặc định của browser */
input, button, textarea, select {
  font: inherit;
}

/* Ảnh không tràn container */
img {
  max-width: 100%;
  display: block;
}

/* Link không có gạch chân và màu xanh browser mặc định */
a {
  text-decoration: none;
  color: inherit;
}

/* List không có bullet/number mặc định */
ul, ol {
  list-style: none;
}

button:focus { outline: none; }

/* Giảm chuyển động — loại bỏ toàn bộ animation/transition */
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* Accent color presets — ghi đè --purple family */
[data-accent="sky"]     { --purple: #0EA5E9; --purple-d: #0284C7; --purple-light: #E0F2FE; }
[data-accent="indigo"]  { --purple: #6366F1; --purple-d: #4F46E5; --purple-light: #EEF2FF; }
[data-accent="emerald"] { --purple: #059669; --purple-d: #047857; --purple-light: #D1FAE5; }
[data-accent="orange"]  { --purple: #D97706; --purple-d: #B45309; --purple-light: #FEF3C7; }

/* Font và màu nền cơ bản */
html, body {
  height: 100%;
  font-family: var(--font);
  font-size: var(--font-base, 16px);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Tránh bôi đen text khi nhấn nút */
button, label, .sb-item, .hw-card, .hw-focus-row,
.study-mode-card, .study-hero-btn, .match-item,
.sess-opt, .chip, .chip-solid, .seg-btn, .ldc-btn-learn,
.lib-deck-card, .lib-word-item, .word-item,
.nav-item, .settings-row, .ach-card, .rec-tile,
.accent-btn, .ai-pill, .lwd-btn, .tab-btn {
  user-select: none;
  -webkit-user-select: none;
}