/* =========================================================================
   tokens.css — BANG MAU + DO DO DUNG CHUNG

   MAU LAY THANG TU LOGO: chu VANG KIM tren tam THEP GRAPHITE.
   Vang la mau chu dao o CA HAI giao dien; graphite la nen va chu.

   NGUYEN TAC: KHONG dat mau cung o bat ky file CSS nao khac. Moi mau deu di
   qua bien o day. Sai nguyen tac nay thi doi sang giao dien Toi se sot cho.

   ⚠ VANG LA MAU SANG — day la khac biet lon so voi bang mau xanh truoc day:
   chu TRANG tren nen vang KHONG doc noi. Vi vay co bien rieng
       --accent-fg = mau chu dat TREN nen vang (luon la graphite dam)
   Cho nao co background: var(--accent-solid) thi color PHAI la
   var(--accent-fg) — khong duoc go #fff.

   Vang tren nen TRANG cung kem tuong phan, nen ban Sang dung HAI sac vang:
     --accent        vang DONG (dam)  -> CHU va VIEN tren nen sang
     --accent-solid  vang SANG        -> NEN nut, chu graphite de len

   Doi giao dien: dat data-theme="dark" | "light" len <html> (xem js/theme.js).
   Khong dat gi -> theo he dieu hanh (prefers-color-scheme).
   ========================================================================= */

