/*
  Huyền Minh — Design tokens
  Nguồn: Design.pdf "MẶC THỦY RỒNG — Luxury Sumi-e Fusion" §2, §3, §5
  Không hardcode hex/px ở nơi khác — mọi giá trị tham chiếu biến ở đây.
*/

:root {
  /* Mặc định site ở chế độ SÁNG ("giấy dó ấm") — báo trình duyệt để control
     gốc (select popup, scrollbar...) tự chọn theme sáng cho khớp. Chế độ
     tối là lựa chọn phụ, bật qua data-theme="dark" (xem block bên dưới). */
  color-scheme: light;

  /* ---------- Color (mặc định = SÁNG) ---------- */
  --ink-black: #f4efe4; /* nền trang — giấy dó ấm */
  --ink-surface: #faf7f0; /* card/panel nổi cấp 1 */
  --ink-surface-2: #efe6d3; /* card/panel nổi cấp 2 (hover/active) */
  --ceramic-ivory: #1c1a16; /* chữ chính — mực đậm ấm */
  --ceramic-ivory-dim: #5c554a; /* chữ phụ */
  --gold: #d4af37; /* CTA, highlight, viền active */
  --gold-deep: #c5a059; /* gradient stop đầu */
  --gold-light: #f3e5ab; /* gradient stop giữa — ánh phản chiếu */
  --vermilion: #7f1d1d; /* dấu triện, badge, hotline */
  --vermilion-bright: #a83232; /* hover state của vermilion */
  --muted: #8a8272;
  --muted-dim: #a9a08c;

  /* Token "cố định" — KHÔNG đổi theo theme, dùng cho các khu vực luôn tối
     bất kể site đang ở chế độ nào (nav, hero, preloader, CTA cuối — vốn là
     ảnh/nền thủy mặc tối được art-direct riêng) và cho chữ/nền cần tương
     phản cố định trên nền vàng (nút CTA, badge, dropdown). */
  --ink-fixed: #0a0b0d;
  --ivory-fixed: #e8e3d9;
  --ivory-fixed-dim: #cfc9bb;
  --glass-fixed-bg: rgba(10, 11, 13, 0.82);
  --glass-fixed-border: rgba(212, 175, 55, 0.25);

  /* Alias phản ứng theo theme cho chữ/link nhấn vàng — vàng sáng đọc rất
     kém trên nền giấy sáng (contrast ~1.8:1), nên ở light mode (mặc định)
     chữ nhấn dùng đỏ triện (vermilion), tương phản ~8.7:1, đúng mô-típ
     triện đỏ trên giấy trắng. Border/fill vẫn dùng --gold thẳng. */
  --gold-ink: var(--vermilion);

  /* Lớp phủ mờ cùng tông --ink-surface nhưng cần kênh alpha (dùng trong
     gradient nhiều điểm dừng, ví dụ .experts-scrim) — không thể lấy alpha
     từ 1 biến hex nên tách token riêng, đổi theo theme song song. */
  --surface-veil: rgba(250, 247, 240, 0.74);
  --btn-ghost-border: rgba(28, 26, 22, 0.22);

  --gold-metallic: linear-gradient(
    135deg,
    var(--gold-deep) 0%,
    var(--gold-light) 50%,
    var(--gold) 100%
  );

  /* Ink glassmorphism — Design.pdf §5B (mặc định = SÁNG) */
  --ink-glass-bg: rgba(244, 239, 228, 0.86);
  --ink-glass-border: rgba(127, 29, 29, 0.18);
  --ink-glass-shadow: 0 8px 32px 0 rgba(120, 100, 60, 0.18);
  --ink-glass-blur: 12px;

  /* ---------- Type ---------- */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Be Vietnam Pro", -apple-system, "Segoe UI", system-ui, sans-serif;
  --tracking-display: 0.06em;
  --tracking-eyebrow: 0.28em;

  --fs-display-xl: clamp(3.4rem, 3rem + 3vw, 6.4rem);
  --fs-display-lg: clamp(2.4rem, 2.1rem + 1.8vw, 4rem);
  --fs-display-md: clamp(1.9rem, 1.7rem + 1vw, 2.75rem);
  --fs-heading: clamp(1.5rem, 1.4rem + 0.5vw, 1.9rem);
  --fs-lead: clamp(1.1rem, 1.05rem + 0.3vw, 1.35rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 1.08;
  --lh-heading: 1.25;
  --lh-body: 1.7;

  /* ---------- Spacing — grid 4px, thang spacious (Liúbái) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  /* Giảm từ 160px — 160 khiến khoảng cách giữa 2 section liền kề (padding
     dưới + trên cộng lại, chưa kể section-divider) lên tới ~320px, tạo
     khoảng trống quá rộng giữa các khối nội dung. */
  --s-10: 112px;

  /* ---------- Radius ---------- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 9999px;

  /* ---------- Motion ---------- */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ink: cubic-bezier(0.62, 0.04, 0.36, 1);
  --dur-fast: 0.15s;
  --dur-base: 0.3s;
  --dur-slow: 0.7s;

  /* ---------- Layout ---------- */
  --content-max: 1200px;
  --content-narrow: 720px;
  --nav-h: 84px;
  --focus-ring: 0 0 0 2px var(--ink-black), 0 0 0 4px var(--gold);
}

/*
  Chế độ tối — bản gốc "Mặc Thủy Rồng", giữ nguyên toàn bộ số liệu cũ.
  Bật qua data-theme="dark" trên <html> (theme.ts), lựa chọn lưu localStorage.

  Nav, Hero, Preloader, CTA cuối (Final CTA) CHỦ Ý không đổi theo theme —
  đây là các khu vực ảnh/nền tối được art-direct riêng (rồng, mực loang),
  đổi theo theme sẽ phá vỡ hiệu ứng hình ảnh đã dàn dựng. Các phần này dùng
  token --*-fixed thay vì token phản ứng nên tự động bỏ qua cả 2 block.
*/
:root[data-theme="dark"] {
  color-scheme: dark;

  --ink-black: #0a0b0d; /* nền chính, hero bg, khoảng trắng Liúbái */
  --ink-surface: #1a1c20; /* card, panel nổi */
  --ink-surface-2: #232529; /* panel nổi cấp 2 (hover/active) */
  --ceramic-ivory: #e8e3d9; /* body text, thân rồng, card bg sáng */
  --ceramic-ivory-dim: #cfc9bb; /* text phụ trên nền tối */
  --muted: #888888;
  --muted-dim: #555555;

  --ink-glass-bg: rgba(10, 11, 13, 0.82);
  --ink-glass-border: rgba(212, 175, 55, 0.25);
  --ink-glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);

  --gold-ink: var(--gold);
  --surface-veil: rgba(26, 28, 32, 0.74);
  --btn-ghost-border: rgba(232, 227, 217, 0.3);
}