/* TOEX Study Club — design tokens (màu, chữ, bo góc, bóng). Đặt trước stylesheet riêng của trang.
   Dùng theo VAI TRÒ: --toex-forest cho chữ/nút, --toex-moss cho mảng nhận diện. */
:root {
  --toex-cream: #FFF6E4;   /* nền chính */
  --toex-paper: #FFFCF4;   /* bề mặt sáng */
  --toex-moss: #6A8042;    /* xanh rêu nhận diện */
  --toex-forest: #344B32;  /* xanh đậm: chữ, nút chính */
  --toex-honey: #E9A23B;   /* cam mật ong: điểm nhấn, nút phụ */
  --toex-sage: #DDE5CC;    /* xanh nhạt: card */
  --toex-peach: #F3D6B8;   /* cam nhạt: card */
  --toex-ink: #282A22;     /* chữ, viền */
  --toex-muted: #626757;   /* chữ phụ */
  --toex-error: #A43A2B;   /* thông báo lỗi */

  --toex-font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --toex-font-body: "Quicksand", system-ui, sans-serif;

  --toex-radius-card: 20px;
  --toex-radius-panel: 28px;
  --toex-radius-input: 12px;
  --toex-radius-pill: 999px;
  --toex-border: 2px solid var(--toex-ink);
  --toex-shadow: 4px 4px 0 var(--toex-ink);
  --toex-shadow-hover: 6px 6px 0 var(--toex-ink);

  /* nền giấy kẻ ô: 1 lớp, nét forest ~4.5%, ô 32px */
  --toex-grid: linear-gradient(rgba(52,75,50,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(52,75,50,.045) 1px, transparent 1px);
  --toex-grid-size: 32px 32px;
}