:root {
  /* ── Nen & chu (thep graphite) ───────────────────────────── */
  --surface:        #ffffff;
  --surface-2:      #f4f5f6;
  --surface-3:      #e8eaec;
  --card:           #ffffff;
  --card-hover:     #ffffff;
  --text:           #14181c;   /* graphite dam — mau tam nen cua logo */
  --text-muted:     #59626b;
  --text-faint:     #8b949c;

  /* ── Vang kim ────────────────────────────────────────────── */
  --accent:         #8f6300;   /* vang dong: chu / vien tren nen sang */
  --accent-solid:   #e8a317;   /* vang sang: NEN nut                  */
  --accent-fg:      #14181c;   /* chu dat TREN nen vang               */
  --accent-hover:   #f5b301;
  --accent-soft:    #fdf2d9;   /* vang rat nhat: nen hang dang chon   */
  --accent-2:       #a8b0b8;   /* CROM — vien sang, diem nhan kim loai */
  --accent-3:       #6e7a85;   /* THEP — duong ghi kich thuoc, chu ky thuat */

  /* ── Duong ke & lop phu ──────────────────────────────────── */
  --border:         #dfe2e5;
  --border-strong:  #c3c8cd;
  --overlay:        rgba(16, 19, 21, .58);
  --glass:          rgba(255, 255, 255, .74);

  /* ── Trang thai ──────────────────────────────────────────── */
  /* --warn phai KHAC hAN vang thuong hieu, khong thi "canh bao" va "diem
     nhan" nhin nhu nhau. Dung vang nau dam hon. */
  --ok:             #1a8f4c;
  --warn:           #b8730a;
  --danger:         #c4314b;

  /* ── Do bong ─────────────────────────────────────────────── */
  --sh-sm:  0 1px 2px rgba(20, 24, 28, .06), 0 1px 3px rgba(20, 24, 28, .08);
  --sh-md:  0 4px 12px rgba(20, 24, 28, .08), 0 2px 4px rgba(20, 24, 28, .06);
  --sh-lg:  0 18px 48px rgba(20, 24, 28, .14), 0 4px 12px rgba(20, 24, 28, .08);
  --sh-xl:  0 32px 80px rgba(20, 24, 28, .20), 0 8px 24px rgba(20, 24, 28, .10);
  --sh-glow: 0 0 0 1px var(--accent-soft), 0 12px 32px rgba(232, 163, 23, .30);

  /* ── Do do ───────────────────────────────────────────────── */
  --radius-sm:  8px;
  --radius:     14px;
  --radius-lg:  22px;
  --radius-pill: 999px;

  --maxw:       1180px;   /* be ngang toi da cua noi dung */
  --nav-h:      68px;
  --gap:        24px;
  --section-y:  clamp(64px, 9vw, 128px);   /* le tren/duoi moi khoi */

  /* ── Chu ─────────────────────────────────────────────────── */
  --font: "Segoe UI", "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", "JetBrains Mono", Consolas, monospace;

  /* Cac co chu deu co giay theo be ngang man hinh (clamp) de khong phai
     viet lai o moi breakpoint. */
  --fs-display: clamp(2.4rem, 5.2vw, 4.25rem);
  --fs-h1:      clamp(2rem, 3.6vw, 3rem);
  --fs-h2:      clamp(1.6rem, 2.6vw, 2.25rem);
  --fs-h3:      clamp(1.15rem, 1.6vw, 1.4rem);
  --fs-lead:    clamp(1.02rem, 1.35vw, 1.2rem);
  --fs-body:    1rem;
  --fs-sm:      .9rem;
  --fs-xs:      .8rem;

  /* ── Chuyen dong ─────────────────────────────────────────── */
  /* Dung chung mot bo duong cong de moi hieu ung "cung nhip". */
  --ease:       cubic-bezier(.22, .61, .36, 1);
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast:   .16s;
  --dur:        .28s;
  --dur-slow:   .6s;

  /* ── Anh kim loai (dung o logo, nut lon, tieu de) ─────────
     Ba diem dung: vang dam -> vang sang -> vang dam. Do la cach ve "kim
     loai" bang mau phang: mot vet sang chay ngang giua. */
  --gold-grad: linear-gradient(135deg, #b8860b 0%, #f5c24a 42%, #e8a317 58%, #a97400 100%);
  --steel-grad: linear-gradient(135deg, #4a525a 0%, #aab2ba 45%, #6e7a85 60%, #384049 100%);
}

/* =========================================================================
   GIAO DIEN TOI — dung nhu tam logo: vang tren graphite

   Ban Toi la ban "dung logo" nhat, nen nen phai la GRAPHITE THAT (#101315),
   khong phai xanh navy hay xam trung tinh.

   Luu y khi doi:
     1. --accent o ban Toi SANG hon ban Sang (vang tuoi), vi nen da toi roi.
     2. --accent-solid GIU NGUYEN vang sang o ca hai ban, va chu tren no van
        la graphite — nut vang chu den la dau hieu nhan dien cua thuong hieu.
     3. --accent-soft o ban Toi phai la NAU VANG TOI. Dao nguoc thanh vang
        nhat lam nen thi nuot het chu sang.
   ========================================================================= */

:root[data-theme="dark"] {
  --surface:        #101315;
  --surface-2:      #16191d;
  --surface-3:      #1e2227;
  --card:           #191d22;
  --card-hover:     #1f242a;
  --text:           #eceef0;
  --text-muted:     #9aa3ac;
  --text-faint:     #737d86;

  --accent:         #f5c24a;
  --accent-solid:   #e8a317;
  --accent-fg:      #14181c;
  --accent-hover:   #ffd166;
  --accent-soft:    #33280f;
  --accent-2:       #c2c9d0;
  --accent-3:       #8e9aa5;

  --border:         #282d33;
  --border-strong:  #3a424a;
  --overlay:        rgba(0, 0, 0, .70);
  --glass:          rgba(22, 25, 29, .76);

  --ok:             #35c076;
  --warn:           #f0b429;
  --danger:         #e2586f;

  --sh-sm:  0 1px 2px rgba(0, 0, 0, .5);
  --sh-md:  0 6px 16px rgba(0, 0, 0, .45);
  --sh-lg:  0 20px 52px rgba(0, 0, 0, .55);
  --sh-xl:  0 34px 88px rgba(0, 0, 0, .62);
  --sh-glow: 0 0 0 1px rgba(245, 194, 74, .30), 0 14px 40px rgba(232, 163, 23, .32);
}

/* Chua bam nut doi giao dien lan nao -> theo he dieu hanh.
   Dat trong @media chu khong ghi de :root[data-theme="light"] de nguoi dung
   chon "Sáng" thi van thang. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface:        #101315;
    --surface-2:      #16191d;
    --surface-3:      #1e2227;
    --card:           #191d22;
    --card-hover:     #1f242a;
    --text:           #eceef0;
    --text-muted:     #9aa3ac;
    --text-faint:     #737d86;

    --accent:         #f5c24a;
    --accent-solid:   #e8a317;
    --accent-fg:      #14181c;
    --accent-hover:   #ffd166;
    --accent-soft:    #33280f;
    --accent-2:       #c2c9d0;
    --accent-3:       #8e9aa5;

    --border:         #282d33;
    --border-strong:  #3a424a;
    --overlay:        rgba(0, 0, 0, .70);
    --glass:          rgba(22, 25, 29, .76);

    --ok:             #35c076;
    --warn:           #f0b429;
    --danger:         #e2586f;

    --sh-sm:  0 1px 2px rgba(0, 0, 0, .5);
    --sh-md:  0 6px 16px rgba(0, 0, 0, .45);
    --sh-lg:  0 20px 52px rgba(0, 0, 0, .55);
    --sh-xl:  0 34px 88px rgba(0, 0, 0, .62);
    --sh-glow: 0 0 0 1px rgba(245, 194, 74, .30), 0 14px 40px rgba(232, 163, 23, .32);
  }
}

/* =========================================================================
   BIEN RIENG CHO PHONG CACH CO KHI

   Ba thu lam nen "chat ban ve ky thuat" cua trang nay:
     --blue-line : net ke ban ve (luoi, khung, duong dong tam)
     --hazard    : soc canh bao o vien khoi tai ve
     --hatch     : net gach cheo, dung o mang dac cua mat cat

   TEN --blue-line GIU NGUYEN tu ban dau (luc bang mau con xanh) de khong
   phai sua ca chuc cho trong cac file khac. Y nghia cua no la "net ke ban
   ve", khong phai "mau xanh" — nay no mang sac vang dong.
   ========================================================================= */

:root {
  --blue-line:   rgba(143, 99, 0, .18);
  --blue-line-2: rgba(143, 99, 0, .09);
  --hazard:      #e8a317;
  --hatch:       rgba(110, 122, 133, .22);
  --steel:       #6e7a85;

  /* Do do rieng: chieu dai dau moc goc, be day net ke ban ve. */
  --tick: 14px;
  --hair: 1px;
}

:root[data-theme="dark"] {
  --blue-line:   rgba(245, 194, 74, .20);
  --blue-line-2: rgba(245, 194, 74, .09);
  --hazard:      #f0b429;
  --hatch:       rgba(142, 154, 165, .18);
  --steel:       #8e9aa5;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --blue-line:   rgba(245, 194, 74, .20);
    --blue-line-2: rgba(245, 194, 74, .09);
    --hazard:      #f0b429;
    --hatch:       rgba(142, 154, 165, .18);
    --steel:       #8e9aa5;
  }
}