/* =========================================================
   Mây Travel – Design tokens (trích từ bản thiết kế)
   Dùng làm nền cho assets/css/tokens.css trong theme WordPress.
   ========================================================= */
:root {
  /* ---- Màu thương hiệu ---- */
  --mt-primary:        #0B5FD9; /* nút chính, link, tab active */
  --mt-primary-dark:   #0848A8; /* hover, chữ trên nền primary-soft */
  --mt-primary-soft:   #EAF2FF; /* nền chip "Vé máy bay", nền icon */
  --mt-primary-tint:   #F3F8FF; /* nền item đang chọn (gói, ngày, ngày lịch trình mở) */
  --mt-primary-line:   #9CC0F5; /* viền ngày lịch trình đang mở */
  --mt-hero:           #0B3F8F; /* nền hero (khi chưa có ảnh) */

  --mt-price:          #C2410C; /* giá, badge giảm giá, nút Đăng ký newsletter */
  --mt-price-soft:     #FFF1E8;
  --mt-highlight:      #F7C873; /* badge "Ưu đãi", "Tiết kiệm nhất", "Combo" */
  --mt-meal:           #B45309; /* chữ chip bữa ăn */
  --mt-meal-soft:      #FFF4E5;
  --mt-star:           #D97706;

  --mt-success:        #13795B; /* khách sạn, "Còn x chỗ", dấu check */
  --mt-success-soft:   #E6F5EF;
  --mt-danger:         #B42318; /* "Chỉ còn x chỗ", "Không bao gồm" */

  /* ---- Trung tính ---- */
  --mt-ink:            #0F1E3D; /* chữ chính, nền topbar & footer */
  --mt-ink-2:          #25324F; /* chữ đoạn văn dài */
  --mt-muted:          #4A5877; /* chữ phụ (đạt 4.5:1 trên trắng) */
  --mt-muted-2:        #9AA7BD; /* viền radio chưa chọn */
  --mt-line:           #E3E8F0; /* viền card */
  --mt-line-2:         #D5DCE8; /* viền input, đường kẻ đứt giá */
  --mt-line-3:         #C9D3E3; /* viền nút outline */
  --mt-line-soft:      #EEF1F6; /* kẻ trong card */
  --mt-bg:             #F5F7FB; /* nền trang */
  --mt-surface:        #FFFFFF;
  --mt-chip:           #F0F3F8; /* chip trung tính */

  --mt-footer-text:    #C4CEE0;
  --mt-footer-line:    #243659;
  --mt-footer-chip:    #1C2E52;
  --mt-topbar-text:    #D6DEEC;

  /* ---- Typography ---- */
  --mt-font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mt-fs-hero: 56px;   /* H1 hero, 800, lh 1.12, ls -0.02em */
  --mt-fs-h1: 36px;     /* H1 trang danh sách; trang chi tiết 34px */
  --mt-fs-h2: 34px;     /* tiêu đề section trang chủ, 800 */
  --mt-fs-h2-sm: 28px;  /* "Tour tương tự" */
  --mt-fs-h3: 22px;     /* tiêu đề card section trang chi tiết, 800 */
  --mt-fs-lead: 19px;
  --mt-fs-body: 15px;
  --mt-fs-sm: 14px;
  --mt-fs-xs: 13px;
  --mt-fs-2xs: 12px;
  --mt-fw-regular: 400;
  --mt-fw-medium: 500;
  --mt-fw-semibold: 600;
  --mt-fw-bold: 700;
  --mt-fw-black: 800;

  /* ---- Khoảng cách / lưới ---- */
  --mt-container: 1260px;   /* 1440 - 2 x 90 (nới từ 1200 cho thoáng) */
  --mt-gutter: 24px;        /* gap lưới 12 cột, card grid */
  --mt-section-gap: 80px;   /* khoảng cách giữa các section trang chủ */
  --mt-card-pad: 28px;      /* padding card section trang chi tiết */
  --mt-sidebar-filter: 288px;
  --mt-sidebar-booking: 400px;

  /* ---- Bo góc ---- */
  --mt-r-sm: 6px;    /* badge, chip */
  --mt-r-md: 10px;
  --mt-r-lg: 12px;   /* nút, input */
  --mt-r-xl: 16px;   /* card */
  --mt-r-2xl: 20px;  /* search box, booking box, gallery, tile điểm đến */
  --mt-r-3xl: 24px;  /* banner combo, newsletter */
  --mt-r-pill: 999px;

  /* ---- Đổ bóng ---- */
  --mt-shadow-search: 0 16px 40px rgba(15, 30, 61, .18);
  --mt-shadow-booking: 0 12px 32px rgba(15, 30, 61, .08);

  /* ---- Kích thước chạm ---- */
  --mt-touch: 44px;  /* tối thiểu cho mọi nút */
  --mt-btn-lg: 52px; /* nút "Đặt tour ngay", input newsletter */
}

/* ---- Bổ sung theme (vẫn thuộc hệ tokens) ---- */
:root {
  --mt-white:          #FFFFFF;
  --mt-hero-2:         #12519F; /* lớp núi hero placeholder */
  --mt-hero-3:         #1A63B8;
  --mt-hero-4:         #2574CC;
  --mt-hero-text:      #DCE7FA;
  --mt-footer-accent:  #6FA8FF;
  --mt-upsell-flight-line: #7FA9E8;
  --mt-upsell-hotel-line:  #6DBB9C;
  --mt-overlay:        rgba(15, 30, 61, .55);
  --mt-overlay-soft:   rgba(0, 0, 0, .3);
  --mt-overlay-hero:   linear-gradient(180deg, rgba(11, 30, 70, .10) 0%, rgba(11, 30, 70, .35) 45%, rgba(11, 30, 70, .72) 100%);
  --mt-overlay-tile:   linear-gradient(180deg, rgba(15, 30, 61, 0) 35%, rgba(15, 30, 61, .72) 100%);
  --mt-glass:          rgba(255, 255, 255, .92);
  --mt-shade:          rgba(0, 0, 0, .14);
  --mt-white-20:       rgba(255, 255, 255, .2);
  --mt-backdrop:       rgba(15, 30, 61, .6);
  --mt-shadow-card:    0 8px 24px rgba(15, 30, 61, .08);
  --mt-shadow-bar:     0 -8px 24px rgba(15, 30, 61, .12);
  --mt-header-h:       76px;
  --mt-topbar-h:       36px;
}