/* Design tokens — nguồn: Luviart Brand Style Guide.dc.html. Không thêm màu/font ngoài file này. */
:root {
  /* Cho trình duyệt biết theme đang ở chế độ nào để tự tô đúng UI gốc (viền/nền input,
     tick checkbox, thanh cuộn...) theo dark mode — trang tự chuyển bằng data-theme, không
     phải prefers-color-scheme, nên PHẢI khai rõ ở đây, trình duyệt không tự đoán được. */
  color-scheme: light;

  /* Màu chính */
  --lv-primary: #3E5C3E;       /* Moss Pine — CTA, eyebrow label, icon */
  --lv-text: #1B2A20;          /* Deep Forest — text chính */
  --lv-primary-hover: #2E4A30; /* Deep Emphasis — hover/active nút */
  --lv-brass: #B8863B;         /* trang trí, icon, viền — KHÔNG dùng cho chữ thường (contrast 2.85:1) */

  /* Nền / trung tính */
  --lv-bg: #F3F1E9;
  --lv-card: #FAF8F1;
  --lv-border: #DCD5C2;
  --lv-text-on-dark: #EDE7D8;

  /* Fonts */
  --lv-font-heading: 'Fraunces', serif;
  --lv-font-body: 'Work Sans', sans-serif;
  --lv-font-mono: 'IBM Plex Mono', monospace;

  /* Type scale */
  --lv-size-h1: clamp(38px, 5vw, 52px);
  --lv-size-h2: clamp(26px, 3vw, 34px);
  --lv-size-h3: clamp(20px, 2vw, 26px);
  --lv-size-eyebrow: 13px;
  --lv-size-body: 17px;
  --lv-size-small: 14px;

  /* Layout */
  --lv-container: 1200px;
  --lv-grid-size: 44px;
  --lv-grid-line: rgba(62, 92, 62, 0.07);
  --lv-radius: 2px;
  --lv-section-pad: 80px;
  --lv-text-secondary: #4B5A46;
  --lv-footer-bg: #FAF8F1;

  /* Overlay ảnh */
  --lv-overlay: rgba(27, 42, 32, 0.55);
  --lv-overlay-strong: rgba(19, 31, 25, 0.9);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --lv-bg: #131F19;
  --lv-card: #1B2A20;
  --lv-border: #2E4A30;
  --lv-text: #EDE7D8;
  --lv-text-secondary: #9FB09A;
  --lv-footer-bg: #0F1913;
  --lv-primary: #86AC79;       /* Accent sáng — thay #3E5C3E trên nền tối */
  --lv-primary-hover: #9FC190;
  --lv-brass: #C1903F;         /* Accent đậm — thay brass trên nền tối */
  --lv-grid-line: rgba(134, 172, 121, 0.08);
}