/* Màu, chữ, khoảng cách của Tranhbeto Design System (3 chế độ: ngay, dem, dacbiet) */
:root, [data-theme="ngay"] {
  --paper: #ffffff; --paper-2: #f4f5f9; --card: #ffffff; --line: #dadde8; --line-strong: #8a8fa8;
  --ink: #1d2033; --ink-muted: #5a5f78;
  --blue: #2b50d8; --on-blue: #ffffff; --blue-soft: #e6ecff;
  --sun: #ffc531; --on-sun: #1d2033;
  --coral: #ee5b3f; --coral-deep: #b83a22; --coral-soft: #ffe7e1;
  --leaf: #1f7a52; --leaf-soft: #e2f4ea;
  --link: var(--blue);
  --shadow-sm: 0 1px 2px #1d203314, 0 2px 6px #1d20330f;
  --shadow-book: 0 2px 0 #1d20330f, 0 14px 28px -10px #1d203347;
  --focus-ring: 0 0 0 3px #ffffff, 0 0 0 6px #2b50d8;
}
[data-theme="dem"] {
  --paper: #1a1c2b; --paper-2: #23263a; --card: #262a40; --line: #3a3f5a; --line-strong: #6e7392;
  --ink: #f1f0f7; --ink-muted: #b3b5c8;
  --blue: #8ea6ff; --on-blue: #12152a; --blue-soft: #2a3466;
  --sun: #f2b824; --on-sun: #1d2033;
  --coral: #ff8a70; --coral-deep: #ffb3a3; --coral-soft: #4a2620;
  --leaf: #6fd3a0; --leaf-soft: #1e3a2e;
  --link: var(--blue);
  --shadow-sm: 0 1px 3px #000000a6;
  --shadow-book: 0 14px 28px -8px #000000cc;
  --focus-ring: 0 0 0 3px #1a1c2b, 0 0 0 6px #8ea6ff;
}
[data-theme="dacbiet"] {
  --paper: #f4f6f3; --paper-2: #e9eeea; --card: #ffffff; --line: #d6ddd8; --line-strong: #7a8780;
  --ink: #1d2523; --ink-muted: #56625d;
  --blue: #1f6b63; --on-blue: #ffffff; --blue-soft: #ddede9;
  --sun: #f0c24b; --on-sun: #1d2523;
  --coral: #e07a5f; --coral-deep: #9c3e26; --coral-soft: #fbe6e0;
  --leaf: #276b40; --leaf-soft: #e3f0df;
  --link: var(--blue);
  --shadow-sm: 0 1px 2px #1d252314;
  --shadow-book: 0 10px 20px -10px #1d252333;
  --focus-ring: 0 0 0 3px #f4f6f3, 0 0 0 6px #1f6b63;
}
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px;
  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 28px; --radius-full: 9999px;
  --font-display: "Baloo 2", "Be Vietnam Pro", system-ui, sans-serif;
  --font-sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: Mali, "Be Vietnam Pro", cursive;
}
.display-xl { font-family: var(--font-display); font-size: 56px; line-height: 60px; font-weight: 800; letter-spacing: -0.01em; }
.display { font-family: var(--font-display); font-size: 40px; line-height: 46px; font-weight: 700; }
.title { font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 700; }
.heading { font-family: var(--font-display); font-size: 21px; line-height: 28px; font-weight: 700; }
.body-lg { font-family: var(--font-sans); font-size: 18px; line-height: 28px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 25px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; }
.caption { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 500; }
.story { font-family: var(--font-display); font-size: 26px; line-height: 40px; font-weight: 500; }
.note { font-family: var(--font-hand); font-size: 20px; line-height: 28px; font-weight: 500; }