/* ==========================================================================
   FILE: css/variables.css
   MÔ TẢ: Khai báo biến CSS toàn cục (Màu sắc từ logo Thanh Trúc Food, 
          Typography co giãn bằng clamp(), khoảng cách, bo góc và đổ bóng)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Noto+Sans+SC:wght@400;500;700&family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600&display=swap');

:root {
  /* --- 1. BẢNG MÀU THƯƠNG HIỆU (LẤY MẪU TỪ LOGO.PNG) --- */
  --color-primary: #8B3A1C;          /* Nâu đỏ đậm chủ đạo (màu huy hiệu tròn) */
  --color-primary-dark: #63260F;     /* Nâu đỏ sẫm (hover nút, nền footer sâu) */
  --color-primary-light: #A94B27;    /* Nâu đỏ sáng (viền, hiệu ứng phụ) */
  
  --color-accent: #F5BE1A;           /* Vàng nghệ (muỗng nĩa & băng rôn) */
  --color-accent-hover: #DFA90B;     /* Vàng nghệ đậm khi hover */
  --color-accent-soft: #FFF1C2;      /* Vàng kem mềm (nền huy hiệu, tag) */
  
  --color-bg: #FFFFFF;               /* Nền trắng chủ đạo */
  --color-bg-warm: #FFFBF2;          /* Nền kem ấm phân tách section */
  --color-bg-elevated: #FFFFFF;      /* Nền thẻ nổi */
  
  --color-text: #2E1A10;             /* Nâu đen đậm cho chữ chính (Tương phản AAA) */
  --color-text-muted: #6E5A4F;       /* Nâu xám cho mô tả phụ (Tương phản AA) */
  --color-text-light: #FFFBF2;       /* Chữ sáng trên nền nâu đậm */
  
  --color-border: #EADFD5;           /* Viền mảnh màu kem nâu nhạt */
  --color-border-strong: #D5C3B3;    /* Viền đậm hơn cho input/card */

  /* --- 2. MÀU TRẠNG THÁI HỆ THỐNG --- */
  --color-success: #1F7A4C;
  --color-success-bg: #E6F6EE;
  --color-warning: #B45309;
  --color-warning-bg: #FEF3C7;
  --color-danger: #B91C1C;
  --color-danger-bg: #FEE2E2;
  --color-info: #1D4ED8;
  --color-info-bg: #DBEAFE;

  /* --- 3. HỆ THỐNG FONT CHỮ --- */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-zh: 'Noto Sans SC', 'Be Vietnam Pro', sans-serif;

  /* --- 4. CỠ CHỮ LINH HOẠT (FLUID TYPOGRAPHY VỚI CLAMP) --- */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.825rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.32rem + 0.9vw, 2rem);
  --text-3xl: clamp(1.875rem, 1.6rem + 1.4vw, 2.65rem);
  --text-4xl: clamp(2.25rem, 1.85rem + 2vw, 3.5rem);

  /* --- 5. KHOẢNG CÁCH & KÍCH THƯỚC LAYOUT --- */
  --container-max: 1200px;
  --container-pad: clamp(1rem, 3vw, 2rem);
  --section-py: clamp(3.5rem, 7vw, 6rem);
  --header-height: 84px;
  --header-height-scrolled: 68px;

  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */

  /* --- 6. BO GÓC & BÓNG ĐỔ (MỀM MẠI, SANG TRỌNG) --- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  --shadow-xs: 0 2px 6px rgba(46, 26, 16, 0.04);
  --shadow-sm: 0 6px 16px rgba(46, 26, 16, 0.06);
  --shadow-md: 0 12px 32px rgba(46, 26, 16, 0.09);
  --shadow-lg: 0 20px 48px rgba(46, 26, 16, 0.14);
  --shadow-accent: 0 8px 24px rgba(245, 190, 26, 0.28);

  /* --- 7. CHUYỂN ĐỘNG & Z-INDEX --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 180ms var(--ease-out);
  --transition-base: 300ms var(--ease-out);
  --transition-slow: 500ms var(--ease-out);

  --z-base: 1;
  --z-header: 100;
  --z-floating: 150;
  --z-drawer: 200;
  --z-modal: 300;
  --z-preloader: 999;
}

/* Tự động ưu tiên bộ font hỗ trợ chữ Hán giản thể khi đổi sang tiếng Trung */
html:lang(zh),
html:lang(zh) body {
  font-family: var(--font-zh);
}

html:lang(zh) h1,
html:lang(zh) h2,
html:lang(zh) h3,
html:lang(zh) h4,
html:lang(zh) .font-heading {
  font-family: var(--font-zh);
  font-weight: 700;
}