/* =============================================================================
 * DESIGN TOKENS — CMC UI
 *
 * NGUỒN: `design-system-cmc/` (bản chắt lọc máy đọc được, sinh tự động từ export
 * Figma của board "CMC UI"). Đây là bản ĐẦY ĐỦ, thay cho bản rút gọn `cmc-ui-kit`
 * dùng ở lượt áp đầu — giá trị các bậc đang chạy KHÔNG đổi, chỉ được đặt lại đúng
 * tên gốc trên board và bổ sung những bậc/hue mà bản rút gọn đã lược đi.
 *
 * BA LỚP, đọc từ dưới lên:
 *   1. Thang gốc `--c-<hue>-<0..9>` — 140 màu, 14 nhóm, tên bậc lấy nguyên nhãn
 *      trên board (`gray 3`, `blue 6`…). Thang Open Color. KHÔNG gọi thẳng trong UI.
 *   2. Bí danh theo vai trò `--primary-*`, `--gray-*`, `--error-*`… — giữ tên mà
 *      code hai app đang dùng, trỏ vào lớp 1. Ghi kèm bậc gốc để tra ngược.
 *   3. Bí danh ngữ nghĩa `--color-primary`, `--color-text`… — LỚP DUY NHẤT mà code
 *      UI được phép dùng.
 *
 * ⚠ MÀU PRIMARY VẪN LÀ PHẦN SUY NGƯỢC. Vùng "Primary colors" của board là ảnh và đã
 * mất (`GAPS.md`: "Màu Primary (thương hiệu) — 0%"); 140 màu ở lớp 1 là palette PHỤ.
 * `#0064B1` được chọn vì nó xuất hiện 23 node trên toàn board, đúng những chỗ primary
 * phải xuất hiện: switch bật (x4), viền focus bảng 2px/3px, slider, progress, alert,
 * chart, chips, grid. 9 bậc còn lại dựng quanh nó theo tỉ lệ độ sáng.
 * Chỉ chốt được khi khách export lại vùng "Primary colors" hoặc Variables ở Dev Mode.
 * ============================================================================= */
