/* ==========================================================================
   Zira & Pals — Design Tokens
   Nguồn: Figma Variables (Zira - Pals). Naming: --zp-{category}-{role/scale}
   Dùng cho custom classic theme (WooCommerce). Import ở đầu style.css.
   ========================================================================== */

:root {
  /* --- Brand: Brown (thang màu nâu Zira) --- */
  --zp-brand-50:  #f1e4da;
  --zp-brand-100: #e4c7b6;
  --zp-brand-200: #d3ab93;
  --zp-brand-500: #a35c22;
  --zp-brand-600: #804619;
  --zp-brand-800: #3c1f06; /* nâu đậm nhất - header/footer, text nhấn */

  /* Alias ngữ nghĩa cho brand */
  --zp-brand:         var(--zp-brand-600); /* primary action */
  --zp-brand-hover:   var(--zp-brand-800);
  --zp-brand-subtle:  var(--zp-brand-50);  /* nền nhạt, chip */

  /* --- Surface / Background --- */
  --zp-bg-white:   #ffffff;
  --zp-bg-mustard: #f3f2ed; /* nền section (be/mustard nhạt) */

  /* --- Text --- */
  --zp-text-primary:   #000000;
  --zp-text-secondary: #5e5e5e;
  --zp-text-tertiary:  #a6a6a6;
  --zp-text-white:     #ffffff;

  /* --- Icon --- */
  --zp-icon-primary:   #000000;
  --zp-icon-secondary: #5e5e5e;
  --zp-icon-white:     #ffffff;

  /* --- Stroke / Border --- */
  --zp-stroke-primary:    #f0f0f0; /* divider nhạt */
  --zp-stroke-secondary:  #bcbcbc; /* border input */
  --zp-stroke-quaternary: #202020; /* border đậm */
  --zp-stroke-white:      #ffffff;

  /* --- Grey Storm (neutral đậm) --- */
  --zp-grey-4: #202020;
  --zp-grey-5: #131313;

  /* --- Opacity overlays (trên ảnh hero) --- */
  --zp-overlay-white-60: rgba(255,255,255,.6);
  --zp-overlay-white-30: rgba(255,255,255,.3);

  /* --- Radius (suy ra từ rounded-rectangle trong design) --- */
  --zp-radius-sm: 8px;
  --zp-radius-md: 12px;
  --zp-radius-lg: 16px;

  /* --- Spacing scale (grid 8px, suy ra từ padding button/section) --- */
  --zp-space-1: 4px;
  --zp-space-2: 8px;
  --zp-space-3: 12px;
  --zp-space-4: 16px;
  --zp-space-6: 24px;
  --zp-space-8: 32px;
  --zp-space-15: 60px; /* padding-top các section title */

  /* --- Layout --- */
  --zp-container: 1440px;
  --zp-content:   1088px; /* vùng nội dung (product grid 4 cột) */

  /* --- Button (từ Figma: cao 44, radius bo) --- */
  --zp-btn-height: 44px;

  /* ======================================================================
     TYPOGRAPHY — Font: Be Vietnam Pro (nạp qua Google Fonts ở functions.php)
     ====================================================================== */
  --zp-font-sans: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Font weights (khớp style dùng trong Figma) */
  --zp-fw-regular:  400;
  --zp-fw-medium:   500;
  --zp-fw-semibold: 600;
  --zp-fw-bold:     700;

  /* Font sizes — type scale bóc từ design */
  --zp-fs-caption: 12px; /* BST/label nhỏ, meta trên card */
  --zp-fs-sm:      14px; /* card title, SKU, nav, filter, footer */
  --zp-fs-base:    16px; /* body, button, giá card */
  --zp-fs-lg:      18px; /* tên sản phẩm (single product) */
  --zp-fs-xl:      20px; /* giá nhấn (single product) */
  --zp-fs-2xl:     24px; /* hero title, H2 phụ */
  --zp-fs-3xl:     36px; /* section title (Sản phẩm mới, Bộ sưu tập...) */

  /* Line heights */
  --zp-lh-tight:  1.2;
  --zp-lh-snug:   1.35;
  --zp-lh-normal: 1.5;
  --zp-lh-hero:   52px; /* line-height cố định của hero 2 dòng */

  /* Letter spacing */
  --zp-ls-normal: 0;
  --zp-ls-wide:   0.4px;  /* uppercase label/caption */
  --zp-ls-hero:   0.95em; /* hero title giãn chữ (~22.8px @24px) */

  /* --- Accent --- */
  --zp-accent-sale: #ed6062; /* menu "Giảm giá sâu", nhấn khuyến mãi */

  /* --- Header --- */
  --zp-header-bg: rgba(239, 233, 225, .8); /* be trong suốt + backdrop-blur */

  /* --- Footer --- */
  --zp-footer-bg: #efe9e1; /* be nhạt, chữ tối */

  /* --- Coupon (Mã ưu đãi) --- */
  --zp-coupon-bg:   #e9efd9; /* nền ticket xanh lá nhạt */
  --zp-coupon-dash: #b7c293; /* viền dashed bên trong */

  /* --- News card (Tin tức) — nền xen kẽ --- */
  --zp-news-nude: var(--zp-brand-50); /* #f1e4da */
  --zp-news-pink: #f1dada;

  /* --- Shadow --- */
  --zp-shadow-card: 0 2px 12px rgba(60, 31, 6, .06);

  /* --- Z-index scale --- */
  --zp-z-header:  100;
  --zp-z-overlay: 500;
  --zp-z-modal:   1000;
}

