/* ==========================================================================
   tokens.css
   Token mặc định dùng chung. KHÔNG sửa file này khi làm site mới.
   Màu riêng nhập ở Simple → Thương hiệu; main.css và login.css chỉ gọi biến token.
   ========================================================================== */

:root {
  color-scheme: only light; /* Simple hiện là light-only; ngăn UA tự ép bảng màu dark. */


  /* ---------- 1. BRAND ----------
     Đây là coordinated palette fallback. Site khác nhập một JSON palette hoàn
     chỉnh tại Simple → Thương hiệu; không phối từng màu trong Theme. */
  --brand:      #0B62A8;
  --brand-dark: #084B82;
  --brand-soft: #EAF3FB;
  --brand-line: #C3DCF1;
  --brand-text: #FFFFFF;

  --cta:      #0E9F8C;
  --cta-text: #1B2430;


  /* ---------- 2. TRUNG TÍNH / SURFACE ---------- */
  --ink:       #0F172A;
  --ink-2:     #334155;
  --muted:     #5B6B7C;
  --line:      #E2E8F0;
  --bg:        #FFFFFF;
  --bg-2:      #F7FAFC;
  --canvas-bg: #F7FAFC;
  --footer-bg: #084B82;
  --footer-text: #EAF3FB;

  --simple-overlay-base: #0F172A;
  --simple-overlay: color-mix(in srgb, var(--simple-overlay-base) 80%, transparent);
  --simple-focus-color: #0B62A8;
  --simple-focus-width: 3px;


  /* ---------- 3. TRẠNG THÁI ----------
     Palette JSON phải giữ các cặp chữ/nền canonical đạt contrast contract. */
  --ok:          #0D9488;
  --ok-text:     #0A6E62;
  --ok-soft:     #E6F6F3;
  --warn:        #B45309;
  --warn-soft:   #FEF6E7;
  --danger:      #C2410C;
  --danger-soft: #FDECE4;

  /* ---------- 4. SPACING — PUBLIC FOUNDATION (lưới 8pt) ----------
     Content-facing modules dùng scale này thay vì tự phát minh margin/gap/padding
     tương đương. Component-specific geometry vẫn do owner quyết định. */
  --s1: 8px; --s2: 16px; --s3: 24px;
  --s4: 32px; --s5: 48px; --s6: 64px;

  /* Semantic layout aliases để module không phải lặp media query của Theme. */
  --simple-page-gutter: var(--s3);
  --simple-section-space: var(--s5);
  --simple-control-min-height: 44px;

  /* ---------- 5. BO GÓC — PUBLIC FOUNDATION ---------- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;
  --simple-button-radius: 30px; /* public control token; override từ Simple → Giao diện */

  /* ---------- 6. ĐỔ BÓNG — PUBLIC FOUNDATION, chỉ 3 mức ---------- */
  --sh-1: 0 1px 2px   rgba(15, 23, 42, .05);
  --sh-2: 0 4px 14px  rgba(15, 23, 42, .07);
  --sh-3: 0 12px 30px rgba(15, 23, 42, .10);

  /* ---------- 7. LAYOUT — PUBLIC FOUNDATION ---------- */
  --simple-wrap-width: 1140px;
  --site-box: 1240px;
  --simple-prose-width: 35.75rem;
  --simple-wide-width: 64.5rem;
  --simple-anchor-offset: 96px; /* sticky header + khoảng an toàn; CSS-only, không đo layout bằng JS */

  /* ---------- 8. MOTION — PUBLIC FOUNDATION, CSS-only ---------- */
  --simple-motion-fast: 160ms;
  --simple-motion-base: 220ms;
  --simple-ease-out: cubic-bezier(.2, .8, .2, 1);

  /* ---------- 9. FONT — PUBLIC FOUNDATION, system stack, tải về 0 byte ----------
     system-ui/Segoe UI/Roboto đọc tiếng Việt tốt, không request font và tránh
     CLS/FOIT. Google Font chỉ nên self-host khi nhận diện thương hiệu cần. */
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* ---------- 10. THANG CHỮ — PUBLIC FOUNDATION ---------- */
  --t-xs: 13px; --t-sm: 15px; --t-base: 17px; --t-lg: 20px;
  --t-xl: 24px; --t-2xl: 30px; --t-3xl: 38px;
}

/* Responsive Foundation: Theme + module consumer dùng cùng gutter/section rhythm. */
@media (max-width: 640px) {
  :root {
    --simple-page-gutter: var(--s2);
    --simple-section-space: var(--s4);
  }
}

/* Mobile: text phụ không xuống dưới 16px theo current Stack typography contract. */
@media (max-width: 767px) {
  :root { --t-sm: 16px; }
}