/* ============================================================================
   MosVPN - Design tokens
   ----------------------------------------------------------------------------
   Nạp TRƯỚC mọi stylesheet khác. File này chỉ khai báo custom property, không
   có selector nào tạo ra hình hài, nên không bao giờ tranh chấp specificity với
   CSS cũ. Mọi component mới phải lấy giá trị từ đây thay vì gõ số trực tiếp.

   Quy ước: thang cỡ chữ và khoảng cách đều mobile-first. Giá trị mặc định là
   giá trị dùng cho điện thoại 320-430px; desktop mở rộng bằng clamp() hoặc bằng
   khối @media (min-width: ...) ở cuối file.
   ============================================================================ */

:root {
  /* ---- Màu thương hiệu ----
     Đỏ chỉ dùng cho hành động và điểm nhấn, chiếm khoảng 10-15% diện tích.
     Không dùng đỏ làm nền cho vùng lớn. */
  --mos-primary: #d41835;
  --mos-primary-dark: #a90e2b;
  --mos-primary-soft: #fff7f8;      /* blush, nền nhạt */
  --mos-primary-tint: #ffe9ec;      /* nền badge */

  /* ---- Màu NHÃN PHỤ (eyebrow, kicker, số mục lục, dòng ngày/thời gian đọc) ----
     Ba nhóm này từng trượt WCAG AA: đo trên nền thật, .seo-eyebrow đạt 3.61 và
     .seo-section-kicker 3.27 ở chế độ tối, còn dòng ngày đạt 3.50 trên nền
     trắng. Nguyên nhân là mỗi nhóm gán màu cứng cho MỘT chế độ rồi để chế độ
     kia dùng lại.
     Hai token dưới đây đổi theo theme (bản tối ở css/site-shell.css). Giá trị
     đã đo bằng phép trộn alpha đúng với nền cuối cùng, không đọc rgba() như màu
     đặc. Đây là màu, không phải cỡ chữ: phân cấp thị giác giữ nguyên. */
  --label-accent: #c51632;          /* 5.94:1 trên trắng, 5.38:1 trên nền badge #fcf1f3 */
  --label-muted: #5f6b7b;           /* 5.42:1 trên trắng */

  /* ---- Checklist ----
     Nền phải đổi theo theme. Bản cũ khoá cứng #f8fafc nên ở chế độ tối, chữ
     --shell-muted nằm trên nền gần trắng: 2.07:1, không đọc nổi. */
  --checklist-bg: #f8fafc;
  --checklist-border: #e3e7ed;

  /* ---- Màu chữ và đường viền ---- */
  --mos-ink: #111827;               /* chữ chính, 16.8:1 trên nền trắng */
  --mos-ink-muted: #667085;         /* chữ phụ, 4.97:1 trên nền trắng */
  --mos-border: #e7e9ee;
  --mos-surface: #ffffff;
  --mos-surface-alt: #f7f8fa;

  /* ---- Màu trạng thái ----
     Ba màu dưới đây đã kiểm tương phản trên nền trắng: đều vượt 4.5:1 nên dùng
     làm màu chữ được, không chỉ làm màu viền. */
  --mos-success: #0f7a4d;           /* 4.85:1 */
  --mos-success-soft: #e8f6ef;
  --mos-warning: #8a5a00;           /* 5.32:1 */
  --mos-warning-soft: #fff5e0;
  --mos-error: #b3261e;             /* 6.24:1 */
  --mos-error-soft: #fdeceb;

  /* ---- Thang khoảng cách ----
     Một thang duy nhất cho toàn site. Không tự chế giá trị ngoài thang này. */
  --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;

  /* ---- Container ----
     Điện thoại rất nhỏ dùng 14px để chữ không dính mép; từ 360px trở lên là
     16px. Giá trị nới rộng ở khối min-width bên dưới. */
  --mos-gutter: 16px;
  --mos-container: 100%;

  /* ---- Cỡ chữ ----
     Base 16px trên mobile. H1/H2 dùng clamp để lớn dần lên desktop mà không cần
     thêm breakpoint. Không có bậc nào dưới 12px. */
  --fs-3xs: 0.75rem;   /* 12px - nhỏ nhất được phép */
  --fs-2xs: 0.8125rem; /* 13px */
  --fs-xs: 0.875rem;   /* 14px */
  --fs-sm: 0.9375rem;  /* 15px */
  --fs-base: 1rem;     /* 16px - body mobile */
  --fs-lg: 1.0625rem;  /* 17px - body bài viết */
  --fs-xl: 1.25rem;
  --fs-h3: clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem);
  --fs-h2: clamp(1.625rem, 1.3rem + 1.6vw, 2.25rem);   /* 26px -> 36px */
  --fs-h1: clamp(2.125rem, 1.6rem + 2.6vw, 3.25rem);   /* 34px -> 52px */

  /* Tiếng Nga trung bình dài hơn tiếng Việt khoảng 15%, nên H1 bắt đầu nhỏ hơn
     một bậc để không tràn ba dòng trên máy 320px. */
  --fs-h1-ru: clamp(1.875rem, 1.45rem + 2.2vw, 3rem);  /* 30px -> 48px */

  /* ---- Chiều cao dòng ---- */
  --lh-tight: 1.15;
  --lh-heading: 1.22;
  --lh-body: 1.65;
  --lh-article: 1.72;

  /* ---- Bo góc ---- */
  --r-btn: 12px;
  --r-card: 16px;
  --r-card-lg: 20px;
  --r-sheet: 20px;
  --r-pill: 999px;

  /* ---- Đổ bóng ----
     Rất nhẹ, màu trung tính. Không dùng bóng đỏ phát sáng. */
  --sh-1: 0 1px 2px rgba(17, 24, 39, 0.05);
  --sh-2: 0 4px 12px rgba(17, 24, 39, 0.06);
  --sh-3: 0 10px 28px rgba(17, 24, 39, 0.09);
  --sh-sheet: 0 -8px 32px rgba(17, 24, 39, 0.14);

  /* ---- Vùng bấm ----
     44px là mức tối thiểu cho mọi điều khiển đứng riêng (WCAG 2.1 AA 2.5.5). */
  --tap: 44px;
  --tap-lg: 48px;

  /* ---- Lớp xếp chồng ----
     Khai báo tập trung để không còn z-index tùy hứng rải rác. */
  --z-header: 100;
  --z-sticky-cta: 90;
  --z-float: 95;
  --z-overlay: 200;
  --z-drawer: 210;

  /* ---- Chiều cao thanh cố định ---- */
  --header-h: 60px;

  /* ---- Chuyển động ---- */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
}

