/* ============================================================
   MIWANG — DESIGN SYSTEM
   NGUỒN SỰ THẬT DUY NHẤT CHO MỌI GIÁ TRỊ PHẦN NHÌN (§13.2)
   ------------------------------------------------------------
   Rút từ 3 ảnh tham khảo + zeitmedia.vn.
   Đổi bộ mặt toàn site = sửa DUY NHẤT file này.
   Không viết cứng màu / cỡ / khoảng cách ở bất kỳ file nào khác.

   NGUYÊN TẮC TỶ LỆ:
   Mọi kích thước bắt nguồn từ đơn vị cơ sở 4px. Mỗi cỡ control
   ràng buộc ĐỒNG THỜI chiều cao + padding + cỡ chữ + cỡ icon + gap,
   nên button, input, select, badge không thể lệch tỷ lệ nhau.
   ============================================================ */

:root {

  /* ==========================================================
     1. MÀU — chế độ TỐI (mặc định)
     ========================================================== */
  --c-bg:            #0a0a0a;
  --c-bg-elev:       #141414;
  --c-bg-elev-2:     #1e1e1e;
  --c-bg-elev-3:     #282828;
  --c-bg-inset:      #050505;   /* nền lõm: ô nhập, vùng code */
  /* Nền nổi pha 6% màu nhấn — dùng cho các thẻ xen kẽ trong lưới bài viết.
     Ghi thẳng giá trị đã trộn thay vì color-mix() để bộ đo tương phản đọc
     được: chỉ số của nó phải là số đo, không phải phỏng đoán. */
  --c-bg-elev-warm:  #221713;

  /* Tỷ lệ tương phản dưới đây là SỐ ĐO THẬT từ tools/audit-contrast.js,
     không phải ước lượng. Đổi màu thì chạy lại công cụ đó. */
  --c-text:          #f5f5f3;   /* 18.1:1 trên nền trang */
  --c-text-muted:    #a8a8a4;   /*  8.3:1 trên nền trang */
  /* Phải đủ tương phản trên NỀN THẺ (--c-bg-elev) chứ không chỉ trên nền
     trang — nền thẻ sáng hơn nên là trường hợp khắt khe hơn. */
  --c-text-dim:      #8a8a86;   /*  5.2:1 nền trang · 4.8:1 nền thẻ */
  --c-text-on-accent:#0a0a0a;

  --c-accent:        #ff4d00;   /* cam rực — màu nhấn DUY NHẤT */
  --c-accent-hover:  #ff6b2b;
  --c-accent-press:  #e04400;
  --c-accent-soft:   rgba(255, 77, 0, 0.12);   /* nền nhạt cho badge, hàng được chọn */

  /* --c-border là đường kẻ TRANG TRÍ (ngăn section, viền thẻ) — không mang
     thông tin nên không áp ngưỡng tương phản.
     --c-border-strong là RANH GIỚI THÀNH PHẦN ĐIỀU KHIỂN (viền ô nhập, nút
     viền) — WCAG 1.4.11 bắt buộc ≥3:1, nên alpha phải cao hơn hẳn. */
  --c-border:        rgba(245, 245, 243, 0.10);
  --c-border-strong: rgba(245, 245, 243, 0.38);   /* đo được 3.2:1 */
  --c-border-focus:  var(--c-accent);
  --c-overlay:       rgba(10, 10, 10, 0.72);   /* nền nav kính mờ */
  --c-scrim:         rgba(0, 0, 0, 0.64);      /* nền tối sau modal */

  --c-success:       #3ddc84;
  --c-success-soft:  rgba(61, 220, 132, 0.14);
  --c-warning:       #ffb020;
  --c-warning-soft:  rgba(255, 176, 32, 0.14);
  --c-danger:        #ff5a5a;
  --c-danger-soft:   rgba(255, 90, 90, 0.14);
  --c-info:          #4ea8ff;
  --c-info-soft:     rgba(78, 168, 255, 0.14);

  /* Màu biểu đồ — CỐ Ý KHÁC màu nhấn thương hiệu (§12.6).
     Cam #ff4d00 ở nét 2px trên nền đen đọc ra nâu xỉn. Bộ dưới đã
     kiểm tra tương phản và phân biệt được với deuteranopia/protanopia. */
  --c-chart-1: #4ea8ff;
  --c-chart-2: #ffb020;
  --c-chart-3: #3ddc84;
  --c-chart-4: #c98cff;
  --c-chart-5: #ff7a9c;
  --c-chart-grid: rgba(245, 245, 243, 0.08);

  /* ==========================================================
     2. CHỮ
     Thang tỷ lệ 1.25 (major third) neo ở 16px.
     Dùng clamp() thay media query → cỡ chữ co liên tục, không nhảy bậc,
     không gây tràn ở màn hẹp và không cần viết lại ở từng breakpoint.
     ========================================================== */
  --f-display: "Archivo", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --f-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono:    "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  /* TODO trước bàn giao: thay bằng font TỰ HOST (§10.4 cấm gọi font bên thứ ba). */

  --t-hero:  clamp(2.5rem,  10.5vw, 8.5rem);  /* chữ "MiWang" cỡ đại */
  --t-d1:    clamp(2.25rem, 5.2vw,  3.75rem); /* H1 trang */
  --t-d2:    clamp(1.75rem, 3.4vw,  2.5rem);  /* H2 section */
  --t-d3:    clamp(1.375rem, 2.2vw, 1.75rem); /* H3 thẻ lớn */
  --t-d4:    clamp(1.125rem, 1.6vw, 1.25rem); /* H4 thẻ nhỏ, tiêu đề form */

  --t-lg:    1.125rem;   /* 18px — đoạn dẫn */
  --t-base:  1rem;       /* 16px — nội dung */
  --t-sm:    0.875rem;   /* 14px — nhãn, meta, nút */
  --t-xs:    0.8125rem;  /* 13px — nút nhỏ, chú thích */
  --t-2xs:   0.75rem;    /* 12px — SÀN TUYỆT ĐỐI, §12.5 cấm nhỏ hơn */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   900;   /* chỉ dành cho chữ hero cỡ đại */

  --lh-hero:  0.90;
  --lh-tight: 1.10;   /* tiêu đề lớn */
  --lh-snug:  1.30;   /* tiêu đề nhỏ, nhãn */
  --lh-base:  1.60;   /* nội dung */
  --lh-loose: 1.75;   /* văn bản dài trong bài viết */

  --ls-tighter: -0.04em;  /* chữ hero */
  --ls-tight:   -0.02em;  /* tiêu đề */
  --ls-normal:   0;
  --ls-wide:     0.10em;  /* nhãn nhỏ VIẾT HOA */

  /* ==========================================================
     3. KHÔNG GIAN — thang 4px, không có giá trị nào ngoài thang này
     ========================================================== */
  --s-0:  0;
  --s-1:  0.25rem;   /*  4 */
  --s-2:  0.5rem;    /*  8 */
  --s-3:  0.75rem;   /* 12 */
  --s-4:  1rem;      /* 16 */
  --s-5:  1.25rem;   /* 20 */
  --s-6:  1.5rem;    /* 24 */
  --s-7:  2rem;      /* 32 */
  --s-8:  2.5rem;    /* 40 */
  --s-9:  3rem;      /* 48 */
  --s-10: 4rem;      /* 64 */
  --s-11: 5rem;      /* 80 */
  --s-12: 6rem;      /* 96 */
  --s-13: 8rem;      /* 128 */

  /* ==========================================================
     4. BỐ CỤC & KHUNG CHỨA
     ========================================================== */
  --w-xs:      480px;
  --w-sm:      640px;
  --w-md:      768px;
  --w-lg:      1024px;
  --w-xl:      1280px;
  --w-content: 1440px;   /* khung nội dung chuẩn */
  --w-wide:    1680px;   /* khung rộng cho lưới ảnh trên màn 2K/4K */
  --w-prose:   68ch;     /* bề rộng đọc thoải mái — KHÔNG vượt quá cho văn bản dài */

  --gutter:    clamp(1rem, 4vw, 4rem);
  --section-y: clamp(3.5rem, 9vw, 8rem);   /* nhịp dọc giữa các section */
  --section-y-sm: clamp(2.5rem, 6vw, 5rem);

  --grid-cols: 12;
  --grid-gap:  clamp(1rem, 2vw, 2rem);
  --grid-gap-sm: clamp(0.75rem, 1.2vw, 1rem);

  --nav-h:      64px;    /* dùng cho scroll-padding-top (§2.4) */
  --nav-h-lg:   72px;
  --sidebar-w:  264px;   /* thanh bên admin */
  --sidebar-w-collapsed: 72px;

  /* ==========================================================
     5. HÌNH KHỐI
     ========================================================== */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-pill: 999px;
  --r-circle: 50%;

  --bw:        1px;
  --bw-thick:  2px;
  --focus-ring-w: 2px;
  --focus-ring-offset: 2px;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 12px 36px rgba(0, 0, 0, 0.55);
  --shadow-4: 0 24px 64px rgba(0, 0, 0, 0.65);   /* modal */

  /* ==========================================================
     6. HỆ TỶ LỆ CONTROL  ← TRỌNG TÂM
     Mỗi cỡ ràng buộc ĐỒNG THỜI: chiều cao · padding · cỡ chữ ·
     cỡ icon · gap · bo góc. Button, input, select, nút icon dùng
     chung bộ này nên không thể lệch tỷ lệ nhau.

     Chiều cao đều là bội của 8, và từ cỡ MD trở lên đã tự đạt
     vùng chạm 44px (§12.3) mà không cần vá thêm.
     ========================================================== */

  /* SM — dùng trong bảng, thanh công cụ dày đặc. DƯỚI ngưỡng chạm 44px
     nên CHỈ được dùng ở giao diện có chuột (admin desktop), hoặc phải
     nới vùng chạm ngầm bằng ::after. */
  --ctl-sm-h:      32px;
  --ctl-sm-px:     var(--s-3);    /* 12 */
  --ctl-sm-fs:     var(--t-xs);   /* 13 */
  --ctl-sm-icon:   14px;
  --ctl-sm-gap:    var(--s-2);    /*  8 */
  --ctl-sm-radius: var(--r-sm);

  /* MD — cỡ mặc định của toàn site */
  --ctl-md-h:      44px;
  --ctl-md-px:     var(--s-5);    /* 20 */
  --ctl-md-fs:     var(--t-sm);   /* 14 */
  --ctl-md-icon:   16px;
  --ctl-md-gap:    var(--s-2);
  --ctl-md-radius: var(--r-md);

  /* LG — CTA chính, ô nhập trên di động */
  --ctl-lg-h:      52px;
  --ctl-lg-px:     var(--s-6);    /* 24 */
  --ctl-lg-fs:     var(--t-base); /* 16 */
  --ctl-lg-icon:   18px;
  --ctl-lg-gap:    var(--s-3);
  --ctl-lg-radius: var(--r-lg);

  /* XL — nút hero */
  --ctl-xl-h:      60px;
  --ctl-xl-px:     var(--s-7);    /* 32 */
  --ctl-xl-fs:     var(--t-base);
  --ctl-xl-icon:   20px;
  --ctl-xl-gap:    var(--s-3);
  --ctl-xl-radius: var(--r-xl);

  --tap-min: 44px;   /* vùng chạm tối thiểu (§12.3) */

  /* Núm icon tròn nằm TRONG nút — đường kính = chiều cao nút trừ 2×viền đệm.
     Ràng buộc này giữ núm luôn cân trong nút ở mọi cỡ. */
  --ctl-md-knob: 32px;   /* 44 - 2×6 */
  --ctl-lg-knob: 40px;   /* 52 - 2×6 */
  --ctl-xl-knob: 48px;   /* 60 - 2×6 */

  /* ==========================================================
     7. ICON — thang riêng, luôn là số chẵn để nét không bị mờ nửa pixel
     ========================================================== */
  --icon-2xs: 12px;
  --icon-xs:  14px;
  --icon-sm:  16px;
  --icon-md:  20px;
  --icon-lg:  24px;
  --icon-xl:  32px;
  --icon-2xl: 48px;
  --icon-stroke: 1.75;        /* độ dày nét đồng nhất toàn site */
  --icon-stroke-bold: 2.25;   /* dùng cho icon ≤16px để không bị mảnh quá */

  /* ==========================================================
     8. AVATAR — thang riêng, luôn tròn
     ========================================================== */
  --avatar-xs: 24px;
  --avatar-sm: 32px;
  --avatar-md: 40px;
  --avatar-lg: 56px;
  --avatar-xl: 80px;
  --avatar-2xl: 120px;

  /* ==========================================================
     9. TỶ LỆ KHUNG ẢNH — dùng token, không viết số lẻ ở component
     ========================================================== */
  --ar-square:    1 / 1;
  --ar-portrait:  4 / 5;    /* ảnh chân dung */
  --ar-photo:     3 / 2;    /* ảnh chụp ngang */
  --ar-card:      16 / 10;  /* thẻ dự án chuẩn */
  --ar-video:     16 / 9;   /* nhúng video, thẻ rộng */
  --ar-cinema:    21 / 9;   /* banner tràn */

  /* ==========================================================
     10. CHUYỂN ĐỘNG
     ========================================================== */
  --d-instant: 80ms;
  --d-fast:    160ms;
  --d-base:    280ms;
  --d-slow:    520ms;
  --d-slower:  800ms;
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.30, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ==========================================================
     11. LỚP XẾP CHỒNG — khai báo tập trung để không bao giờ
     phải đoán "z-index bao nhiêu thì đủ cao"
     ========================================================== */
  --z-base:     0;
  --z-raised:   10;
  --z-sticky:   50;
  --z-nav:      100;
  --z-drawer:   200;
  --z-scrim:    300;
  --z-modal:    310;
  --z-toast:    400;
  --z-skip:     999;
}

