/* Token thiết kế — lấy màu từ bìa sách "Dòng Chảy Bình An" + logo vàng Thác Nước 6T.
   Lớp 1: thang sắc độ (primitive) · Lớp 2: ngữ nghĩa (semantic) · Lớp 3: thành phần (component). */

:root {
  /* Lớp 1 — Xanh ngọc (nền bìa #1B6159 ≈ teal-700) */
  --teal-50: oklch(97% 0.015 182);
  --teal-100: oklch(93% 0.03 182);
  --teal-200: oklch(86% 0.05 182);
  --teal-300: oklch(77% 0.07 182);
  --teal-400: oklch(69% 0.085 182);
  --teal-500: oklch(63% 0.09 182);   /* #3A9D90 */
  --teal-600: oklch(53% 0.08 182);
  --teal-700: oklch(44% 0.07 180);   /* #1B6159 */
  --teal-800: oklch(37% 0.06 181);
  --teal-900: oklch(30% 0.05 182);
  --teal-950: oklch(22% 0.04 183);

  /* Lớp 1 — Vàng (logo #EDCB82 ≈ gold-300, chữ bìa #B38F50 ≈ gold-500) */
  --gold-50: oklch(98% 0.02 85);
  --gold-100: oklch(95% 0.04 85);
  --gold-200: oklch(90% 0.07 85);
  --gold-300: oklch(85% 0.10 85);
  --gold-400: oklch(76% 0.10 82);
  --gold-500: oklch(66% 0.09 80);
  --gold-600: oklch(59% 0.10 72);
  --gold-700: oklch(50% 0.09 70);
  --gold-800: oklch(41% 0.07 70);
  --gold-900: oklch(33% 0.05 70);
  --gold-950: oklch(24% 0.04 70);

  /* Lớp 1 — Nước thác (#4EDAF1) và cảnh báo */
  --fall-300: oklch(88% 0.09 210);
  --fall-400: oklch(83% 0.12 210);
  --fall-600: oklch(62% 0.12 215);
  --alert-300: oklch(80% 0.11 30);

  /* Lớp 2 — Ngữ nghĩa */
  --mau-nen: var(--teal-800);
  --mau-nen-sau: var(--teal-950);
  --mau-be-mat: var(--teal-700);
  --mau-vien: var(--teal-600);
  --mau-chu: var(--teal-50);
  --mau-chu-phu: var(--teal-200);
  --mau-nhan: var(--gold-300);
  --mau-nhan-dam: var(--gold-500);
  --mau-nuoc: var(--fall-400);
  --mau-loi: var(--alert-300);

  /* Lớp 3 — Thành phần */
  --nut-nen: var(--gold-300);
  --nut-nen-hover: var(--gold-200);
  --nut-nen-active: var(--gold-400);
  --nut-chu: var(--teal-950);
  --nut-phu-vien: var(--teal-300);
  --nut-phu-chu: var(--teal-50);
  --nut-phu-nen-hover: var(--teal-600);
  --nut-disabled-nen: var(--teal-600);
  --nut-disabled-chu: var(--teal-300);
  --o-nhap-nen: var(--teal-50);
  --o-nhap-chu: var(--teal-950);
  --o-nhap-vien: var(--teal-300);
  --o-nhap-goi-y: var(--teal-600);
  --o-nhap-vien-focus: var(--fall-400);
  --o-nhap-vien-loi: var(--alert-300);
  --the-nen: var(--teal-700);
  --the-vien: var(--teal-600);
  --thanh-nen: var(--teal-900);
  --thanh-day: linear-gradient(90deg, var(--fall-600), var(--fall-400));
  --thanh-day-du: linear-gradient(90deg, var(--gold-500), var(--gold-300));
  --lien-ket: var(--gold-300);
  --lien-ket-hover: var(--gold-100);
  --focus-vong: 0 0 0 3px var(--teal-950), 0 0 0 5px var(--fall-400);
  --chon-nen: var(--gold-300);
  --chon-chu: var(--teal-950);

  /* Chữ, khoảng cách, bo góc (base 4px) */
  --font-chu: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-tieu-de: 'Playfair Display', 'Times New Roman', serif; /* không dùng Georgia: lệch dấu tiếng Việt */
  --co-chu-nho: 0.875rem;
  --co-chu: 1rem;
  --co-chu-lon: 1.25rem;
  --co-tieu-de: clamp(1.75rem, 5vw, 2.5rem);
  --k-1: 4px; --k-2: 8px; --k-3: 12px; --k-4: 16px; --k-6: 24px; --k-8: 32px; --k-12: 48px;
  --bo-nho: 8px; --bo-vua: 12px; --bo-lon: 16px; --bo-tron: 9999px;
  --bong: 0 8px 24px oklch(15% 0.03 182 / 0.35);
}

/* Trình duyệt cũ không hiểu oklch → dùng mã hex lấy trực tiếp từ bìa/logo */
@supports not (color: oklch(50% 0.1 180)) {
  :root {
    --mau-nen: #134a44; --mau-nen-sau: #0b2b28; --mau-be-mat: #1b6159; --mau-vien: #286a63;
    --mau-chu: #f3faf8; --mau-chu-phu: #bfe0da; --mau-nhan: #edcb82; --mau-nhan-dam: #b38f50;
    --mau-nuoc: #4edaf1; --mau-loi: #f3a58f;
    --nut-nen: #edcb82; --nut-nen-hover: #f5dca6; --nut-nen-active: #d7b26a; --nut-chu: #0b2b28;
    --nut-phu-vien: #8fc9bf; --nut-phu-chu: #f3faf8; --nut-phu-nen-hover: #286a63;
    --nut-disabled-nen: #286a63; --nut-disabled-chu: #8fc9bf;
    --o-nhap-nen: #f3faf8; --o-nhap-chu: #0b2b28; --o-nhap-vien: #8fc9bf; --o-nhap-goi-y: #3f7f76; --o-nhap-vien-focus: #4edaf1; --o-nhap-vien-loi: #f3a58f;
    --the-nen: #1b6159; --the-vien: #286a63; --thanh-nen: #0f3f3a;
    --thanh-day: linear-gradient(90deg, #1a9cb8, #4edaf1); --thanh-day-du: linear-gradient(90deg, #b38f50, #edcb82);
    --lien-ket: #edcb82; --lien-ket-hover: #fbeecd; --chon-nen: #edcb82; --chon-chu: #0b2b28;
    --focus-vong: 0 0 0 3px #0b2b28, 0 0 0 5px #4edaf1;
  }
}