/* =========================================================================
   MẦM NON CÂY BÀNG — tokens.css
   Toàn bộ giá trị thương hiệu nằm ở đây. Đổi file này = đổi cả website.
   Nạp TRƯỚC thẻ <style> nội tuyến trong index.html.

   Tinh thần: nói với BA MẸ, không nói với trẻ con. An toàn, ấm, sáng.
   Xanh lá dịu + kem. Không cầu vồng, không bong bóng, không trẻ con hoá.
   ========================================================================= */
:root{

  /* ---------- MÀU NỀN & MỰC ---------------------------------------------
     Nền kem ngả vàng (không phải #FFF), mực xanh rêu đậm (không phải #000). */
  --nen:        #FBFAF5;   /* nền trang — kem ấm                            */
  --nen-sau:    #F1F5EE;   /* nền chìm — dải phụ, mặt thẻ, hàng bảng lẻ     */
  --the:        #FFFFFE;   /* mặt thẻ / card                                */
  --muc:        #1F2A21;   /* mực chính — xanh rêu gần đen                  */
  --xam:        #55605A;   /* chữ phụ trên nền sáng — AA ≥ 5.9:1            */
  --xam-nhat:   #7C8880;   /* CHỈ cho placeholder và icon, không cho chữ nhỏ */
  --ke:         #DFE5DA;   /* đường kẻ 1px                                  */
  --ke-dam:     #C2CCBB;   /* kẻ đậm — viền bảng, viền ô nhập               */

  /* ---------- MÀU NHẤN ---------------------------------------------------
     Xanh lá dịu = màu nhấn DUY NHẤT (nút, học phí, số liệu, hover).
     Cam đào = màu phụ, CHỈ dùng cho chip "Còn chỗ" và hạn tuyển sinh.      */
  --la:         #4C8B5B;   /* xanh lá dịu — accent chính                    */
  --la-dam:     #3A6E46;   /* hover / chữ xanh trên nền nhạt — AA ≥ 5.2:1   */
  --la-sau:     #24402C;   /* nền dải tối, hero, chân trang                 */
  --la-mo:      #E7F0E5;   /* nền chip / vùng nhấn nhạt                     */
  --cam:        #E88C5A;   /* cam đào — CHỈ chip "Còn chỗ" và chấm slide    */
  --cam-dam:    #97491C;   /* cam cho CHỮ — AA ≥ 5.1:1 trên nền sáng        */
  --cam-mo:     #FCEFE5;   /* nền badge cam                                 */

  /* ---------- MÀU TRÊN NỀN TỐI ------------------------------------------ */
  --tren-toi:   #F4F8F1;   /* chữ chính trên nền xanh rêu sâu               */
  --tren-toi-2: #B9CCBB;   /* chữ phụ trên nền tối — AA ≥ 7.1:1             */
  --ke-toi:     #3C5C44;   /* kẻ trên nền tối                               */

  /* ---------- CHỮ --------------------------------------------------------
     2 họ chữ + 1 mono. Cả ba đều có bộ dấu tiếng Việt đầy đủ.
     Be Vietnam Pro 700/800 → tiêu đề. Nunito Sans 400/600/700 → thân.
     DM Mono → giờ trong thời khoá biểu, nhãn, ô giá học phí.               */
  --display:  'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --than:     'Nunito Sans', system-ui, -apple-system, sans-serif;
  --mono:     'DM Mono', ui-monospace, 'SF Mono', monospace;

  --co-than:      17px;    /* cỡ chữ thân                                   */
  --cao-than:     1.65;    /* line-height thân — ≥1.5 cho dấu tiếng Việt    */
  --cao-display:  1.10;    /* line-height tiêu đề — ≥1.05 tránh cắt Ầ/ỹ/ọ   */
  --giam-display: -.026em; /* letter-spacing âm cho tiêu đề                 */
  --tang-mono:    .12em;   /* letter-spacing dương cho nhãn mono            */

  /* ---------- HÌNH HỌC ---------------------------------------------------
     Hệ radius (b): 16px cho thẻ/ảnh, 999px cho chip, 10px cho ô nhập.
     Mềm nhưng không trẻ con hoá. Tuyệt đối không dùng 4px-cho-mọi-thứ.     */
  --bo:       16px;
  --bo-o:     10px;
  --bo-chip:  999px;

  /* ---------- KHOẢNG CÁCH ------------------------------------------------ */
  --khung:  1220px;                          /* bề rộng nội dung tối đa     */
  --le:     clamp(1.15rem, 4vw, 2.5rem);     /* lề trái/phải                */
  --doc:      56px;                          /* padding dọc mục — base      */
  --doc-hep:  40px;                          /* padding dọc mục — tight     */

  --khe-1: 1.5rem;   /* khe lưới lớn   */
  --khe-2: 1.05rem;  /* khe lưới vừa   */
  --khe-3: .72rem;   /* khe lưới nhỏ   */

  /* ---------- CHUYỂN ĐỘNG ------------------------------------------------ */
  --nhip: cubic-bezier(.16, 1, .3, 1);

  /* ---------- BÓNG ------------------------------------------------------- */
  --bong-1: 0 1px 2px rgba(31,42,33,.05), 0 2px 8px rgba(31,42,33,.05);
  --bong-2: 0 4px 10px rgba(31,42,33,.07), 0 14px 34px rgba(31,42,33,.09);
}