/**
 * Genera by The Solia - Enterprise Design Tokens
 * Strictly WCAG 2.1 AA Compliant & Modular Fluid Scale
 */

:root {
  /* ==========================================================================
     1. BRAND COLOR SYSTEM (Thang màu Vàng - Cam - Nâu Solia)
     ========================================================================== */
  --brand-gold-light:    #FBE8BF; /* Nền highlight nhẹ, badge tint */
  --brand-gold:          #F6B34A; /* Vàng Saffron nhận diện chính */
  --brand-amber:         #DE852C; /* Cam đất nung ấm áp */
  --brand-bronze:        #B35B18; /* Đồng trầm chuyển tiếp */
  --brand-espresso:      #75300B; /* Nâu cà phê đậm (Tương phản 9.6:1 trên trắng) */
  --brand-espresso-dark: #531A06; /* Nâu bóng đêm */

  /* ==========================================================================
     2. EDITION BADGE COLORS (Màu định danh 3 dòng sản phẩm tư dinh)
     ========================================================================== */
  --edition-grand:       #8BAA7C; /* Grand Edition - Xanh ngải cứu thiên nhiên */
  --edition-signature:   #EDD3BA; /* Signature Edition - Be sáng trang nhã */
  --edition-legacy:      #C6997E; /* Legacy Edition - Hồng đất cổ điển */

  /* ==========================================================================
     3. SURFACE & BACKGROUND TOKENS
     ========================================================================== */
  --surface-cream:       #FDFBF7; /* Nền kem sáng ấm thay cho trắng toát */
  --surface-white:       #FFFFFF; /* Trắng tinh khôi */
  --surface-dark:        #120D0A; /* Nền tối phối cảnh chính */
  --surface-card-dark:   #1C1511; /* Thẻ card trên nền tối */
  --surface-border-dark: rgba(222, 133, 44, 0.25); /* Viền màu đồng mờ */

  /* ==========================================================================
     4. TYPOGRAPHY COLOR TOKENS (Đảm bảo tương phản WCAG 2.1 AA >= 4.5:1)
     ========================================================================== */
  --text-on-dark:        #FFFFFF; /* Chữ trắng trên nền tối */
  --text-muted-dark:     #C8B8AE; /* Chữ phụ trên nền tối */
  --text-on-light:       #2D231E; /* Chữ đọc văn bản chính trên nền sáng (13.5:1) */
  --text-muted-light:    #6E5D55; /* Chữ phụ trên nền sáng (5.8:1) */
  --text-gold:           #F6B34A; /* Chữ vàng trên nền tối */

  /* ==========================================================================
     5. LUXURY GRADIENTS
     ========================================================================== */
  --gradient-gold:       linear-gradient(135deg, #F6B34A 0%, #DE852C 50%, #B35B18 100%);
  --gradient-gold-v:     linear-gradient(0deg, #B35B18 0%, #DE852C 100%);
  --gradient-dark-hero:  linear-gradient(180deg, rgba(18, 13, 10, 0.3) 0%, rgba(18, 13, 10, 0.85) 100%);
  --gradient-dark-card:  linear-gradient(180deg, rgba(28, 21, 17, 0.9) 0%, rgba(18, 13, 10, 0.95) 100%);

  /* ==========================================================================
     6. FLUID TYPOGRAPHY SCALE (clamp() chuẩn không vỡ khung hình)
     ========================================================================== */
  --font-h1:      clamp(2.1rem, 5vw + 1rem, 4rem);       /* 33.6px - 64px */
  --font-h2:      clamp(1.65rem, 3.5vw + 0.5rem, 2.75rem); /* 26.4px - 44px */
  --font-h3:      clamp(1.25rem, 2vw + 0.5rem, 1.75rem);   /* 20px - 28px */
  --font-h4:      clamp(1.1rem, 1.2vw + 0.5rem, 1.35rem);  /* 17.6px - 21.6px */
  --font-body:    clamp(0.95rem, 0.5vw + 0.8rem, 1.05rem); /* 15.2px - 16.8px */
  --font-caption: clamp(0.8rem, 0.3vw + 0.75rem, 0.875rem);/* 12.8px - 14px (Tuyệt đối không dưới 12px) */

  /* ==========================================================================
     7. SPACING & LAYOUT TOKENS
     ========================================================================== */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  64px;
  --space-2xl: 96px;

  --container-max: 1240px;
  --header-height: 80px;

  /* ==========================================================================
     8. BORDER RADIUS & SHADOWS
     ========================================================================== */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md:   0 8px 24px rgba(0, 0, 0, 0.2);
  --shadow-lg:   0 16px 48px rgba(0, 0, 0, 0.35);
  --shadow-gold: 0 4px 20px rgba(246, 179, 74, 0.3);

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}