/* Nguồn màu và kiểu chữ duy nhất của toàn web (nguyên tắc II).
   Trang và thành phần chỉ dùng var(--...), không viết mã màu ở nơi khác.
   Bộ màu: [data-palette], kiểu chữ: [data-font] (gắn trên <html> hoặc một khối để xem trước). Mặc định Bạc hà + Thân thiện. */

:root {
  --text: #1E2A44;
  --text-2: #4A5770;
  --text-muted: #5B6780;
  --surface: #FFFFFF;
  --on-primary: #FFFFFF;
  --danger: #B42318;

  --radius-card: 18px;
  --radius-btn: 12px;
  --radius-input: 10px;
  --radius-pill: 999px;
  --tap: 44px;

  --shadow-card: 0 1px 2px rgba(30, 42, 68, 0.04), 0 4px 16px rgba(30, 42, 68, 0.05);
  --shadow-pop: 0 8px 32px rgba(30, 42, 68, 0.16);
  --backdrop: rgba(30, 42, 68, 0.35);
  --swatch-line: rgba(30, 42, 68, 0.12);

  --font-fallback: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Bộ màu ---------- */

:root,
[data-palette="bac-ha"] {
  --bg: #F3F9F6;
  --bg-soft: #E8F6EF;
  --tint: #D5F0E3;
  --border: #DCEBE3;
  --primary: #2E7D5B;
  --primary-strong: #1E5A41;
  --accent: #FFE8D6;
  --on-accent: #7A3A1C;
}

[data-palette="xanh-troi"] {
  --bg: #F5F8FC;
  --bg-soft: #EEF4FC;
  --tint: #DCE9FA;
  --border: #E3E9F3;
  --primary: #3D6CB3;
  --primary-strong: #1F4479;
  --accent: #FFF1C7;
  --on-accent: #6E5208;
}

[data-palette="hoa-dao"] {
  --bg: #FCF6F5;
  --bg-soft: #FCEEEB;
  --tint: #FADDD8;
  --border: #F1E2DF;
  --primary: #B4534A;
  --primary-strong: #7E2F28;
  --accent: #E4EEFC;
  --on-accent: #1F4479;
}

[data-palette="oai-huong"] {
  --bg: #F7F5FC;
  --bg-soft: #F1EDFC;
  --tint: #E4DDF8;
  --border: #E7E2F3;
  --primary: #6650B0;
  --primary-strong: #43328A;
  --accent: #FFF1C7;
  --on-accent: #6E5208;
}

/* ---------- Kiểu chữ ---------- */

:root,
[data-font="than-thien"] {
  --font-heading: "Baloo 2", var(--font-fallback);
  --font-body: "Lexend", var(--font-fallback);
  --heading-weight: 700;
}

[data-font="tron-mem"] {
  --font-heading: "Quicksand", var(--font-fallback);
  --font-body: "Nunito", var(--font-fallback);
  --heading-weight: 700;
}

[data-font="gon-gang"] {
  --font-heading: "Lexend", var(--font-fallback);
  --font-body: "Lexend", var(--font-fallback);
  --heading-weight: 600;
}

[data-font="quen-thuoc"] {
  --font-heading: "Be Vietnam Pro", var(--font-fallback);
  --font-body: "Be Vietnam Pro", var(--font-fallback);
  --heading-weight: 700;
}