/* ================================================================
   VNMT — Design Tokens (đo trực tiếp từ Lumoria gốc)
   ================================================================ */

:root {

  /* COLORS — Burgundy + Champagne + Warm Dark (premium hospitality)
     Burgundy: tone "đỏ rượu" cao cấp — không quá tươi, không quá đậm.
     Champagne: ánh kim thay cho vàng be — accent cho thin lines, dots,
                stars, hover borders. Đây là tone "metallic" mới, không phẳng. */

  --color-primary:        #8B1F1F;
  --color-primary-dark:   #6B1414;
  --color-primary-light:  rgba(139, 31, 31, 0.12);

  /* Champagne — refined để ánh kim hơn (ít cam hơn, neutral hơn) */
  --color-secondary:      #C9A876;
  --color-secondary-dark: #A8854F;
  --color-secondary-light: rgba(201, 168, 118, 0.14);

  /* Gold metallic — dành riêng cho thin lines / accent / divider trên dark sections */
  --color-gold:           #B8924A;
  --color-gold-soft:      rgba(201, 168, 118, 0.45);
  --color-gold-line:      rgba(201, 168, 118, 0.30);

  /* Backwards-compat aliases */
  --color-accent:         var(--color-primary);
  --color-accent-dark:    var(--color-primary-dark);
  --color-accent-pale:    var(--color-primary-light);
  --color-primary-pale:   var(--color-primary-light);

  /* Warm Dark — hue lệch nhẹ về đỏ-nâu thay vì xám lạnh.
     Khi đặt burgundy + champagne lên trên, tone tổng ấm hơn = boutique hơn. */
  --color-dark:           #1A1411;
  --color-dark-2:         #0E0907;
  --color-dark-3:         #1F1815;
  --color-dark-card:      #251D18;

  --color-light:          #F5F4F2;
  --color-light-2:        #EDEDED;
  --color-white:          #FFFFFF;

  --color-text:           #585858;
  --color-text-dark:      #161616;
  --color-text-muted:     #888888;
  --color-text-light:     rgba(255, 255, 255, 0.75);
  --color-heading:        #161616;

  --color-border:         #DFDEDC;
  --color-border-dark:    rgba(255, 255, 255, 0.08);

  /* TYPOGRAPHY — VN-optimized
     Be Vietnam Pro: thiết kế riêng cho tiếng Việt (Bụi Studio) — dấu hoàn hảo,
     dùng cho heading & accent. Weights: 600 / 700 / 800.
     Inter: UI chuẩn quốc tế (Figma/Linear/Notion), readability cao,
     dùng cho body text. Weights: 400 / 500 / 600. */
  --font-heading: 'Be Vietnam Pro', 'Inter', sans-serif;
  --font-body:    'Inter', 'Be Vietnam Pro', sans-serif;
  --font-accent:  'Be Vietnam Pro', sans-serif;

  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-lg:    18px;
  --text-xl:    24px;
  --text-2xl:   36px;
  --text-3xl:   48px;
  --text-4xl:   60px;
  --text-5xl:   60px;        /* alias for legacy refs */
  --text-6xl:   60px;
  --text-hero:  60px;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     600;        /* Lumoria không dùng 700 — alias về 600 */
  --fw-black:    600;

  --lh-tight:   1.2;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.6;
  --lh-loose:   1.8;

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

  --section-py:    100px;
  --section-py-md: 70px;
  --section-py-sm: 50px;

  /* LAYOUT — container max-width: viewport 1920px = lề mỗi bên 100px */
  --container-max:   1720px;
  --container-pad:   16px;
  --grid-gap:        30px;
  --grid-gap-sm:     20px;

  /* BOXED SECTION (đặc trưng Lumoria) */
  --boxed-margin-x: 60px;
  --boxed-radius:   30px;

  /* RADIUS */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   30px;
  --radius-pill: 40px;
  --radius-full: 9999px;

  /* SHADOWS */
  --shadow-sm:  0 2px 8px rgba(22, 22, 22, 0.06);
  --shadow-md:  0 6px 24px rgba(22, 22, 22, 0.08);
  --shadow-lg:  0 12px 40px rgba(22, 22, 22, 0.12);
  --shadow-xl:  0 20px 60px rgba(22, 22, 22, 0.16);
  --shadow-accent: 0 8px 24px rgba(139, 31, 31, 0.32);

  /* TRANSITIONS */
  --transition-fast:   150ms ease;
  --transition-base:   300ms ease;
  --transition-slow:   500ms ease;
  --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-smooth: 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Z-INDEX */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
}

.section--dark {
  --color-text:       #FFFFFF;
  --color-text-muted: rgba(255, 255, 255, 0.6);
  --color-border:     rgba(255, 255, 255, 0.1);
  --color-heading:    #FFFFFF;
}

/* Container responsive — lề mỗi bên giảm dần để content rộng hơn */
@media (max-width: 1540px) { :root { --container-max: 1440px; } }
@media (max-width: 1280px) { :root { --container-max: 1205px; } }
@media (max-width: 1024px) { :root { --container-max:  950px; } }
@media (max-width:  767px) { :root { --container-max:  685px; } }
@media (max-width:  479px) { :root { --container-max:  450px; } }