/* === Lê Mai Promo Hub — Design Tokens ===
   Source of truth: HANDOFF-PROMO-WEB-BUILD.md Section 3.
   Quiet luxury, bilingual VN+EN+JP. Reuse from library/journal/penta family. */

:root {
  /* === COLORS === */
  --ink: #1A1A1A;            /* đen ink, không pure black */
  --paper: #FAF8F4;          /* off-white warm — background mặc định */
  --paper-cool: #F2F0EB;     /* off-white cooler — section divide / strip bg */
  --rule: #E8E4DC;           /* border / hr / divider mảnh */
  --accent-1: #7A6E5D;       /* umber muted — eyebrow / tag / mã hương */
  --accent-2: #3E3528;       /* gỗ tối — highlight rare */

  /* === TYPOGRAPHY === */
  --font-heading: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-body-en: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-jp: 'Noto Serif JP', 'EB Garamond', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --fs-body: 17px;
  --fs-body-en: 14px;
  --fs-eyebrow: 11px;
  --fs-h1: clamp(34px, 6vw, 56px);
  --fs-h2: clamp(22px, 3.5vw, 32px);
  --fs-h3: clamp(18px, 2.5vw, 22px);

  --lh-body: 1.7;
  --ls-eyebrow: 0.24em;
  --ls-uppercase: 0.18em;

  /* === LAYOUT === */
  --container-max: 1280px;
  --body-max: 680px;          /* essay text width */
  --catalog-max: 720px;       /* catalog/list width */

  /* Padding — Section 3.3 critical rule */
  --pad-mobile: 24px;         /* min 20-24px, NEVER sát mép */
  --pad-tablet: 32px;
  --pad-desktop: 64px;

  /* Vertical rhythm — baseline 8px */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  /* Section spacing — mobile 64px, desktop 96-128px */
  --section-pad-mobile: 64px;
  --section-pad-desktop: 96px;

  /* === MOTION === */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 0.22s;
  --dur-slow: 0.4s;

  /* === HOVER scale (Section 3.4) === */
  --hover-scale: 1.05;
  --hover-scale-strong: 1.08;

  /* === Z-INDEX === */
  --z-strip: 90;
  --z-nav: 100;
  --z-modal: 200;
}