/* Màu & font dùng chung: index.html, notes.html và 3 kiểu trang bài (lesson.css, reader.css, shadow.css @import file này).
   5 app.html cũ có giao diện riêng, KHÔNG nạp file này (chúng tự đặt --bg, --primary… trùng tên). */
@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;600;700;800&family=Noto+Sans:wght@400;600&display=swap");

:root {
  --bg: #fafafb;
  --card: #ffffff;
  --text: #1f2328;
  --muted: #6b6f76;
  --border: #e4e4e8;
  --rule: #ebc9d5;           /* đường kẻ phiếu trả lời */
  --accent: #b0174f;         /* màu mực phiếu trả lời IELTS */
  --accent-soft: #f7e6ec;
  --focus: #1d4ed8;
  --green: #15803d;
  --red: #b91c1c;
  --red-soft: rgba(220, 38, 38, 0.08);
  --code: #f1f1f4;
  --shadow: 0 10px 30px rgba(20, 20, 30, 0.16);
  /* Noto Sans đỡ các ký tự IPA mà Be Vietnam Pro không có */
  --font-ui: "Be Vietnam Pro", "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ipa: "Noto Sans", "DejaVu Sans", "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17181b;
    --card: #202226;
    --text: #ececee;
    --muted: #9a9ca3;
    --border: #34363c;
    --rule: #4a2e39;
    --accent: #f07aa0;
    --accent-soft: #3a1f2a;
    --focus: #93c5fd;
    --green: #4ade80;
    --red: #f87171;
    --red-soft: rgba(248, 113, 113, 0.1);
    --code: #111214;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #17181b;
  --card: #202226;
  --text: #ececee;
  --muted: #9a9ca3;
  --border: #34363c;
  --rule: #4a2e39;
  --accent: #f07aa0;
  --accent-soft: #3a1f2a;
  --focus: #93c5fd;
  --green: #4ade80;
  --red: #f87171;
  --red-soft: rgba(248, 113, 113, 0.1);
  --code: #111214;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.55;
}
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }