/* ============================================================
   TOKENS.CSS — LUMIÈRE Hanoi Seasons Garden · The Bloom LDP
   Design tokens theo WIREFRAME_LUMIERE_THE_BLOOM.md Phần 6.2–6.4, 7.2
============================================================ */

:root{
  /* ---- 6.2 Bảng màu (Brand Guideline + champagne accent) ---- */
  --c-primary:      #30413B; /* Dark Slate Grey — nền tối, tiêu đề, header */
  --c-secondary:    #B7BA9F; /* Dry Sage — chữ phụ trên nền tối, đường nét */
  --c-deep:         #455F39; /* Tom Thumb — hover, nhấn số liệu, badge */
  --c-accent:       #B9A07E; /* Champagne — CHỈ dùng cho CTA / điểm nhấn chuyển đổi */

  --c-ink:          #1F2A26; /* chữ trên nền champagne · nền footer */
  --c-cream:        #F5F3EC; /* nền section sáng xen kẽ */
  --c-white:        #FFFFFF;
  --c-text:         #30413B; /* chữ body trên nền sáng */
  --c-text-mute:    #6B7A72; /* chữ phụ, nhãn */
  --c-text-faint:   #8A9691; /* disclaimer, caption */
  --c-border:       #E4E1D6; /* viền card, divider trên nền sáng */
  --c-border-dark:  rgba(183,186,159,.22); /* divider trên nền tối */
  --c-error:        #B3524A;

  /* ---- Typography ---- */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body:    "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* ---- 7.2 Container & gutter ---- */
  --container:        1200px;
  --container-narrow: 940px;
  --container-text:   900px;
  --container-form:   1040px;
  --gutter-desktop:   32px;
  --gutter-mobile:    20px;

  /* ---- 6.4 Spacing & hình khối ---- */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;

  --sp-section:    64px;  /* mobile default */
  --sp-section-lg: 72px;  /* mobile: hero, giá, form cuối */

  --radius-sm:   2px;
  --radius-btn:  2px;
  --radius-pill: 999px;

  --shadow-card:  0 2px 12px rgba(48,65,59,.06);
  --shadow-hover: 0 16px 40px rgba(48,65,59,.12);
  --shadow-float: 0 24px 64px rgba(20,30,26,.28);

  --line: 1px solid var(--c-border);

  --ease: cubic-bezier(.22,.61,.36,1);
}

@media (min-width: 1024px){
  :root{
    --sp-section:    112px;
    --sp-section-lg: 120px;
  }
}