/* BadminLab — hệ màu dùng chung. Light = mặc định, Dark = [data-theme="dark"].
   Trang "nhận" theme: <link rel="stylesheet" href="theme.css"> trong <head> TRƯỚC <style> của trang,
   bỏ các biến màu trong :root nội bộ, dùng var(--line*) thay cho rgba(255,255,255,...) cứng. */

:root {
  /* surfaces */
  --bg: #f5f7fa;
  --bg2: #ffffff;
  --bg3: #eceff4;
  /* brand */
  --accent: #00a87e;
  --accent2: #00916c;
  /* text */
  --text: #1a2332;
  --text2: #56657a;
  --text3: #8694a6;
  /* semantic */
  --danger: #e03e3e;
  --warning: #c98a00;
  --low: #0090c0;
  --center: #9333ea;
  --yellow: #c98a00;
  /* lines / overlays — lật theo theme */
  --line: rgba(0,0,0,.09);
  --line2: rgba(0,0,0,.12);
  --line-soft: rgba(0,0,0,.05);
  --line-strong: rgba(0,0,0,.16);
  --shadow: 0 2px 10px rgba(20,30,50,.07);
  --glass: rgba(255,255,255,.88);
}

[data-theme="dark"] {
  --bg: #0a0e14;
  --bg2: #111923;
  --bg3: #1a2332;
  --accent: #00e5a0;
  --accent2: #00c48c;
  --text: #e8edf3;
  --text2: #8899aa;
  --text3: #556677;
  --danger: #ff6b6b;
  --warning: #ffd93d;
  --low: #00b4d8;
  --center: #c084fc;
  --yellow: #f0c040;
  --line: rgba(255,255,255,.06);
  --line2: rgba(255,255,255,.08);
  --line-soft: rgba(255,255,255,.04);
  --line-strong: rgba(255,255,255,.12);
  --shadow: 0 2px 10px rgba(0,0,0,.3);
  --glass: rgba(10,14,20,.92);
}

/* Nút chuyển theme dùng chung */
.theme-toggle {
  background: var(--bg3);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 10px;
  width: 38px; height: 38px;
  font-size: 16px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
  transition: border-color .15s, transform .12s;
}
.theme-toggle:hover { transform: translateY(-1px); border-color: var(--accent); }