/* ============================================================
   CHẾ ĐỘ SÁNG
   Chỉ ghi đè MÀU. Mọi token tỷ lệ giữ nguyên — đổi theme không
   được làm xê dịch bố cục dù chỉ một pixel.
   ============================================================ */
:root[data-theme="light"] {
  --c-bg:            #efede8;
  --c-bg-elev:       #f7f6f2;
  --c-bg-elev-2:     #e6e3dc;
  --c-bg-elev-3:     #dad6cd;
  --c-bg-inset:      #ffffff;
  --c-bg-elev-warm:  #f3eae3;   /* 6% màu nhấn trên nền nổi — xem khối tối */

  --c-text:          #12110f;   /* 16.1:1 */
  --c-text-muted:    #55534d;   /*  6.6:1 */
  --c-text-dim:      #656359;   /*  5.1:1 — bản trước #6e6c65 chỉ đạt 4.49, trượt ngưỡng */
  --c-text-on-accent:#ffffff;

  /* Cam #d93c00 chỉ đạt 3.9:1 khi làm CHỮ trên nền beige — trượt AA.
     Phải đậm hơn hẳn bản tối. Nền sáng đòi màu nhấn tối hơn nhiều so với
     trực giác, vì mắt cảm nhận cam là "đậm" trong khi luminance của nó cao. */
  --c-accent:        #b83200;   /* 5.5:1 làm chữ trên nền trang */
  --c-accent-hover:  #992a00;
  --c-accent-press:  #7d2200;
  --c-accent-soft:   rgba(184, 50, 0, 0.10);

  --c-border:        rgba(18, 17, 15, 0.12);
  --c-border-strong: rgba(18, 17, 15, 0.52);   /* ≥3:1 cho ranh giới điều khiển */
  --c-overlay:       rgba(239, 237, 232, 0.78);
  --c-scrim:         rgba(18, 17, 15, 0.42);

  --c-success:       #147a45;
  --c-success-soft:  rgba(20, 122, 69, 0.12);
  --c-warning:       #8a5000;   /* #a86200 chỉ đạt 4.07 — trượt ngưỡng chữ */
  --c-warning-soft:  rgba(138, 80, 0, 0.12);
  --c-danger:        #c22929;
  --c-danger-soft:   rgba(194, 41, 41, 0.12);
  --c-info:          #0b6bd3;
  --c-info-soft:     rgba(11, 107, 211, 0.12);

  --c-chart-1: #0b6bd3;
  --c-chart-2: #a86200;
  --c-chart-3: #147a45;
  --c-chart-4: #7b3fbf;
  --c-chart-5: #c0356b;
  --c-chart-grid: rgba(18, 17, 15, 0.10);

  --shadow-1: 0 1px 2px rgba(18, 17, 15, 0.08);
  --shadow-2: 0 4px 16px rgba(18, 17, 15, 0.10);
  --shadow-3: 0 12px 36px rgba(18, 17, 15, 0.12);
  --shadow-4: 0 24px 64px rgba(18, 17, 15, 0.16);
}

