/*
 * Lớp phủ giao diện VINASECURA — ADR-217. Chỉ ghi đè BIẾN đã khai ở packages/ui/styles.css;
 * không chứa selector thành phần. Chép vào apps/<app>/public/theme/theme.css (deploy/vinasecura/chay.ps1).
 *
 * Nguồn màu: D:\VINASECURA\...\08-source-files\design-tokens\vinasecura-tokens.json (Brand Identity v1.1 —
 * bản ĐỀ XUẤT, chờ Ban lãnh đạo phê duyệt). Dạng "H S% L%" theo quy ước của styles.css.
 *
 * Hai sắc cam, hai chỗ dùng (cùng logic cyan/cyan-ink của sản phẩm gốc — WCAG 2.x tính ngày 02/11/2026):
 *   Signal Orange #EE5A16 — trên NỀN TỐI (khung, vạch đang-chọn, điểm nhấn): 5.04:1 trên navy ✅
 *   Ember Orange  #C2410C — trên NỀN SÁNG (nút chính, liên kết): chữ trắng 5.18:1 ✅
 *   ⛔ #EE5A16 với chữ trắng chỉ 3.44:1 — không dùng làm nền nút có chữ trắng.
 *
 * `html:root` / `html.dark` (độ ưu tiên 0,1,1) thắng `:root` / `.dark` (0,1,0) của styles.css bất kể
 * thứ tự thẻ <link>; ở website, <style id="giao-dien-tuy-bien"> (màu khách thuê cấu hình trong ERP) cũng
 * dùng `html:root` và đứng sau tệp này nên vẫn là lời cuối.
 *
 * Trạng thái (success/warning/info/destructive) GIỮ của sản phẩm: không phải màu thương hiệu, và
 * Amber Gold #F9A31E của bộ nhận diện quá gần cam chính — dùng làm "cảnh báo" sẽ lẫn với "đang chọn".
 */
html:root {
  /* ---- giá trị gốc của bộ nhận diện ---- */
  --brand-navy-900: 214 52% 11%; /* #0E1B2C Deep Command Navy */
  --brand-navy-800: 212 15% 22%; /* #2F3740 Secure Graphite */
  --brand-navy-700: 213 49% 24%; /* #1F3A5A Steel Blue */
  --brand-light: 213 17% 87%;    /* #D9DEE4 Slate 200 */

  /* ---- MÀU THƯƠNG HIỆU — hai sắc ---- */
  --brand-primary: 19 86% 51%;        /* #EE5A16 — trên nền TỐI */
  --brand-primary-on: 214 52% 11%;    /* chữ trên #EE5A16: navy, 5.0:1 */
  --brand-primary-ink: 17 88% 40%;    /* #C2410C — trên nền SÁNG, chữ trắng 5.2:1 */
  --brand-primary-hover: 17 91% 34%;  /* #A33508 */
  --brand-primary-active: 18 92% 28%; /* #8A2D06 */
  --brand-primary-soft: 21 85% 95%;   /* #FDEEE6 nền nhạt cho điểm nhấn */

  /* ---- LỚP KHUNG — thanh bên, thanh trên; không đổi theo chế độ ---- */
  --chrome: 214 52% 11%;          /* navy */
  --chrome-raised: 212 15% 22%;   /* graphite */
  --chrome-active: 214 44% 25%;   /* #243C5C */
  --chrome-foreground: 0 0% 100%;
  --chrome-muted: 213 17% 87%;    /* slate 200: 12.8:1 trên navy */
  --chrome-faint: 211 12% 65%;    /* slate 400: 6.9:1 trên navy */
  --chrome-accent: 19 86% 51%;    /* vạch đang-chọn: Signal Orange trên navy */
  --chrome-border: 213 49% 24%;   /* steel */

  /* ---- VÙNG LÀM VIỆC — chế độ sáng ---- */
  --background: 216 26% 96%;      /* #F3F5F8 Mist */
  --foreground: 214 52% 11%;      /* navy */
  --card: 0 0% 100%;
  --card-foreground: 214 52% 11%;
  --popover: 0 0% 100%;
  --popover-foreground: 214 52% 11%;

  --primary: var(--brand-primary-ink);
  --primary-hover: var(--brand-primary-hover);
  --primary-active: var(--brand-primary-active);
  --primary-foreground: 0 0% 100%;

  --secondary: 213 17% 92%;
  --secondary-foreground: 214 52% 11%;
  --muted: 213 17% 92%;
  --muted-foreground: 212 12% 40%; /* #5B6673 Slate 600: 5.8:1 trên trắng */
  --accent: 213 17% 87%;           /* slate 200 */
  --accent-foreground: 214 52% 11%;

  --text-tertiary: 212 12% 48%;
  --text-disabled: 211 12% 65%;
  --link: var(--brand-primary-ink);

  --border: 213 17% 87%;        /* slate 200 */
  --border-strong: 211 12% 65%; /* slate 400 */
  --input: 213 17% 87%;
  --ring: var(--brand-primary-ink);

  --shadow-1: 0 1px 2px 0 hsl(214 52% 11% / 0.06);
  --shadow-2: 0 2px 8px -2px hsl(214 52% 11% / 0.1), 0 1px 2px 0 hsl(214 52% 11% / 0.06);
  --shadow-3: 0 12px 32px -12px hsl(214 52% 11% / 0.22);

  /* Chữ: bộ nhận diện chỉ dùng Be Vietnam Pro cho cả tiêu đề lẫn thân — không dùng Exo 2. */
  --font-display: var(--font-body);

  /* Bo góc: tokens ghi radius md = 4px — trùng với sản phẩm (0.25rem), giữ nguyên. */
}

html.dark {
  --chrome: 214 56% 8%;           /* #091320 */
  --chrome-raised: 214 52% 11%;   /* navy */
  --chrome-active: 214 44% 25%;
  --chrome-foreground: 0 0% 100%;
  --chrome-muted: 213 17% 87%;
  --chrome-faint: 211 12% 65%;
  --chrome-accent: 19 86% 51%;
  --chrome-border: 213 49% 24%;

  --background: 214 52% 11%;      /* navy */
  --foreground: 213 17% 87%;      /* slate 200 */
  --card: 214 46% 16%;            /* #16263B */
  --card-foreground: 213 17% 87%;
  --popover: 214 46% 16%;
  --popover-foreground: 213 17% 87%;

  /* Nền tối ⇒ nút chính dùng cam sáng, chữ navy (5.0:1). */
  --primary: 19 86% 51%;
  --primary-hover: 19 88% 57%;    /* #F26E33 */
  --primary-active: 19 86% 45%;   /* #D84F10 */
  --primary-foreground: 214 52% 11%;

  --secondary: 213 49% 24%;       /* steel */
  --secondary-foreground: 213 17% 87%;
  --muted: 213 49% 24%;
  --muted-foreground: 211 12% 65%; /* slate 400 */
  --accent: 213 49% 24%;
  --accent-foreground: 213 17% 87%;

  --text-tertiary: 211 12% 58%;
  --text-disabled: 212 12% 40%;
  --link: 19 88% 62%;             /* cam sáng hơn cho chữ trên navy */

  --border: 213 49% 24%;
  --border-strong: 213 30% 35%;
  --input: 213 49% 24%;
  --ring: 19 86% 51%;
}