/* ============================================================
   WPE — Design Tokens (Single Source of Truth)
   ============================================================
   File này định nghĩa TOÀN BỘ design tokens (color, font, spacing,
   shadow, radius...) của website WPE. Mọi page nên import file này
   TRƯỚC style.css/pages.css để guarantee consistency.

   Nguyên tắc:
   - Page KHÔNG được tự define lại các biến này trong inline <style>.
   - Page có thể define biến RIÊNG (prefix theo trang, vd --auth-*)
     nhưng phải REFERENCE token chính (vd --auth-bg: var(--bg);)
   - Khi đổi palette, chỉ sửa file này, cả site update.
   ============================================================ */

/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800;900&family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,700;1,800&display=swap'&family=Playfair+Display:ital,wght@1,700;1,900);

:root {
  /* ─── Typography ─── */
  --font-head:     'Manrope', 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --font-body:     'Manrope', 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;

  /* ─── Core Palette ─── */
  --primary:       #000666;   /* Deep navy — primary brand, hero, CTAs */
  --primary-2:     #1a237e;   /* Navy container — secondary surfaces */
  --primary-3:     #343d96;   /* Lighter navy — hover, accents on dark */

  --secondary:     #b6171e;   /* Red accent — section labels, badges, important CTA */
  --secondary-2:   #da3433;   /* Red lighter — hover */

  --accent:        #4c56af;   /* Medium blue — dividers, gradient mid */
  --accent-light:  #bdc2ff;   /* Light blue — text on dark navy */

  --white:         #ffffff;

  /* ─── Backgrounds ─── */
  --bg:            #fbf8ff;   /* Warm white — body bg */
  --bg-alt:        #efecf5;   /* Surface container — alternating sections */
  --bg-low:        #f5f2fb;   /* Surface container low — subtle hover */
  --card:          #ffffff;   /* Card background */

  /* ─── Borders ─── */
  --border:        #c6c5d4;
  --border-light:  #e4e1ea;

  /* ─── Text ─── */
  --text:          #1b1b21;   /* Body text on light bg */
  --text-2:        #454652;   /* Secondary text, captions */
  --text-3:        #767683;   /* Muted text, meta info */

  /* ─── Semantic colors ─── */
  --green:         #000666;   /* Success, active states */
  --gold:          #f59e0b;   /* Warning, gold ratings */

  /* ─── Border Radius ─── */
  --r:             4px;
  --r-md:          8px;
  --r-lg:          12px;
  --r-xl:          16px;

  /* ─── Shadows ─── */
  --shadow-sm:     0 1px 3px rgba(27,27,33,0.07), 0 1px 8px rgba(27,27,33,0.04);
  --shadow:        0 4px 16px rgba(27,27,33,0.10);
  --shadow-lg:     0 30px 40px -15px rgba(27,27,33,0.12);
  --shadow-red:    0 8px 24px rgba(182,23,30,0.25);
  --shadow-navy:   0 6px 20px rgba(0,6,102,0.30);

  /* ─── Transitions ─── */
  --tr:            0.2s ease;
  --tr-slow:       0.4s cubic-bezier(.16,1,.3,1);

  /* ─── Layout ─── */
  --max:           1440px;     /* Container max-width */
  --max-content:   1200px;     /* Content max-width (narrower) */
  --nav-h:         72px;       /* Navbar height — sticky offset */

  /* ─── Spacing scale (8px base) ─── */
  --sp-1:          4px;
  --sp-2:          8px;
  --sp-3:          12px;
  --sp-4:          16px;
  --sp-5:          20px;
  --sp-6:          24px;
  --sp-8:          32px;
  --sp-10:         40px;
  --sp-12:         48px;
  --sp-16:         64px;
  --sp-20:         80px;       /* Section padding desktop */
  --sp-24:         96px;
}