/* Máy rất nhỏ: giảm lề ngang để nội dung không bị bóp. */
@media (max-width: 359px) {
  :root {
    --mos-gutter: 14px;
  }
}

@media (min-width: 640px) {
  :root {
    --mos-gutter: 24px;
    --mos-container: 600px;
  }
}

@media (min-width: 768px) {
  :root {
    --mos-container: 720px;
    --header-h: 68px;
  }
}

@media (min-width: 1024px) {
  :root {
    --mos-gutter: 32px;
    --mos-container: 960px;
    --header-h: 74px;
  }
}

@media (min-width: 1280px) {
  :root {
    --mos-container: 1200px;
  }
}

/* Giao diện tối: chỉ đổi giá trị token, mọi component tự đi theo. */
html[data-theme="dark"] {
  --mos-ink: #e8ecf3;
  --mos-ink-muted: #9aa4b6;
  --mos-border: #263042;
  --mos-surface: #131a26;
  --mos-surface-alt: #0d131d;
  --mos-primary-soft: rgba(212, 24, 53, 0.12);
  --mos-primary-tint: rgba(212, 24, 53, 0.18);
  --mos-success-soft: rgba(15, 122, 77, 0.16);
  --mos-warning-soft: rgba(138, 90, 0, 0.18);
  --mos-error-soft: rgba(179, 38, 30, 0.16);
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 4px 12px rgba(0, 0, 0, 0.45);
  --sh-3: 0 10px 28px rgba(0, 0, 0, 0.5);
}