/* ==========================================================================
   AU VIET RACK — DESIGN TOKENS
   Nguồn chuẩn duy nhất cho màu, chữ, khoảng cách, bo góc, đổ bóng, motion.
   Dev KHÔNG hard-code giá trị — luôn dùng biến trong file này.
   ========================================================================== */

:root {
  /* ---------- 1. COLOR — BRAND ---------- */
  --c-navy-900: #011E4D;  /* nền CTA band (đậm nhất), gradient hero */
  --c-navy-800: #002B6E;  /* top bar liên hệ */
  --c-navy-700: #0A3A82;  /* gradient hero (điểm sáng hơn) */
  --c-blue-700: #123C8F;  /* tiêu đề mục, chữ "RACK" trong logo */
  --c-blue-600: #1D4FB8;  /* icon line-art, bullet check xanh */
  --c-blue-500: #2E5FD0;  /* link, trạng thái focus */
  --c-blue-200: #C7D7F5;  /* viền nhấn nhạt */
  --c-blue-100: #E4ECFB;  /* nền tròn của icon thông số */
  --c-blue-050: #EFF4FE;  /* nền card "Giải pháp" */

  --c-orange-900: #832F06; /* nút primary :active */
  --c-orange-800: #A43F09; /* nút primary :hover */
  --c-orange-700: #C24E0B; /* nút primary — MÀU NỀN CHÍNH (đạt AA 4.8:1 với chữ trắng) */
  --c-orange-600: #DB5C11; /* hover top-bar, các chi tiết cam khác (không phải nút) */
  --c-orange-500: #F26B1A; /* badge, bullet, gạch chân menu active, chữ "AUVIET" trong logo */
  --c-orange-400: #FB8237; /* điểm sáng gradient nút */
  --c-orange-100: #FFE3D0; /* viền/nền nhấn ấm */
  --c-orange-050: #FFF5EF; /* nền card "Bài toán khách hàng" */

  /* ---------- 2. COLOR — NEUTRAL / TEXT ---------- */
  --c-ink-900: #102340;   /* tiêu đề trên nền sáng */
  --c-ink-700: #33415C;   /* body text */
  --c-ink-500: #5B6B84;   /* text phụ, giá trị thông số */
  --c-ink-400: #8794A8;   /* breadcrumb chưa active, placeholder */
  --c-line:    #E4E9F2;   /* đường kẻ, divider */
  --c-line-soft: #F0F3F8;
  --c-surface: #FFFFFF;
  --c-surface-alt: #F7F9FC; /* nền trang giữa các section (nếu cần) */

  /* ---------- 3. COLOR — ON DARK ---------- */
  --c-on-dark:        #FFFFFF;
  --c-on-dark-muted:  rgba(255, 255, 255, .82);
  --c-on-dark-faint:  rgba(255, 255, 255, .60);
  --c-on-dark-line:   rgba(255, 255, 255, .18);

  /* ---------- 4. COLOR — SEMANTIC ---------- */
  --c-success: #16A34A;
  --c-warning: #F59E0B;
  --c-danger:  #DC2626;
  --c-focus:   #2E5FD0;

  /* ---------- 5. GRADIENT ---------- */
  /* Overlay hero: đậm bên trái -> trong suốt bên phải để chữ luôn đọc được */
  --g-hero-overlay: linear-gradient(
      90deg,
      rgba(1, 30, 77, .96) 0%,
      rgba(1, 30, 77, .90) 28%,
      rgba(2, 43, 110, .55) 58%,
      rgba(2, 43, 110, .10) 100%);
  --g-cta-band: linear-gradient(100deg, #011E4D 0%, #063377 55%, #0A3A82 100%);
  --g-btn-primary: linear-gradient(180deg, var(--c-orange-400) 0%, var(--c-orange-500) 100%);

  /* ---------- 6. TYPOGRAPHY ---------- */
  /* Font tiêu đề: Saira (600/700/800) — dùng cho h1–h4 và wordmark logo.
     Font văn bản: Inter (400/500/600/700) — dùng cho mọi phần còn lại.
     Be Vietnam Pro giữ làm fallback vì dấu tiếng Việt dựng riêng, phòng khi 2 font trên chưa tải kịp. */
  --font-heading: "Saira", "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
  --font-sans: "Inter", "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system,
               "Helvetica Neue", Arial, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* size / line-height — desktop (>=1280px) */
  --fs-display: 44px;  --lh-display: 1.24;  /* H1 hero */
  --fs-h2:      30px;  --lh-h2:      1.30;  /* tiêu đề card lớn */
  --fs-h3:      22px;  --lh-h3:      1.36;  /* tiêu đề CTA band */
  --fs-h4:      17px;  --lh-h4:      1.45;  /* nhãn thông số */
  --fs-body-lg: 17px;  --lh-body-lg: 1.70;
  --fs-body:    16px;  --lh-body:    1.70;
  --fs-body-sm: 15px;  --lh-body-sm: 1.60;
  --fs-label:   14px;  --lh-label:   1.50;
  --fs-caption: 13px;  --lh-caption: 1.45;

  --ls-tight: -0.01em;
  --ls-wide:  0.03em;
  --ls-caps:  0.06em;   /* dùng cho badge & menu viết hoa */

  /* ---------- 7. SPACING (thang 4pt) ---------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-7: 32px;  --sp-8: 40px;
  --sp-9: 48px;  --sp-10: 56px; --sp-11: 64px; --sp-12: 80px;
  --sp-13: 96px; --sp-14: 120px;

  /* Nhịp dọc giữa các section */
  --section-gap: var(--sp-13);        /* 96px desktop */
  --section-gap-md: var(--sp-11);     /* 64px tablet  */
  --section-gap-sm: var(--sp-9);      /* 48px mobile  */

  /* ---------- 8. LAYOUT ---------- */
  --canvas: 1440px;         /* khung thiết kế gốc */
  --container: 1200px;      /* bề rộng nội dung tối đa */
  --gutter: 40px;           /* lề trái/phải desktop */
  --gutter-md: 24px;
  --gutter-sm: 16px;
  --grid-cols: 12;
  --grid-gap: 24px;

  --h-topbar: 44px;
  --h-header: 84px;
  --h-header-scrolled: 68px;
  --h-breadcrumb: 52px;
  --h-hero: 560px;

  /* ---------- 9. RADIUS ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-pill: 999px;

  /* ---------- 10. SHADOW ---------- */
  --sh-xs:    0 1px 2px rgba(16, 35, 64, .06);
  --sh-sm:    0 4px 12px rgba(16, 35, 64, .06);
  --sh-card:  0 12px 32px rgba(5, 30, 80, .08);
  --sh-float: 0 24px 60px rgba(5, 30, 80, .14);   /* card thông số đè lên hero */
  --sh-header:0 2px 16px rgba(16, 35, 64, .10);   /* header khi sticky/scrolled */
  --sh-btn:   0 8px 20px rgba(242, 107, 26, .32);
  --sh-btn-hover: 0 12px 26px rgba(242, 107, 26, .40);

  /* ---------- 11. BORDER ---------- */
  --bw-hairline: 1px;
  --bw-thick: 2px;
  --focus-ring: 0 0 0 3px rgba(46, 95, 208, .35);

  /* ---------- 12. MOTION ---------- */
  --dur-instant: 100ms;
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    400ms;
  --dur-reveal:  600ms;
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out:      cubic-bezier(0, 0, .2, 1);
  --ease-in:       cubic-bezier(.4, 0, 1, 1);
  --ease-emphasis: cubic-bezier(.22, 1, .36, 1);

  /* ---------- 13. Z-INDEX ---------- */
  --z-base: 0;
  --z-raised: 10;      /* card thông số đè hero */
  --z-sticky: 100;     /* header */
  --z-dropdown: 200;   /* mega/dropdown menu */
  --z-overlay: 900;    /* backdrop lightbox */
  --z-modal: 1000;     /* lightbox gallery */
  --z-toast: 1100;
}

/* Thu nhỏ type scale ở tablet & mobile — chỉ ghi đè biến, component không đổi */
@media (max-width: 1023px) {
  :root {
    --fs-display: 34px; --lh-display: 1.26;
    --fs-h2: 26px;
    --fs-h3: 20px;
    --fs-body-lg: 16px;
    --gutter: var(--gutter-md);
    --section-gap: var(--section-gap-md);
    --h-hero: 460px;
    --h-header: 72px;
  }
}

@media (max-width: 767px) {
  :root {
    --fs-display: 27px; --lh-display: 1.30;
    --fs-h2: 22px;
    --fs-h3: 18px;
    --fs-h4: 16px;
    --fs-body: 15px;
    --fs-body-sm: 14px;
    --gutter: var(--gutter-sm);
    --section-gap: var(--section-gap-sm);
    --grid-gap: 16px;
    --h-hero: 400px;
    --h-topbar: 0px;      /* ẩn top bar trên mobile */
    --h-header: 64px;
    --h-breadcrumb: 44px;
  }
}

/* Tôn trọng thiết lập giảm chuyển động của người dùng */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms; --dur-fast: 1ms; --dur-base: 1ms;
    --dur-slow: 1ms; --dur-reveal: 1ms;
  }
}