/* Hallmark · genre: modern-minimal · design-system: design.md · designed-as-app
 * Nguồn duy nhất cho màu / chữ / khoảng cách của BIM-PMP. Màu theo Coteccons Corporate Brand Guidelines
 * (Coteccons Blue Pantone 2768 C = #16315e; quy tắc "1 core + 1 vibrant"). View và CSS khác chỉ tham chiếu
 * var(--…) — không viết hex/px cứng. Sửa giá trị ở đây, không sửa ở nơi dùng.
 */
:root {
  /* ── Nền & đường kẻ (trung tính lạnh, hue 260 của Coteccons Blue) ── */
  --color-paper:        oklch(98.5% 0.004 260);   /* nền trang */
  --color-surface:      oklch(99.6% 0.002 260);   /* bảng, ô nhập, menu, khối */
  --color-surface-2:    oklch(96.5% 0.006 260);   /* hàng hover, header bảng, nền phụ */
  --color-rule:         oklch(91%   0.008 262);   /* mọi đường kẻ phân vùng */
  --color-rule-strong:  oklch(83.8% 0.018 264);   /* = #c4cad6 brand — viền nút phụ */
  --color-rule-input:   oklch(66%   0.016 264);   /* viền ô nhập: ≥ 3:1 so với surface (WCAG 1.4.11) */

  /* ── Chữ: gần đen (yêu cầu 2026-10-05: chữ xám → đen). Chỉ nhãn/chú thích còn xám đậm Cool Gray 11 ── */
  --color-ink:          oklch(16%   0.012 260);   /* chữ chính — gần đen (#0a0d12), ~19:1 */
  --color-ink-2:        oklch(20%   0.010 260);   /* chữ phụ (link menu, nhãn form) — cũng gần đen */
  --color-muted:        oklch(38.7% 0.005 271);   /* = #434447 Cool Gray 11 — nhãn nhỏ, chú thích, 9.3:1 */
  --color-on-accent:    oklch(99%   0.003 260);   /* chữ trên nền accent */

  /* ── Màu nhấn: core + vibrant ── */
  --color-accent:       oklch(31.9% 0.087 260);   /* = #16315e Coteccons Blue — nút chính, link, mục đang chọn */
  --color-accent-hover: oklch(39%   0.100 260);
  --color-accent-soft:  oklch(95%   0.020 260);   /* nền mục đang chọn */
  --color-focus:        oklch(45.4% 0.208 262);   /* = #0047c7 vibrant — viền focus, link hover */

  /* ── Ngữ nghĩa: *-mark = hex brand (chấm, vạch, biểu đồ); *-ink = chữ (≥ 4.5:1 trên *-soft) ── */
  --color-danger-mark:  oklch(65.7% 0.175 34);    /* = #e86042 */
  --color-danger-ink:   oklch(48%   0.140 34);
  --color-danger-soft:  oklch(95.5% 0.030 34);
  --color-warning-mark: oklch(82.3% 0.147 81);    /* = #f5ba42 */
  --color-warning-ink:  oklch(48%   0.100 75);
  --color-warning-soft: oklch(96%   0.045 85);
  --color-success-mark: oklch(67.3% 0.125 153);   /* = #51ac70 */
  --color-success-ink:  oklch(45%   0.100 153);
  --color-success-soft: oklch(95.5% 0.030 153);
  --color-info-mark:    oklch(73.6% 0.138 242);   /* = #4cb3f8 */
  --color-info-ink:     var(--color-focus);
  --color-info-soft:    oklch(95%   0.030 262);

  /* ── Biểu đồ: 6 dòng màu brand, xen sáng/tối ── */
  --chart-1: #16315e; --chart-2: #5fd1c1; --chart-3: #0047c7; --chart-4: #f5ba42;
  --chart-5: #51ac70; --chart-6: #e86042; --chart-7: #c59a6e; --chart-8: #636468;

  /* ── Chữ ── */
  --font-sans: "Lexend Deca", "Segoe UI", system-ui, -apple-system, sans-serif;
  --weight-light: 300;     /* thân chữ ≥ 14px */
  --weight-normal: 400;    /* chữ ≤ 13px, nút, tag, nhãn */
  --weight-medium: 500;    /* tiêu đề mục, số liệu */
  --weight-bold: 700;      /* tiêu đề trang */
  --text-xs: 0.857rem;     /* 12px trên gốc 14px */
  --text-sm: 0.929rem;     /* 13px */
  --text-md: 1rem;         /* 14px */
  --text-lg: 1.143rem;     /* 16px */
  --text-xl: 1.429rem;     /* 20px */
  --text-2xl: 1.714rem;    /* 24px */
  --leading: 1.55;
  --leading-tight: 1.25;

  /* ── Khoảng cách: thang 4pt (gốc 14px nên ghi bằng px) ── */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;

  /* ── Bo góc, viền, độ cao ── */
  --radius-sm: 4px;        /* tag */
  --radius: 6px;           /* nút, ô nhập */
  --radius-lg: 10px;       /* khối, thẻ */
  --border: 1px solid var(--color-rule);
  --shadow-pop: 0 6px 20px oklch(24% 0.03 260 / 0.10), 0 1px 3px oklch(24% 0.03 260 / 0.06); /* chỉ dropdown, modal, popover */

  /* ── Chuyển động ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-short: 120ms;
  --dur-med: 200ms;

  /* ── Lớp chồng ── */
  --z-sticky: 200;
  --z-dropdown: 1000;      /* khớp Bootstrap */
}

@media print {
  :root {
    --color-paper: white;
    --color-surface: white;
  }
}