/* 🎨 System Tokens */
:root {
  /* ============================================================
     🎯 MÀU CHỦ ĐẠO (BRAND COLORS)
     ------------------------------------------------------------
     Dựa trên cảm xúc “TRÍ TUỆ – TIN CẬY – NĂNG ĐỘNG – THÂN THIỆN”
     ============================================================ */

  --primary-color: #2563eb;      /* Xanh dương sáng – Màu chủ đạo (Tin cậy, chuyên nghiệp) */
  --primary-dark:  #1e40af;      /* Xanh dương đậm – Dùng cho header/footer hoặc hover */
  --primary-light: #e0f2fe;      /* Xanh nhạt – Dùng cho nền nhẹ, border highlight */

  --secondary-color: #0d9488;    /* Xanh ngọc – Màu phụ tươi trẻ (Hỗ trợ primary) */
  --accent-color:    #f97316;    /* Cam rực – Màu điểm nhấn (Gợi năng lượng, hành động) */

  /* ============================================================
     🌈 BỀ MẶT & CHỮ (SURFACE / TEXT COLORS)
     ============================================================ */
  --light-color: #f9fafb;        /* Nền sáng tổng thể */
  --light-bg:    #f1f5f9;        /* Nền phụ, card nhẹ, vùng scroll */
  --dark-color:  #1e293b;        /* Xanh đen – dùng cho text chính hoặc footer */
  --text-color:  #334155;        /* Xám đậm – màu chữ thân thiện, dễ đọc */
  --muted-color: #64748b;        /* Xám trung tính – dùng cho chú thích, label */
  --light-text:  #94a3b8;        /* Xám nhạt – dùng cho username, hint nhỏ */
  --dark-text:   #0f172a;        /* Gần đen – tiêu đề hoặc chữ nổi bật trên nền sáng */

  /* ============================================================
     ✅ TRẠNG THÁI (STATE COLORS)
     ============================================================ */
  --success-color: #16a34a;      /* Xanh lá – thành công, đúng, xác nhận */
  --warning-color: #eab308;      /* Vàng – cảnh báo, nhắc nhở */
  --danger-color:  #dc2626;      /* Đỏ – lỗi, quan trọng */
  --info-color:    #0284c7;      /* Xanh cyan – thông tin, cập nhật */

  /* ============================================================
     🧱 VIỀN, NỀN BẢNG, VÀ BÓNG ĐỔ
     ============================================================ */
  --border-color:        #e2e8f0; /* Màu đường viền nhẹ */
  --table-border-color:  #e2e8f0; /* Viền bảng */
  --table-header-bg:     #006699; /* Nền tiêu đề bảng */
  --table-header-text:   #ffffff; /* Chữ trong tiêu đề bảng */

  /* Bóng và hiệu ứng chiều sâu */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.15);
  --card-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);

  /* Độ bo & hiệu ứng chung */
  --border-radius: 8px;
  --header-height: 56px; 
  
  /* Effects */
  --transition: all .3s cubic-bezier(.4,0,.2,1);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.1);
  --shadow-md: 0 4px 6px rgba(0,0,0,.05);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.1);
  --border-radius: 8px;

  /* Sizing */
  --container-max: 1200px;
  --btn-height: 40px; /* dùng cho .btn-icon và icon-only */

  /* Typography Scale */
  --font-base-size: 0.95rem;          /* 16px */
  --scale-ratio: 1.25;
  --font-size-xxs: calc(var(--font-base-size) * 0.64);
  --font-size-xs:  calc(var(--font-base-size) * 0.8);
  --font-size-sm:  calc(var(--font-base-size) * 0.875);
  --font-size-base: var(--font-base-size);
  --font-size-md:  calc(var(--font-base-size) * 1.125);
  --font-size-lg:  calc(var(--font-base-size) * 1.25);
  --font-size-xl:  calc(var(--font-base-size) * 1.563);
  --font-size-xxl: calc(var(--font-base-size) * 1.953);
  --font-size-xxxl:calc(var(--font-base-size) * 2.441);

  --line-height-tight: 1;
  --line-height-normal: 1.25;
  --line-height-loose: 1.75;
}

/* 📏 Root size & font-family (đặt ở html/body để mọi thứ kế thừa) */
html { font-size: var(--font-base-size); }

body {
  font-family: 'Segoe UI','Inter','SF Pro Display',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--text-color);
  background: var(--light-color);
  overflow-x: hidden;
  font-weight: 400;
}

/* 🔁 Reset & Inherit (đặt sau body) */
*, *::before, *::after {
  box-sizing: border-box;
  font-size: inherit;
  font-family: inherit;
}

/* 🅰️ Headings scale */
h1,.h1{font-size:var(--font-size-xxxl);font-weight:700;line-height:var(--line-height-tight);color:var(--primary-color);margin:0 0 1rem;}
h2,.h2{font-size:var(--font-size-xxl); font-weight:600;line-height:var(--line-height-tight); color:var(--primary-color); margin:0 0 .875rem;}
h3,.h3{font-size:var(--font-size-xl);  font-weight:600;line-height:var(--line-height-normal);color:var(--dark-color); margin:0 0 .75rem;}
h4,.h4{font-size:var(--font-size-lg);  font-weight:600;line-height:var(--line-height-normal);color:var(--dark-color); margin:0 0 .75rem;}
h5,.h5{font-size:var(--font-size-md);  font-weight:500;line-height:var(--line-height-normal);color:var(--dark-color); margin:0 0 .5rem;}
h6,.h6{font-size:var(--font-size-base);font-weight:500;line-height:var(--line-height-normal);color:var(--muted-color); margin:0 0 .5rem;}

/* 🎬 Effects util cơ bản */
@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
.fade-in { animation: fadeIn .5s ease-out; }