/* ═══════════════════════════════════════════════════
   DESIGN TOKENS — AI Workforce by ALOBASE
   Nguồn: ALOBASE_Brand_Guideline_01_Trang.docx (v1.1, 09/2026)
   Kiểm chứng đối chiếu computed style của https://test.alobase.vn
   ═══════════════════════════════════════════════════ */

:root {
  /* ── Bảng màu chính thức (mục 5 Brand Guideline) ── */
  --primary:   #2B3990;  /* Primary      */
  --blue:      #1F4FA8;  /* Digital blue */
  --deep:      #18306F;  /* Deep         */
  --sky:       #D9EEF7;  /* Sky          */
  --canvas:    #F5F4FC;  /* Canvas       */
  --text:      #263659;  /* Text         */
  --white:     #ffffff;

  /* ── Dẫn xuất (chỉ pha từ 6 màu trên, không thêm hue mới) ── */
  --footer-bg:   #18234F;            /* nền footer, lấy từ test.alobase.vn */
  --primary-12:  rgba(43,57,144,.12);
  --primary-08:  rgba(43,57,144,.08);
  --primary-04:  rgba(43,57,144,.04);
  --ink:         #18306F;            /* Deep: tiêu đề theo Brand Guideline */
  --muted:       #52617F;
  --subtle:      #8B95B4;
  --line:        #E2E4F2;
  --line-strong: #CBD1E8;
  --mist:        #EDF0FA;

  /* Trên nền tối */
  --on-dark:        #ffffff;
  --on-dark-soft:   #D7DEF3;
  --on-dark-muted:  #A6B2D6;
  --on-dark-line:   rgba(255,255,255,.16);
  --on-dark-card:   rgba(255,255,255,.06);

  /* ── Phông chữ (mục 3 Brand Guideline: Montserrat toàn bộ) ── */
  --font: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ── Cỡ chữ ── */
  --h1:       clamp(2.35rem, 4.8vw, 3.85rem);
  --h2:       clamp(1.85rem, 3.3vw, 2.7rem);
  --h3:       clamp(1.02rem, 1.5vw, 1.18rem);
  --body:     1rem;
  --small:    0.9rem;
  --tiny:     0.78rem;
  --micro:    0.705rem;

  /* ── Giãn dòng: Montserrat ở cỡ nhỏ cần thoáng hơn ── */
  --lh-tight: 1.16;
  --lh-head:  1.28;
  --lh-body:  1.72;

  /* ── Khoảng cách ── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 88px; --sp-10: 112px;

  /* ── Bo góc (đối chiếu test.alobase.vn) ── */
  --r-xs:   8px;
  --r-sm:   12px;
  --r:      16px;
  --r-lg:   22px;
  --r-xl:   26px;
  --r-pill: 999px;

  /* ── Bố cục ── */
  --max:        1180px;
  --max-narrow: 800px;
  --nav-h:      72px;

  /* ── Đổ bóng: rất nhẹ, guideline yêu cầu nhiều khoảng thở ── */
  --sh-xs: 0 1px 2px rgba(27,38,71,.05);
  --sh-sm: 0 4px 16px rgba(27,38,71,.06);
  --sh:    0 12px 34px rgba(27,38,71,.09);
  --sh-lg: 0 26px 64px rgba(24,48,111,.16);

  /* ── Chuyển động ── */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --t-fast:    .18s;
  --t:         .32s;
  --t-slow:    .62s;

  --z-nav: 100;
}

/* ── Vùng nền tối: đảo biến màu chữ, không đặt lại màu nền ── */
.on-dark {
  --ink:    var(--on-dark);
  --text:   var(--on-dark-soft);
  --muted:  var(--on-dark-muted);
  --subtle: var(--on-dark-muted);
  --line:   var(--on-dark-line);
  --line-strong: rgba(255,255,255,.26);
  color: var(--text);
}