:root {
    --color-white: #ffffff;
    --color-black: #000000;

    /* == LỚP 1 — thang gốc, 140 màu / 14 nhóm (01-tokens/colors.json) ==========
       Quy ước bậc (README của design system):
         0-1  nền nhạt (alert, tag, hover nhẹ)
         2-4  viền, đường kẻ, disabled
         5-6  màu chủ đạo (nền button, viền focus)
         7-9  chữ trên nền nhạt, hover/pressed
       Nhóm `dark` là thang RIÊNG CHO CHẾ ĐỘ TỐI, không phải gray đảo ngược. */
    /* dark */
    --c-dark-0: #c9c9c9;
    --c-dark-1: #b8b8b8;
    --c-dark-2: #828282;
    --c-dark-3: #696969;
    --c-dark-4: #424242;
    --c-dark-5: #3b3b3b;
    --c-dark-6: #2e2e2e;
    --c-dark-7: #242424;
    --c-dark-8: #1f1f1f;
    --c-dark-9: #141414;
    /* gray */
    --c-gray-0: #f8f9fa;
    --c-gray-1: #f1f3f5;
    --c-gray-2: #e9ecef;
    --c-gray-3: #dee2e6;
    --c-gray-4: #ced4da;
    --c-gray-5: #adb5bd;
    --c-gray-6: #868e96;
    --c-gray-7: #495057;
    --c-gray-8: #343a40;
    --c-gray-9: #212529;
    /* red */
    --c-red-0: #fff5f5;
    --c-red-1: #ffe3e3;
    --c-red-2: #ffc9c9;
    --c-red-3: #ffa8a8;
    --c-red-4: #ff8787;
    --c-red-5: #ff6b6b;
    --c-red-6: #fa5252;
    --c-red-7: #f03e3e;
    --c-red-8: #e03131;
    --c-red-9: #c92a2a;
    /* pink */
    --c-pink-0: #fff0f6;
    --c-pink-1: #ffdeeb;
    --c-pink-2: #fcc2d7;
    --c-pink-3: #faa2c1;
    --c-pink-4: #f783ac;
    --c-pink-5: #f06595;
    --c-pink-6: #e64980;
    --c-pink-7: #d6336c;
    --c-pink-8: #c2255c;
    --c-pink-9: #a61e4d;
    /* grape */
    --c-grape-0: #f8f0fc;
    --c-grape-1: #f3d9fa;
    --c-grape-2: #eebefa;
    --c-grape-3: #e599f7;
    --c-grape-4: #da77f2;
    --c-grape-5: #cc5de8;
    --c-grape-6: #be4bdb;
    --c-grape-7: #ae3ec9;
    --c-grape-8: #9c36b5;
    --c-grape-9: #862e9c;
    /* violet */
    --c-violet-0: #f3f0ff;
    --c-violet-1: #e5dbff;
    --c-violet-2: #d0bfff;
    --c-violet-3: #b197fc;
    --c-violet-4: #9775fa;
    --c-violet-5: #845ef7;
    --c-violet-6: #7950f2;
    --c-violet-7: #7048e8;
    --c-violet-8: #6741d9;
    --c-violet-9: #5f3dc4;
    /* indigo */
    --c-indigo-0: #edf2ff;
    --c-indigo-1: #dbe4ff;
    --c-indigo-2: #bac8ff;
    --c-indigo-3: #91a7ff;
    --c-indigo-4: #748ffc;
    --c-indigo-5: #5c7cfa;
    --c-indigo-6: #4c6ef5;
    --c-indigo-7: #4263eb;
    --c-indigo-8: #3b5bdb;
    --c-indigo-9: #364fc7;
    /* blue */
    --c-blue-0: #e7f5ff;
    --c-blue-1: #d0ebff;
    --c-blue-2: #a5d8ff;
    --c-blue-3: #74c0fc;
    --c-blue-4: #4dabf7;
    --c-blue-5: #339af0;
    --c-blue-6: #228be6;
    --c-blue-7: #1c7ed6;
    --c-blue-8: #1971c2;
    --c-blue-9: #1864ab;
    /* cyan */
    --c-cyan-0: #e3fafc;
    --c-cyan-1: #c5f6fa;
    --c-cyan-2: #99e9f2;
    --c-cyan-3: #66d9e8;
    --c-cyan-4: #3bc9db;
    --c-cyan-5: #22b8cf;
    --c-cyan-6: #15aabf;
    --c-cyan-7: #1098ad;
    --c-cyan-8: #0c8599;
    --c-cyan-9: #0b7285;
    /* teal */
    --c-teal-0: #e6fcf5;
    --c-teal-1: #c3fae8;
    --c-teal-2: #96f2d7;
    --c-teal-3: #63e6be;
    --c-teal-4: #38d9a9;
    --c-teal-5: #20c997;
    --c-teal-6: #12b886;
    --c-teal-7: #0ca678;
    --c-teal-8: #099268;
    --c-teal-9: #087f5b;
    /* green */
    --c-green-0: #ebfbee;
    --c-green-1: #d3f9d8;
    --c-green-2: #b2f2bb;
    --c-green-3: #8ce99a;
    --c-green-4: #69db7c;
    --c-green-5: #51cf66;
    --c-green-6: #40c057;
    --c-green-7: #37b24d;
    --c-green-8: #2f9e44;
    --c-green-9: #2b8a3e;
    /* lime */
    --c-lime-0: #f4fce3;
    --c-lime-1: #e9fac8;
    --c-lime-2: #d8f5a2;
    --c-lime-3: #c0eb75;
    --c-lime-4: #a9e34b;
    --c-lime-5: #94d82d;
    --c-lime-6: #82c91e;
    --c-lime-7: #74b816;
    --c-lime-8: #66a80f;
    --c-lime-9: #5c940d;
    /* yellow */
    --c-yellow-0: #fff9db;
    --c-yellow-1: #fff3bf;
    --c-yellow-2: #ffec99;
    --c-yellow-3: #ffe066;
    --c-yellow-4: #ffd43b;
    --c-yellow-5: #fcc419;
    --c-yellow-6: #fab005;
    --c-yellow-7: #f59f00;
    --c-yellow-8: #f08c00;
    --c-yellow-9: #e67700;
    /* orange */
    --c-orange-0: #fff4e6;
    --c-orange-1: #ffe8cc;
    --c-orange-2: #ffd8a8;
    --c-orange-3: #ffc078;
    --c-orange-4: #ffa94d;
    --c-orange-5: #ff922b;
    --c-orange-6: #fd7e14;
    --c-orange-7: #f76707;
    --c-orange-8: #e8590c;
    --c-orange-9: #d9480f;

    /* == LỚP 2 — bí danh theo vai trò =========================================
       Tên giữ nguyên như lượt áp trước để không phải sửa lại code; giá trị nay trỏ
       thẳng vào lớp 1. Phần sau dấu <- là bậc gốc trên board.

       LƯU Ý ĐỔI TÊN: bản rút gọn `cmc-ui-kit` đánh số các thang trạng thái là
       000/100/200/300/500/600/700/800 — đó KHÔNG phải bậc gốc mà là một cách đánh
       lại, bỏ mất 2 bậc và lệch tên (kit gọi "600" thực ra là bậc 7 của board).
       Giữ cả hai cách gọi để tra ngược, và bổ sung các bậc kit đã bỏ. */

    /* Primary — xanh CMC (SUY NGƯỢC, xem cảnh báo đầu file) */
    --primary-000: #f2f8fd;
    --primary-100: #e7f2fb;
    --primary-150: #cfe5f7;
    --primary-200: #a5ceef;
    --primary-300: #74b4e6;
    --primary-400: #3e93d6;
    --primary-500: #1478c4;
    --primary-600: #0064b1;   /* <- màu thương hiệu, 23 node trên board */
    --primary-700: #005796;
    --primary-800: #00497e;
    --primary-900: #003a66;

    /* Gray — thang `gray` của board. Bản rút gọn BỎ SÓT bậc 4 (#CED4DA); nay có đủ. */
    --gray-100: var(--c-gray-0);   /* <- gray 0 */
    --gray-200: var(--c-gray-1);   /* <- gray 1 */
    --gray-300: var(--c-gray-2);   /* <- gray 2 */
    --gray-400: var(--c-gray-3);   /* <- gray 3 */
    --gray-450: var(--c-gray-4);   /* <- gray 4 — bậc kit bỏ sót */
    --gray-500: var(--c-gray-5);   /* <- gray 5 */
    --gray-600: var(--c-gray-6);   /* <- gray 6 */
    --gray-700: var(--c-gray-7);   /* <- gray 7 */
    --gray-800: var(--c-gray-8);   /* <- gray 8 */
    --gray-900: var(--c-gray-9);   /* <- gray 9 */

    /* Trạng thái — error=red · warning=orange · success=teal · info=blue.
       Kit chỉ mang 8 bậc; hai bậc còn thiếu bổ sung dưới tên *-250 và *-350. */
    --error-000: var(--c-red-0);
    --error-100: var(--c-red-1);
    --error-200: var(--c-red-2);
    --error-250: var(--c-red-3);   /* <- red 3 — bậc kit bỏ sót */
    --error-300: var(--c-red-4);
    --error-350: var(--c-red-5);   /* <- red 5 — bậc kit bỏ sót */
    --error-500: var(--c-red-6);
    --error-600: var(--c-red-7);   /* <- red 7 — bậc alias chính */
    --error-700: var(--c-red-8);
    --error-800: var(--c-red-9);

    --warning-000: var(--c-orange-0);
    --warning-100: var(--c-orange-1);
    --warning-200: var(--c-orange-2);
    --warning-250: var(--c-orange-3);
    --warning-300: var(--c-orange-4);
    --warning-350: var(--c-orange-5);
    --warning-500: var(--c-orange-6);
    --warning-600: var(--c-orange-7);
    --warning-700: var(--c-orange-8);
    --warning-800: var(--c-orange-9);

    --success-000: var(--c-teal-0);
    --success-100: var(--c-teal-1);
    --success-200: var(--c-teal-2);
    --success-250: var(--c-teal-3);
    --success-300: var(--c-teal-4);
    --success-350: var(--c-teal-5);
    --success-500: var(--c-teal-6);
    --success-600: var(--c-teal-7);
    --success-700: var(--c-teal-8);
    --success-800: var(--c-teal-9);

    --info-000: var(--c-blue-0);
    --info-100: var(--c-blue-1);
    --info-200: var(--c-blue-2);
    --info-250: var(--c-blue-3);
    --info-300: var(--c-blue-4);
    --info-350: var(--c-blue-5);
    --info-500: #2d96ff;           /* KHÔNG thuộc thang Open Color — màu riêng đo được
                                      trên board (vùng Chart, 6 node). Giữ nguyên. */
    --info-600: var(--c-blue-6);
    --info-700: var(--c-blue-7);
    --info-800: var(--c-blue-8);
    --info-900: var(--c-blue-9);

    /* Bản rút gọn gọi nhóm này là "purple"; tên gốc trên board là `violet`. */
    --purple-050: var(--c-violet-0);
    --purple-100: var(--c-violet-1);
    --purple-500: var(--c-violet-6);
    --purple-700: var(--c-violet-8);

    /* == LỚP 3 — bí danh ngữ nghĩa (LỚP DUY NHẤT code UI được dùng) ============ */
    --color-primary: var(--primary-600);
    --color-primary-hover: var(--primary-500);
    --color-primary-pressed: var(--primary-700);
    --color-primary-subtle: var(--primary-100);

    --color-bg: var(--color-white);
    --color-bg-subtle: var(--gray-200);
    --color-surface: var(--color-white);
    --color-border: var(--gray-400);
    --color-border-strong: var(--gray-500);
    --color-divider: var(--gray-300);

    --color-text: var(--gray-900);
    --color-text-secondary: var(--gray-700);
    --color-text-tertiary: var(--gray-600);
    --color-text-disabled: var(--gray-500);
    --color-text-on-primary: var(--color-white);

    --color-danger: var(--error-600);
    --color-danger-bg: var(--error-000);
    --color-warning: var(--warning-600);
    --color-warning-bg: var(--warning-000);
    --color-success: var(--success-600);
    --color-success-bg: var(--success-000);
    --color-info: var(--info-600);
    --color-info-bg: var(--info-000);

    /* == Bảng màu PHÂN LOẠI (chart / định danh) ================================
       Đo trực tiếp từ vùng `Chart` của board (02-components/chart.md). Đây là dãy
       màu cho SERIES biểu đồ và cho màu ĐỊNH DANH (avatar băm theo tên) — vai trò
       khác hẳn màu ngữ nghĩa: chúng chỉ cần phân biệt được với nhau, không mang
       nghĩa tốt/xấu. Dùng theo thứ tự; đừng tự phối thêm màu ngoài dãy. */
    --chart-1: #0064b1;   /* primary */
    --chart-2: #2d96ff;
    --chart-3: #12b886;   /* teal 6 */
    --chart-4: #f59f00;   /* yellow 7 */
    --chart-5: #f76707;   /* orange 7 */
    --chart-6: #f03e3e;   /* red 7 */
    --chart-7: #1c7ed6;   /* blue 7 */
    --chart-8: #16b364;
    --chart-9: #ff577b;
    --chart-10: #343a40;  /* gray 8 */

    /* == Typography — Roboto, thang 11 cấp =====================================
       Base 16px. Bản rút gọn chỉ mang 8 cấp; ba cấp lớn nhất (48/60/72) có thật
       trên board nên đưa đủ vào đây. */
    --font-family-base: 'Roboto', 'Inter', -apple-system, 'Segoe UI', Arial, sans-serif;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --display-2xl: 72px;
    --display-xl: 60px;
    --display-lg: 48px;
    --display-md: 36px;
    --display-sm: 30px;
    --display-xs: 24px;
    --text-xl: 20px;
    --text-lg: 18px;
    --text-md: 16px;
    --text-sm: 14px;
    --text-xs: 12px;

    /* line-height KHÔNG có trong nguồn — Figma không xuất thuộc tính này (`GAPS.md`).
       Các giá trị dưới là TỰ ĐẶT theo đúng gợi ý của chính tài liệu ("1.5 cho body,
       1.2 cho display"), không phải số đo từ board. */
    --display-2xl-lh: 86px;
    --display-xl-lh: 72px;
    --display-lg-lh: 58px;
    --display-md-lh: 44px;
    --display-sm-lh: 38px;
    --display-xs-lh: 32px;
    --text-xl-lh: 30px;
    --text-lg-lh: 28px;
    --text-md-lh: 24px;
    --text-sm-lh: 20px;
    --text-xs-lh: 18px;

    /* == Khoảng cách — base-4/8, suy từ 665 margin + 240 padding ===============
       Bổ sung 3px và 60px (60px đứng thứ 2 về tần suất trên board) mà bản rút gọn
       nhảy qua. 6px giữ lại vì hai app đang dùng, dù board chỉ có 6 lần. */
    --space-2: 2px;
    --space-3: 3px;
    --space-4: 4px;
    --space-6: 6px;
    --space-8: 8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-60: 60px;
    --space-64: 64px;

    /* == Bo góc — 814 khai báo, Figma xuất theo TỪNG GÓC ======================= */
    --radius-xs: 3px;      /* 7 lần */
    --radius-sm: 4px;      /* CHỈ 2 lần trên board — kit tự nâng thành một bậc. Giữ
                              vì antd cần `borderRadiusSM`; phân vân thì dùng md. */
    --radius-md: 8px;      /* 623 lần — MẶC ĐỊNH: button, input, card */
    --radius-lg: 12px;     /* 76 lần — button lớn, modal */
    --radius-xl: 32px;     /* 34 lần — card lớn, khối nhấn */
    --radius-pill: 120px;  /* 5 lần */
    --radius-tab: 4px 4px 0 0;  /* 13 lần — tab, header bảng, button group */

    /* == Bóng =================================================================
       Board không xuất box-shadow theo tầng (4 giá trị đo được là bóng riêng của
       vùng Chart, không phải thang elevation) — 4 cấp dưới là quy ước UI thông
       thường, KHÔNG phải số liệu từ nguồn. */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .04);
    --shadow-lg: 0 12px 24px -6px rgba(16, 24, 40, .12), 0 4px 8px -4px rgba(16, 24, 40, .06);
    --shadow-xl: 0 24px 48px -12px rgba(16, 24, 40, .22);
    --ring: 0 0 0 3px var(--primary-150);
}

