/* OneCAD Hub — token giao diện (bước 3, 28/10/2026).
 * Phần thương hiệu lấy NGUYÊN từ Design System «OneCAD Việt Nam»
 * (https://claude.ai/artifact/EKwHgJR8FeAo3QY7E1D4Tr). Phần «Hub» là bổ sung cho ứng dụng.
 * Theme: mặc định theo hệ thống; data-theme="light" | "dark" trên <html> để ép.
 */

:root {
  /* ── Thương hiệu OneCAD (không đổi) ── */
  --brand-blue-300: #00a4e4;
  --brand-blue-500: #0085cb;
  --brand-blue-700: #0061ae;
  --brand-blue-900: #0051a1;
  --brand-green-300: #87c12e;
  --brand-green-500: #62a52e;
  --brand-green-700: #297a2d;
  --brand-green-900: #1c541f;
  --brand-teal-300: #3bb3af;
  --brand-teal-700: #107072;
  --wordmark-grey: #464749;

  /* ── Nền / chữ / đường kẻ (OneCAD, theo theme) ── */
  --surface: #ffffff;
  --surface-alt: #f4f6f8;
  --surface-raised: #ffffff;      /* Hub: thẻ, hộp thoại */
  --surface-sunken: #eef1f4;      /* Hub: thanh bên, nền ô nhập tắt */
  --ink: #0b0d10;
  --ink-muted: #4b5260;
  --ink-subtle: #6b7280;          /* Hub: chữ phụ cấp 3, placeholder (≥ 4.5:1 trên surface) */
  --line: #e1e5ea;
  --line-strong: #c9d0d8;         /* Hub: viền ô nhập */
  --link: var(--brand-blue-700);
  --focus: var(--brand-blue-500);

  /* ── Hub: hành động ── (phương án nút chính chốt ở bước 3) */
  --action: var(--ink);
  --action-ink: var(--surface);
  --action-hover: #2a2f37;
  --selected: var(--brand-blue-700);        /* mục đang chọn ở thanh bên, tab */
  --selected-tint: rgba(0, 97, 174, 0.08);

  /* ── Hub: trạng thái (ngữ nghĩa, tách khỏi màu thương hiệu) ── */
  --ok: var(--brand-green-700);   --ok-tint: rgba(41, 122, 45, 0.10);
  --info: var(--brand-blue-700);  --info-tint: rgba(0, 97, 174, 0.10);
  --warn: #a15c00;                --warn-tint: rgba(196, 120, 0, 0.12);
  --danger: #b42318;              --danger-tint: rgba(180, 35, 24, 0.10);
  --neutral: #4b5260;             --neutral-tint: rgba(75, 82, 96, 0.10);
  /* Ngành (chip ngành, cột kỹ sư) */
  --nganh-xay-dung: var(--brand-blue-700);
  --nganh-co-khi: var(--brand-teal-700);
  --nganh-khac: var(--neutral);

  /* ── Chữ ── */
  --font-sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Thang chữ ứng dụng (dày dữ liệu; web dùng thang display của OneCAD) */
  --text-page: 600 24px/32px var(--font-sans);      /* tiêu đề trang */
  --text-section: 700 17px/24px var(--font-sans);   /* tiêu đề khối, tên thẻ */
  --text-body: 400 14px/21px var(--font-sans);      /* thân, ô nhập, bảng */
  --text-strong: 600 14px/21px var(--font-sans);    /* tên khách trong bảng */
  --text-small: 400 12.5px/18px var(--font-sans);   /* phụ, thời gian */
  --text-label: 700 11.5px/16px var(--font-sans);   /* NHÃN VIẾT HOA, giãn 1px */
  --text-kpi: 700 28px/32px var(--font-sans);       /* số trên bảng điều phối, tabular-nums */

  /* ── Khoảng cách, bo góc, bóng (OneCAD) ── */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --radius-sm: 4px; --radius-md: 6px; --radius-pill: 999px;
  --shadow-pop: 0 12px 30px -10px rgba(0, 0, 0, 0.30);  /* menu, hộp thoại */
  --row-h: 44px;          /* chiều cao dòng bảng / vùng bấm tối thiểu */
  --sidebar-w: 240px;

  /* ── Icon: Lucide, nét 1.75, cỡ 20 (16 trong bảng) ── */
  --icon-stroke: 1.75;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #0b0d10; --surface-alt: #15181d; --surface-raised: #15181d; --surface-sunken: #101317;
    --ink: #f5f7fa; --ink-muted: #a7afbb; --ink-subtle: #8b93a0;
    --line: #2a2f37; --line-strong: #3a414b;
    --link: var(--brand-blue-300); --focus: var(--brand-blue-300);
    --action: #f5f7fa; --action-ink: #0b0d10; --action-hover: #d9dee5;
    --selected: var(--brand-blue-300); --selected-tint: rgba(0, 164, 228, 0.14);
    --ok: #7cc36a; --ok-tint: rgba(124, 195, 106, 0.14);
    --info: var(--brand-blue-300); --info-tint: rgba(0, 164, 228, 0.14);
    --warn: #f0a63a; --warn-tint: rgba(240, 166, 58, 0.14);
    --danger: #f2756a; --danger-tint: rgba(242, 117, 106, 0.14);
    --neutral: #a7afbb; --neutral-tint: rgba(167, 175, 187, 0.14);
    --nganh-xay-dung: var(--brand-blue-300); --nganh-co-khi: var(--brand-teal-300);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --surface: #0b0d10; --surface-alt: #15181d; --surface-raised: #15181d; --surface-sunken: #101317;
  --ink: #f5f7fa; --ink-muted: #a7afbb; --ink-subtle: #8b93a0;
  --line: #2a2f37; --line-strong: #3a414b;
  --link: var(--brand-blue-300); --focus: var(--brand-blue-300);
  --action: #f5f7fa; --action-ink: #0b0d10; --action-hover: #d9dee5;
  --selected: var(--brand-blue-300); --selected-tint: rgba(0, 164, 228, 0.14);
  --ok: #7cc36a; --ok-tint: rgba(124, 195, 106, 0.14);
  --info: var(--brand-blue-300); --info-tint: rgba(0, 164, 228, 0.14);
  --warn: #f0a63a; --warn-tint: rgba(240, 166, 58, 0.14);
  --danger: #f2756a; --danger-tint: rgba(242, 117, 106, 0.14);
  --neutral: #a7afbb; --neutral-tint: rgba(167, 175, 187, 0.14);
  --nganh-xay-dung: var(--brand-blue-300); --nganh-co-khi: var(--brand-teal-300);
  color-scheme: dark;
}