/* ============================================================
   MÀN HÌNH LỚN (2K / 4K)
   Không phóng to mọi thứ — chỉ nới khung chứa và nhịp dọc.
   Cỡ chữ nội dung GIỮ NGUYÊN: chữ 16px trên màn 4K vẫn là 16px,
   phóng lên sẽ phá bề rộng đọc thoải mái.
   ============================================================ */
@media (min-width: 1920px) {
  :root {
    --w-content: 1600px;
    --gutter:    5rem;
    --section-y: 9rem;
  }
}

@media (min-width: 2560px) {
  :root {
    --w-content: 1780px;
    --gutter:    7rem;
  }
}

/* ============================================================
   MÀN HÌNH THẤP NẰM NGANG (điện thoại xoay ngang)
   Chiều cao rất hạn chế → rút nhịp dọc, không rút cỡ chữ.
   ============================================================ */
@media (max-height: 520px) and (orientation: landscape) {
  :root {
    --section-y: 3rem;
    --nav-h: 56px;
    --nav-h-lg: 56px;
  }
}

/* Tôn trọng thiết lập giảm chuyển động (§12.5).
   Rút gần như tức thì thay vì xoá hẳn, để giao diện vẫn phản hồi. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-instant: 1ms;
    --d-fast:    1ms;
    --d-base:    1ms;
    --d-slow:    1ms;
    --d-slower:  1ms;
  }
}