/* =====================================================================
   SOLATIC — Brand tokens & helpers
   Thương hiệu SocialLife · Chủ sở hữu: Công ty TNHH Viện Đại học Social Life
   Triết lý: Khoa học · Nhân bản · Khai phóng
   Dùng cho khaosat.sociallife.vn và lab.sociallife.vn
   Tất cả biến và lớp đều có tiền tố --sol- / .sol- để không đụng CSS sẵn có.
   ===================================================================== */


:root{
  /* --- Màu, lấy teal SocialLife làm chủ đạo --- */
  --sol-teal:        #1E8E80;  /* màu chủ đạo, kế thừa logo mẹ */
  --sol-teal-deep:   #0E5F55;  /* nền khối, header tối */
  --sol-teal-darkest:#15352C;  /* chiều sâu, gradient */
  --sol-amber:       #A8843A;  /* điểm sáng tri thức */
  --sol-coral:       #C75B3F;  /* riêng phân hệ định tính (Qual) */
  --sol-ink:         #16261F;  /* chữ trên nền sáng */
  --sol-paper:       #FBFAF5;  /* nền đọc */
  --sol-cloud:       #FFFFFF;  /* thẻ, mặt phẳng */
  --sol-mist:        #E5DFD0;  /* đường kẻ, viền */
  --sol-muted:       #5E6B63;  /* chữ phụ */
  --sol-light:       #EAF2EF;  /* chữ trên nền teal */

  /* --- Chữ --- */
  --sol-font-display: 'Fraunces',Georgia,'Times New Roman',serif;
  --sol-font-body:    'Inter','Be Vietnam Pro','Segoe UI',sans-serif;
  --sol-font-mono:    'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;

  /* --- Hình khối --- */
  --sol-radius:    14px;
  --sol-radius-sm: 10px;
  --sol-shadow:    0 1px 2px rgba(19,33,30,.06), 0 8px 24px rgba(19,33,30,.06);
}

/* ---- Lớp tiện ích (tùy chọn) ---- */
.sol-font-display{ font-family:var(--sol-font-display); }
.sol-font-mono   { font-family:var(--sol-font-mono); }

.sol-eyebrow{
  font-family:var(--sol-font-mono); font-size:12.5px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:#876829;
}

.sol-btn{
  font-family:var(--sol-font-display); font-weight:600; font-size:15px;
  color:#fff; background:var(--sol-teal); border:0;
  padding:11px 20px; border-radius:var(--sol-radius-sm); cursor:pointer;
}
.sol-btn:hover{ background:var(--sol-teal-deep); }
.sol-btn--ghost{ background:transparent; color:var(--sol-teal-deep); box-shadow:inset 0 0 0 1.5px var(--sol-teal); }

.sol-card{
  background:var(--sol-cloud); border:1px solid var(--sol-mist);
  border-radius:var(--sol-radius); box-shadow:var(--sol-shadow);
}

/* Dải nền teal chủ đạo cho hero/khối nhấn */
.sol-band{
  background:
    radial-gradient(120% 90% at 85% 5%, rgba(168,132,58,.20), transparent 55%),
    linear-gradient(160deg,#15352C 0%,#0E2620 100%);
  color:var(--sol-light);
}

:focus-visible{ outline:2.5px solid var(--sol-amber); outline-offset:3px; }