/* -----------------------------------------------------------------------------
 * CHẾ ĐỘ TỐI
 *
 * ĐỔI SO VỚI LƯỢT ÁP TRƯỚC: bản rút gọn `cmc-ui-kit` ghi "dark mode: không có trong
 * kit này", nên bề mặt tối lúc đó phải giữ nguyên bộ xanh-navy cũ của từng app. Bản
 * đầy đủ CÓ thang `dark 0..9` khai riêng cho chế độ tối (README: "Board có sẵn dark
 * theme (dark 0 -> dark 9), nên hệ token nên thiết kế 2 lớp"). Bề mặt tối nay lấy
 * đúng thang đó — trung tính, KHÔNG ngả xanh như bộ cũ.
 *
 * Phần VẪN LÀ SUY RA: board không có thiết kế cho component ở chế độ tối, nên việc
 * primary và 4 màu trạng thái kéo từ bậc 6-7 lên bậc 4 là quy ước tự đặt (bậc 6-7
 * đặt trên nền #1F1F1F không đạt tương phản chữ). Bậc 4 của cả 4 hue đều đạt >7:1.
 * --------------------------------------------------------------------------- */
:root[data-theme="dark"] {
    --color-primary: var(--primary-300);
    --color-primary-hover: var(--primary-200);
    --color-primary-pressed: var(--primary-400);
    --color-primary-subtle: rgba(116, 180, 230, .16);

    --color-bg: var(--c-dark-8);           /* #1F1F1F — nền app */
    --color-bg-subtle: var(--c-dark-9);    /* #141414 — nền trang, sâu nhất */
    --color-surface: var(--c-dark-7);      /* #242424 — card, panel */
    --color-border: var(--c-dark-4);       /* #424242 — viền control */
    --color-border-strong: var(--c-dark-3);/* #696969 */
    --color-divider: var(--c-dark-5);      /* #3B3B3B — đường phân cách */

    --color-text: var(--c-dark-0);         /* #C9C9C9 — ~10:1 trên nền app */
    --color-text-secondary: var(--c-dark-1);
    --color-text-tertiary: var(--c-dark-2);
    --color-text-disabled: var(--c-dark-3);

    --color-danger: var(--error-300);      /* red 4 */
    --color-danger-bg: rgba(255, 135, 135, .14);
    --color-warning: var(--warning-300);   /* orange 4 */
    --color-warning-bg: rgba(255, 169, 77, .14);
    --color-success: var(--success-300);   /* teal 4 */
    --color-success-bg: rgba(56, 217, 169, .14);
    --color-info: var(--info-300);         /* blue 4 */
    --color-info-bg: rgba(77, 171, 247, .14);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .32);
    --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, .40);
    --shadow-lg: 0 12px 24px -6px rgba(0, 0, 0, .50);
    --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, .60);
    --ring: 0 0 0 3px rgba(116, 180, 230, .35);
}