/* ==========================================================================
   TYPOGRAPHY BASE + UTILITY CLASSES
   Áp token vào element gốc + class dùng lại. Component style ở main.css.
   ========================================================================== */
html { font-size: 100%; }

body {
  font-family: var(--zp-font-sans);
  font-size: var(--zp-fs-base);
  font-weight: var(--zp-fw-regular);
  line-height: var(--zp-lh-normal);
  color: var(--zp-text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--zp-font-sans); margin: 0 0 .5em; }
h1 { font-size: var(--zp-fs-3xl); font-weight: var(--zp-fw-semibold); line-height: var(--zp-lh-tight); }
h2 { font-size: var(--zp-fs-3xl); font-weight: var(--zp-fw-semibold); line-height: var(--zp-lh-tight); }
h3 { font-size: var(--zp-fs-xl);  font-weight: var(--zp-fw-semibold); line-height: var(--zp-lh-snug); }
h4 { font-size: var(--zp-fs-lg);  font-weight: var(--zp-fw-semibold); line-height: var(--zp-lh-snug); }
p  { margin: 0 0 1em; }
small { font-size: var(--zp-fs-sm); }
strong, b { font-weight: var(--zp-fw-semibold); }

/* Utility type styles — dùng trực tiếp trong markup */
.zp-display     { font-size: var(--zp-fs-2xl); font-weight: var(--zp-fw-bold); letter-spacing: var(--zp-ls-hero); line-height: var(--zp-lh-hero); text-transform: uppercase; }
.zp-title       { font-size: var(--zp-fs-3xl); font-weight: var(--zp-fw-semibold); line-height: var(--zp-lh-tight); }
.zp-subtitle    { font-size: var(--zp-fs-2xl); font-weight: var(--zp-fw-semibold); }
.zp-lead        { font-size: var(--zp-fs-lg);  font-weight: var(--zp-fw-medium); }
.zp-body        { font-size: var(--zp-fs-base); font-weight: var(--zp-fw-regular); line-height: var(--zp-lh-normal); }
.zp-body-sm     { font-size: var(--zp-fs-sm);  font-weight: var(--zp-fw-regular); }
.zp-caption     { font-size: var(--zp-fs-caption); letter-spacing: var(--zp-ls-wide); color: var(--zp-text-tertiary); }
.zp-label       { font-size: var(--zp-fs-caption); text-transform: uppercase; letter-spacing: var(--zp-ls-wide); }

/* Text color helpers */
.zp-text-primary   { color: var(--zp-text-primary); }
.zp-text-secondary { color: var(--zp-text-secondary); }
.zp-text-tertiary  { color: var(--zp-text-tertiary); }
.zp-text-brand     { color: var(--zp-brand-600); }
.zp-text-white     { color: var(--zp-text-white); }

/* Font weight helpers */
.zp-fw-regular  { font-weight: var(--zp-fw-regular); }
.zp-fw-medium   { font-weight: var(--zp-fw-medium); }
.zp-fw-semibold { font-weight: var(--zp-fw-semibold); }
.zp-fw-bold     { font-weight: var(--zp-fw-bold); }