/* ============================================================
   tokens.css — nguồn duy nhất của màu sắc, chữ, bo góc, bóng đổ.
   Mọi file CSS khác chỉ được dùng var(--...), KHÔNG viết mã màu
   trực tiếp. Nhờ vậy nền tối hoạt động ở mọi nơi.

   Bảng màu Bee Art: mực than ấm + vàng mật ong.
   Vàng là màu nhấn (nút phụ, thanh tiến độ, chỉ báo), không phải
   màu nền lớn. Mực than là màu của hành động chính.
   ============================================================ */

:root{
  color-scheme:light;

  /* ---- Màu thương hiệu (giống nhau ở cả 2 nền) ---- */
  --bee-honey:#E3A81A;          /* vàng mật ong Bee Art */
  --bee-honey-deep:#8A6410;     /* vàng đủ đậm để làm chữ trên nền sáng */
  --bee-ink:#17191D;            /* than ấm */

  /* ---- Nền ---- */
  --paper:#F6F5F1;              /* nền ngoài cùng */
  --surface:#FFFFFF;            /* thẻ, bảng, panel */
  --surface-2:#F3F2EE;          /* vùng chìm: header bảng, ô code */
  --surface-3:#EBE9E3;          /* hover trên surface-2 */
  --rail:#FBFAF7;               /* thanh bên */

  /* ---- Đường kẻ ---- */
  --line:#E2DFD6;
  --line-soft:#EDEBE4;
  --line-strong:#CFCBBE;

  /* ---- Chữ ---- */
  --text:#191B1F;
  --text-2:#5B5E66;
  --text-3:#898C94;
  --text-inv:#FFFFFF;

  /* ---- Màu chức năng ---- */
  --accent:#17191D;             /* hành động chính */
  --accent-hover:#2C2F35;
  --accent-text:#FFFFFF;
  --accent-soft:#EFEEEA;

  --gold:#B07F0C;               /* chữ/icon màu vàng, đạt tương phản AA */
  --gold-bg:#E3A81A;            /* mảng vàng đặc: thanh tiến độ, chấm */
  --gold-soft:#FBF1D6;
  --gold-line:#E8D49A;

  --sage:#2F7355;               /* trạng thái tốt */
  --sage-soft:#E2F0E8;
  --danger:#A8352F;             /* lỗi, cảnh báo nặng */
  --danger-soft:#FAE7E4;
  --info:#2B5C9B;
  --info-soft:#E6EEF8;

  /* ---- Thanh bên tối (chỉ dùng ở trang đăng nhập) ---- */
  --rail-text:#55585F;
  --rail-text-dim:#8B8E96;

  /* ---- Bo góc ---- */
  --r-sm:6px;
  --r:9px;
  --r-lg:13px;
  --r-xl:18px;
  --r-pill:999px;

  /* ---- Bóng đổ: ba bậc, dùng đúng bậc theo độ nổi ---- */
  --sh-1:0 1px 2px rgba(24,22,16,.05);
  --sh-2:0 2px 4px rgba(24,22,16,.04),0 8px 20px rgba(24,22,16,.05);
  --sh-3:0 10px 24px rgba(24,22,16,.08),0 28px 64px rgba(24,22,16,.10);
  --sh-ring:0 0 0 3px rgba(227,168,26,.28);

  /* ---- Chữ ---- */
  --font:"Be Vietnam Pro","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-num:"Source Serif 4",Georgia,"Times New Roman",serif;

  /* ---- Chuyển động ---- */
  --ease:cubic-bezier(.2,.8,.3,1);
  --fast:.12s var(--ease);
  --med:.2s var(--ease);

  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}

/* ============================================================
   NỀN TỐI
   Áp dụng khi:  <html data-theme="dark">
   hoặc khi người dùng để "theo hệ thống" (data-theme="auto")
   và máy đang ở chế độ tối.
   ============================================================ */
:root[data-theme="dark"],
:root[data-theme="auto"].sys-dark{
  color-scheme:dark;

  --bee-honey:#F0BE33;
  --bee-honey-deep:#F0BE33;
  --bee-ink:#0F1013;

  --paper:#121316;
  --surface:#1A1C20;
  --surface-2:#212429;
  --surface-3:#2A2D33;
  --rail:#161719;

  --line:#2E3137;
  --line-soft:#26282D;
  --line-strong:#3D4148;

  --text:#ECEAE4;
  --text-2:#A5A8AF;
  --text-3:#7C7F87;
  --text-inv:#17191D;

  --accent:#F0BE33;             /* trên nền tối, vàng làm nút chính */
  --accent-hover:#F8CB4D;
  --accent-text:#17191D;
  --accent-soft:#2B2719;

  --gold:#F0BE33;
  --gold-bg:#E3A81A;
  --gold-soft:#2E2715;
  --gold-line:#4A3F1E;

  --sage:#67B48D;
  --sage-soft:#17301F;
  --danger:#E8827A;
  --danger-soft:#33201D;
  --info:#7BA6E0;
  --info-soft:#1B2634;

  --rail-text:#A5A8AF;
  --rail-text-dim:#7C7F87;

  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 2px 4px rgba(0,0,0,.35),0 8px 20px rgba(0,0,0,.35);
  --sh-3:0 10px 24px rgba(0,0,0,.45),0 28px 64px rgba(0,0,0,.5);
  --sh-ring:0 0 0 3px rgba(240,190,51,.26);
}

/* ---- Nền tảng ---- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
html{scroll-padding-top:env(safe-area-inset-top,0px)}

body{
  background:var(--paper);
  color:var(--text);
  font-family:var(--font);
  font-size:14px;
  line-height:1.55;
  letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:var(--gold);text-underline-offset:2px}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%}
[hidden]{display:none!important}

:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
::selection{background:var(--gold-soft);color:var(--text)}

/* Thanh cuộn mảnh, đổi màu theo nền */
*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:9px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--text-3);background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

/* Số liệu dùng font serif, canh thẳng cột */
.num,.nums{font-family:var(--font-num);font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}