/*!
 * POTECH — token màu, chữ, khoảng cách.
 *
 * Chép nguyên từ design system (colors_and_type.css) trừ hai chỗ:
 *   - `@import` Google Fonts bỏ đi; font enqueue riêng trong inc/pattern.php để
 *     nó tải song song thay vì chặn CSS này (một @import lồng là một round-trip
 *     nối tiếp, FlyingPress không gộp được).
 *   - Phần base typography tách sang pattern.css, vì nó ghi đè lên h1/h2/a/p
 *     của cả site và phải bọc trong body.potech-pattern.
 *
 * File này an toàn nạp ở mọi trang: chỉ khai custom property, không có selector
 * nào tạo ra style.
 */

:root {
  /* ---------- BRAND CORE ----------------------------------------------- */
  --potech-blue:        #1F4889;   /* primary — lấy từ logo */
  --potech-blue-700:    #173870;
  --potech-blue-900:    #0F2754;
  --potech-blue-500:    #2D5BA6;
  --potech-blue-300:    #6B8AC4;
  --potech-blue-100:    #D7E0EF;
  --potech-blue-050:    #EEF2F8;

  --potech-red:         #ED1C24;   /* accent — lấy từ hình bóng đèn */
  --potech-red-700:     #C8141B;
  /* Ngoai bang mau goc. Can them mot bac vi red-700 da thanh mau NGHI cua
     nut nho (do tuoi #ED1C24 chi dat 4.38 voi chu trang), nen hover phai
     dam hon nua moi thay duoc khac biet. #A51117 tren chu trang = 7.80. */
  --potech-red-800:     #A51117;
  /* Bac sang cho chu do tren nen xanh dam: do tuoi tren blue-900 chi dat
     3.33 (truot AA 4.5 cho chu nho), #F68C90 dat 6.31. Dung cho caps-label
     va link hover trong footer / contact-info. */
  --potech-red-300:     #F68C90;
  --potech-red-100:     #FBD9DB;

  /* Neutral ngả lạnh cho cảm giác kỹ thuật */
  --ink-900:            #0E1320;
  --ink-700:            #2A3142;
  --ink-500:            #5A6273;
  --ink-400:            #8089A0;
  --ink-300:            #B4BBCB;
  --ink-200:            #DBDFE8;
  --ink-100:            #EEF0F5;
  --ink-050:            #F6F7FA;
  --paper:              #FFFFFF;

  /* Trạng thái — dùng dè, POTECH là brand 2 màu */
  --signal-on:          #18C07A;
  --signal-warn:        #F0A000;
  --signal-off:         #5A6273;

  /* ---------- SEMANTIC SURFACE ----------------------------------------- */
  /* KHONG duoc dat ten `--bg`: Additional CSS trong Customizer cua site
     (wp-custom-css, in sau file nay trong wp_head) da khai `:root{--bg:#F7F9FC}`
     cho component rieng cua no — cung do dac hieu, dung sau -> de len token,
     ca site tung bi xam F7F9FC thay vi trang. Ten moi ne toan bo bien cu
     (--bg, --bg-hover, --primary, --border, --text-light, --text-dark). */
  --bg-page:            var(--paper);
  --bg-alt:             var(--ink-050);
  --bg-deep:            var(--potech-blue-900);
  --bg-rule:            var(--ink-200);

  --fg:                 var(--ink-900);
  --fg-muted:           var(--ink-500);
  /* KHONG phai var(--ink-400). #8089A0 tren nen trang chi dat 3.50, duoi
     nguong AA 4.5 — do duoc 48 phan tu truot chi trong mot trang danh muc
     (nhan thong so 12px tren the san pham). #6B7280 = 4.83, van nhat hon
     --fg-muted (6.12) nen thu bac fg > fg-muted > fg-subtle giu nguyen. */
  --fg-subtle:          #6B7280;
  --fg-on-blue:         #FFFFFF;
  --fg-on-blue-muted:   #B6C4DD;

  --link:               var(--potech-blue);
  /* -700 chu khong phai do tuoi: hover van la trang thai phai doc duoc, ma
     #ED1C24 tren trang chi dat 4.38 — cung ly do -800 ton tai cho nut do.
     Do tuoi #ED1C24 gio chi con lam DO HOA (gach accent, vien, nen nut). */
  --link-hover:         var(--potech-red-700);

  --rule:               var(--ink-200);
  --rule-strong:        var(--ink-700);
  --accent-rule:        var(--potech-red);

  /* ---------- TYPE FAMILIES -------------------------------------------- */
  --font-display:       'Barlow Condensed', 'Barlow Condensed Fallback', 'Oswald', 'Arial Narrow', sans-serif;
  --font-text:          'Barlow', 'Barlow Fallback', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Không có mặt chữ mono riêng. Token giữ lại cho tương thích, trỏ về font-text;
     căn cột số bằng font-variant-numeric: tabular-nums. */
  --font-mono:          'Barlow', 'Barlow Fallback', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---------- TYPE SCALE ----------------------------------------------- */
  --fs-display:         clamp(56px, 7vw, 96px);
  /* Thang nay da bi keo xuong so voi design system goc (h1 toi 64px, h2 toi
     44px). Co do dung cho trang trinh bay mot dong chu giua man hinh; dat
     len trang danh muc blog thi tieu de "Danh muc: Chia se & truyen thong"
     chiem tron mot man va tung tieu de bai viet cao 44px. */
  --fs-h1:              clamp(28px, 2.6vw, 40px);
  --fs-h2:              clamp(22px, 2vw, 30px);
  --fs-h3:              22px;
  --fs-h4:              19px;
  --fs-body:            16px;
  --fs-small:           14px;
  --fs-eyebrow:         12px;
  --fs-micro:           11px;

  --lh-tight:           1.04;
  --lh-snug:            1.18;
  --lh-body:            1.55;
  --lh-loose:           1.7;

  /* Tang display la CHU HOA — dem duoc 16/18 cho dung token nay co
     `text-transform: uppercase`, va chu thich cua pattern.css ghi ro "Tieu de —
     condensed in hoa". Chu hoa CAN tracking DUONG: hinh chu hoa khong co phan
     nho tren / thut duoi de mat tu tach ky tu, nen bo lai la dinh vao nhau.
     Gia tri -0.01em cu la quy uoc cho display CHU THUONG (serif co to lon) —
     dat sai tang. Da do: nhan nho HOA trong chinh he nay dung +0.06em
     (--tracking-label) la dung, rieng tang chu TO NHAT lai am. Tang display la
     tang duy nhat bi bo, va do la cai doc ra thanh "font day qua".

     Doi gia tri token chu khong sua 16 selector: dinh nghia cua token nay
     dung ra la "tracking cua tieu de", ma tieu de o day la in hoa. Hai cho
     con lai (h1-h3 co ban o pattern.css, .potech-serie__code) cung khong sao:
     ma san pham ("PT-LBG") von da la chu hoa, con h1-h3 co ban la LUOI AN cho
     tieu de nao thieu khai bao rieng — de no o gia tri HOA la an toan hon, vi
     tieu de thieu khai bao thuong la tieu de in hoa. */
  --tracking-display:   0.015em;
  --tracking-eyebrow:   0.16em;
  --tracking-label:     0.06em;

  /* ---------- SPACING (gốc 4px) ---------------------------------------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  56px;
  --space-10: 72px;
  --space-11: 96px;
  --space-12: 128px;

  /* ---------- RADII (gần như vuông — brand công nghiệp) ---------------- */
  --radius-0:  0px;
  --radius-1:  2px;
  --radius-2:  4px;
  --radius-3:  8px;
  --radius-pill: 999px;

  /* ---------- BORDERS -------------------------------------------------- */
  /* KHÔNG có token viền dựng sẵn. Đã từng có `--border`, `--border-strong`,
     `--border-brand`, `--border-accent` — bỏ hết, và không được khai lại.

     `--border` vi phạm đúng quy tắc đặt tên ở khối SEMANTIC SURFACE bên trên:
     Additional CSS của Customizer cũng khai `:root{--border: <màu>}`, và vì đó là
     `<style>` inline cuối `<head>` nên nó LUÔN thắng file này dù file này enqueue
     sau. Hệ quả là `border: var(--border)` nở ra một shorthand chỉ có màu — không
     hợp lệ, Chrome bỏ cả khai báo và trả `0px none`, viền mất mà không báo lỗi gì.
     Mất một lượt đo mới tìm ra.

     Ba biến còn lại chưa va, nhưng cùng một họ rủi ro và đã đo: không quy tắc nào
     trong cả lớp pattern dùng tới chúng. Giữ lại chỉ là để sẵn một cái bẫy.

     Viết thẳng `1px solid var(--rule)` / `2px solid var(--potech-blue)`. */

  /* ---------- SHADOWS (thấp, không mờ xốp) ----------------------------- */
  --shadow-1:  0 1px 0 rgba(14, 19, 32, 0.06);
  --shadow-2:  0 1px 2px rgba(14, 19, 32, 0.08), 0 0 0 1px rgba(14, 19, 32, 0.04);
  --shadow-3:  0 4px 12px rgba(14, 19, 32, 0.10), 0 0 0 1px rgba(14, 19, 32, 0.04);
  --shadow-4:  0 12px 28px rgba(14, 19, 32, 0.14);
  --shadow-glow-blue: 0 0 0 4px rgba(31, 72, 137, 0.18);
  --shadow-glow-red:  0 0 0 4px rgba(237, 28, 36, 0.18);

  /* ---------- MOTION --------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;

  /* ---------- LAYOUT --------------------------------------------------- */
  --container:        1200px;
  --container-narrow: 880px;
  --gutter:           24px;
  --header-h:         72px;
}