/* ===========================================================
   Cơm Văn Phòng Đủ Đầy — brand tokens
   Bếp nấu cơm trưa văn phòng · Cầu Giấy – Mỹ Đình, Hà Nội
   Dial: COMMERCE · Tone: mainstream-trust
   Sửa file này để đổi thương hiệu; index.html kế thừa toàn bộ.
   =========================================================== */

:root {
  /* ---- Màu nền / mực ---- */
  --bg:            #F8FAF7;  /* nền trang, xanh lá rất nhạt */
  --bg-alt:        #EDF3EC;  /* nền band xen kẽ + card */
  --card:          #FFFFFE;  /* mặt card nổi */
  --ink:           #16211A;  /* chữ chính */
  --ink-2:         #3D4C43;  /* chữ phụ, đạt AA trên --bg */
  --ink-3:         #5C6B61;  /* chú thích, đạt AA trên --bg */
  --line:          #D3DFD4;  /* đường kẻ mảnh */
  --line-strong:   #B3C4B5;  /* kẻ đậm hơn cho bảng */

  /* ---- Accent ---- */
  --green:         #2F7D4F;  /* accent chính: nút, số liệu, chip */
  --green-deep:    #245F3C;  /* hover + chữ xanh cỡ nhỏ trên nền sáng */
  --green-wash:    #E2EFE5;  /* nền chip xanh nhạt */
  --orange:        #E4622A;  /* cam thương hiệu — chỉ dùng cho MẢNG LỚN/viền, không cho chữ nhỏ */
  --orange-deep:   #A83F14;  /* chữ cam cỡ nhỏ trên nền sáng — đạt AA (≥4.5:1) */
  --orange-solid:  #B8480F;  /* nền badge có chữ trắng — đạt AA cho chữ trắng 11px */
  --orange-wash:   #FCEBE3;

  /* ---- Màu chức năng ---- */
  --dark:          #16211A;  /* nền band tối */
  --on-dark:       #EAF1EB;
  --on-dark-2:     #A9BCAE;  /* AA trên --dark */

  /* ---- Chữ ---- */
  --f-display: 'Be Vietnam Pro', system-ui, sans-serif;
  --f-body:    'Roboto', system-ui, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* thang chữ modular (~1.22), 12 bậc */
  --t-mono:    0.6875rem;  /* 11px  nhãn mono */
  --t-xs:      0.75rem;    /* 12px */
  --t-sm:      0.8125rem;  /* 13px */
  --t-base:    1.03125rem; /* 16.5px thân bài theo brand card */
  --t-md:      1.125rem;   /* 18px */
  --t-lg:      1.375rem;   /* 22px  câu dẫn */
  --t-xl:      1.6875rem;  /* 27px */
  --t-2xl:     clamp(1.5rem, 1.1rem + 1.7vw, 2.0625rem);
  --t-3xl:     clamp(1.75rem, 1.2rem + 2.4vw, 2.625rem);
  --t-4xl:     clamp(2.125rem, 1.35rem + 3.4vw, 3.5rem);
  --t-hero:    clamp(2.375rem, 1.35rem + 4.4vw, 4.25rem);
  --t-num:     clamp(2rem, 1.3rem + 3vw, 3.25rem); /* số liệu lớn */

  --lh-body:   1.62;  /* ≥1.5 bắt buộc cho tiếng Việt */
  --lh-tight:  1.5;
  --lh-display:1.12;  /* ≥1.05 để không cắt dấu Ầ / ỹ / ọ */
  --ls-display:-0.015em;
  --ls-mono:   0.11em;

  /* ---- Bo góc: hệ (b) ---- */
  --r-card:    8px;
  --r-img:     8px;
  --r-chip:    999px;
  --r-btn:     8px;

  /* ---- Nhịp dọc: thang tight/base (VN, không dùng airy) ---- */
  --sec-y:       clamp(2.5rem, 4.2vw, 3.5rem);   /* base  40→56px */
  --sec-y-tight: clamp(1.75rem, 3vw, 2.5rem);    /* tight 28→40px */

  /* ---- Lưới ---- */
  --maxw:      1240px;
  --gut:       60px;  /* rãnh lề, bậc xuống ở media query */
  --gap:       20px;
  --gap-sm:    12px;

  /* ---- Hiệu ứng ---- */
  --shadow:    0 1px 2px rgba(22,33,26,.05), 0 6px 18px -8px rgba(22,33,26,.14);
  --shadow-lg: 0 2px 4px rgba(22,33,26,.06), 0 18px 40px -18px rgba(22,33,26,.22);
  --ease:      cubic-bezier(.16,1,.3,1);
  --dur:       .45s;

  /* ---- Widget liên hệ nổi ---- */
  --zalo:      #0068FF;
  --messenger: #0084FF;
}