/* ==========================================================================
   Tàu Hũ Tươi Phúc An — variables.css
   Design tokens: màu sắc (light/dark), typography, spacing, shadow, radius.
   ========================================================================== */

:root {
  /* Typography */
  /* Đổi từ Playfair Display sang Lora: vẫn serif thanh lịch nhưng nét dày/đều hơn,
     rõ dấu tiếng Việt hơn nhiều — Playfair Display nét quá mảnh làm chữ có dấu
     (ú, ầ, ẫ...) dễ bị rối, nhất là cỡ nhỏ trên di động và với khách lớn tuổi. */
  --font-heading: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'Be Vietnam Pro', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Layout */
  --container-width: 1200px;
  --container-padding: 20px;
  --header-height: 76px;
  --header-height-mobile: 64px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-full: 999px;

  /* Spacing scale */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;

  /* Section rhythm — bố cục thoáng hơn, nhiều khoảng thở */
  --section-padding-y: 80px;

  /* Transitions — easing "premium" (giảm tốc êm, không nảy) dùng cho chuyển động lớn;
     easing chuẩn cho phản hồi nhanh (đổi màu, viền...) */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 180ms var(--ease-smooth);
  --transition-base: 420ms var(--ease-premium);
  --transition-theme: 400ms ease;

  /* Shadow (recalculated per theme below) */
  --shadow-sm: 0 2px 10px rgba(30, 22, 12, 0.06);
  --shadow-md: 0 10px 28px rgba(30, 22, 12, 0.10);
  --shadow-lg: 0 20px 48px rgba(30, 22, 12, 0.16);

  /* Viền ánh kim mỏng (product photo, hero) — gradient vàng gold nhiều điểm sáng
     mô phỏng ánh kim loại đánh bóng, dùng chung cho khung ảnh tròn khắp site. */
  --metallic-gold: linear-gradient(135deg, #f9e8ba 0%, #cf9c42 20%, #fbf2d6 42%, #a97a2e 64%, #f9e8ba 82%, #d9ac5f 100%);

  /* "Ánh nước" — cặp xanh lá đậm (ngọc bích) + xanh dương nhạt (ánh nước/hơi
     lạnh trên thành ly), lấy cảm hứng từ chính cảm giác "thanh mát" của tàu hũ
     tươi (nước đường trong, ly lạnh đọng hơi nước). Dùng cho các điểm nhấn
     TRỪ khu vực Menu/Đặt hàng (khu đó giữ nguyên vàng gold theo yêu cầu). */
  --metallic-jade: linear-gradient(135deg, #d3f3ee 0%, #0b6e64 22%, #eefbf8 44%, #0a5750 66%, #cdeef0 84%, #2f97a6 100%);
}

/* ==========================================================================
   LIGHT MODE — trắng / kem / be nhẹ
   ========================================================================== */
:root,
[data-theme='light'] {
  --color-bg: #fbf7ef;
  --color-bg-rgb: 251, 247, 239;
  --color-bg-soft: #f3ead6;
  --color-surface: #ffffff;
  --color-surface-rgb: 255, 255, 255;

  --color-text: #2a2118;
  --color-text-muted: #6f6250;
  --color-heading: #253524;

  --color-primary: #2f4a38;
  --color-primary-rgb: 47, 74, 56;
  --color-primary-soft: #e7ece3;

  --color-gold: #b8863c;
  --color-gold-strong: #96692a;
  --color-gold-rgb: 184, 134, 60;
  --color-on-gold: #26200f;

  --color-border: #e6dac0;
  --color-overlay: rgba(37, 29, 18, 0.55);

  --logo-badge-bg: transparent;
  --logo-badge-border: transparent;
  --logo-badge-glow: transparent;

  /* Tông "tươi mát" (xanh ngọc/mint) — CHỈ dùng riêng cho bảng Tài khoản, cố
     tình tách biệt khỏi tông vàng-kem ấm của web chính để làm điểm nhấn nhẹ,
     dễ nhận ra ngay là 1 khu vực khác (tài khoản cá nhân) mà không rối mắt. */
  --color-mint: #0d9488;
  --color-mint-strong: #0f766e;
  --color-mint-rgb: 13, 148, 136;
  --color-mint-soft: #e3faf5;
  --color-on-mint: #ffffff;

  /* "Ánh nước" — điểm nhấn xanh lá đậm (ngọc bích) + xanh dương nhạt, dùng cho
     toàn site (trừ khu Menu/Đặt hàng vẫn giữ vàng gold). Tách riêng khỏi
     --color-mint (chỉ dành cho bảng Tài khoản) dù cùng họ xanh lạnh. */
  --color-jade: #0b6e64;
  --color-jade-strong: #085951;
  --color-jade-rgb: 11, 110, 100;
  --color-jade-soft: #e3f3f0;
  --color-on-jade: #ffffff;
  --color-sky: #4f86a6;
  --color-sky-rgb: 79, 134, 166;
}

/* ==========================================================================
   DARK MODE — đen ấm / nâu đậm / xanh lá đậm + gold điểm nhấn
   ========================================================================== */
[data-theme='dark'] {
  --color-bg: #17130f;
  --color-bg-rgb: 23, 19, 15;
  --color-bg-soft: #211a13;
  --color-surface: #241c15;
  --color-surface-rgb: 36, 28, 21;

  --color-text: #f3ecdd;
  --color-text-muted: #c6b8a1;
  --color-heading: #f6efe1;

  --color-primary: #6fa384;
  --color-primary-rgb: 111, 163, 132;
  --color-primary-soft: #1f2e22;

  --color-gold: #d9ac5f;
  --color-gold-strong: #e8c27f;
  --color-gold-rgb: 217, 172, 95;
  --color-on-gold: #221a0e;

  --color-border: #3a2f21;
  --color-overlay: rgba(0, 0, 0, 0.6);

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.45);

  /* logo cần nền tương phản (glass effect) để không bị chìm trên nền tối */
  --logo-badge-bg: rgba(255, 255, 255, 0.08);
  --logo-badge-border: rgba(var(--color-gold-rgb), 0.4);
  --logo-badge-glow: rgba(var(--color-gold-rgb), 0.2);

  /* Tông mint bản tối — sáng/rực hơn để vẫn nổi bật trên nền đen ấm, không bị chìm. */
  --color-mint: #2dd4bf;
  --color-mint-strong: #5eead4;
  --color-mint-rgb: 45, 212, 191;
  --color-mint-soft: #0f2b28;
  --color-on-mint: #04231f;

  /* Tông "Ánh nước" bản tối — sáng/rực hơn để vẫn nổi trên nền đen ấm. */
  --color-jade: #34a493;
  --color-jade-strong: #5fc2b1;
  --color-jade-rgb: 52, 164, 147;
  --color-jade-soft: #12302c;
  --color-on-jade: #04231f;
  --color-sky: #7fb8d6;
  --color-sky-rgb: 127, 184, 214;
}