/* =====================================================================
   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) */
  /* ── Màu định danh phân hệ · bổ sung 02/09/2026 ─────────────────
     Solatic Ngữ liệu (thu thập và phân tích ngữ liệu báo chí) cần một
     màu định danh riêng, như coral của Qual. Chọn lam đá: đây là hue
     duy nhất còn trống và tách bạch rõ với teal chủ đạo, amber, coral
     và đỏ đất, nên không phá cấu trúc nhận diện. KHÔNG lấy lục rêu vì
     quá gần teal, dùng sẽ nhoè ranh giới nhánh với nền teal chung.
     Cùng độ trầm với coral và amber để hoà một hệ. */
  --sol-slate:       #35597F;  /* riêng phân hệ Ngữ liệu */
  --sol-slate-soft:  #E8EDF4;  /* nền nhạt cho khối Ngữ liệu */
  --sol-slate-ink:   #24405C;  /* chữ trên nền nhạt ấy */

  /* ── Màu trạng thái · bổ sung 23/08/2026 ────────────────────────
     Bàn làm việc cần báo hỏng và báo cảnh giác, mà bảng màu cũ không
     có gì cho việc ấy. Ba tệp mới viết đã phải đặt mã màu thẳng vào
     trang, tức bắt đầu tan rã tính nhất quán của hệ.

     KHÔNG dùng coral cho việc này: coral là màu định danh của Solatic
     Qual, lấy nó làm màu cảnh báo thì trong chính Qual cảnh báo sẽ lẫn
     vào nhận diện nhánh và mất tác dụng. Đỏ đất dưới đây tối và trầm
     hơn coral, đủ khác để không nhầm. */
  --sol-danger:      #8A2E1C;  /* báo hỏng, mất việc */
  --sol-danger-soft: #F7E3DD;  /* nền nhạt cho khối báo hỏng */
  --sol-danger-ink:  #6D2415;
  /* Thêm 25/08/2026 khi dựng màn đối chiếu mã hoá. Hai màu này trước
     đó viết thẳng ở vài nơi; đưa vào đây để đổi một chỗ là đổi cả hệ. */
  --sol-haze:        #F2F5F3;
  --sol-danger-line: #E3BFB4;  /* chữ trên nền nhạt ấy */
  --sol-amber-soft:  #FBF0DC;  /* nền nhạt cho khối cần chú ý */
  --sol-amber-ink:   #6B4E16;  /* chữ trên nền nhạt ấy */
  --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; }