/*
 * BoxBMS Design System — màu chủ đạo (FILE SINH TỰ ĐỘNG, KHÔNG SỬA TAY).
 * Nguồn: tools/build-colors.mjs — sửa seed ở đó rồi chạy: node tools/build-colors.mjs
 * Mỗi html[data-color=...] định nghĩa cùng một bộ token; component chỉ dùng token, không dùng mã màu.
 */

:root {
  --ds-brand-seed: #0C66E4;
  --ds-background-brand-bold: #0C66E4;
  --ds-background-brand-bold-hovered: #0056CA;
  --ds-background-brand-bold-pressed: #0048AC;
  --ds-background-brand-subtlest: #EDF4FF;
  --ds-background-brand-subtlest-hovered: #D3E4FF;
  --ds-background-brand-subtlest-pressed: #A7C9FF;
  --ds-background-selected: #EDF4FF;
  --ds-background-selected-hovered: #D3E4FF;
  --ds-background-selected-pressed: #A7C9FF;
  --ds-text-brand: #0C66E4;
  --ds-text-selected: #0C66E4;
  --ds-icon-brand: #0C66E4;
  --ds-icon-selected: #0C66E4;
  --ds-border-brand: #0C66E4;
  --ds-border-selected: #0C66E4;
  --ds-border-focused: #3D88FF;
  --ds-link: #0C66E4;
  --ds-link-pressed: #0048AC;
  --ds-nav-background: #1F6F9F;
  --ds-nav-background-hovered: #025F8E;
  --ds-brand-bold-rgb: 12, 102, 228;
  --ds-brand-100: #EDF4FF;
  --ds-brand-200: #D3E4FF;
  --ds-brand-300: #A7C9FF;
  --ds-brand-400: #76ABFF;
  --ds-brand-500: #5194FF;
  --ds-brand-600: #297CFC;
  --ds-brand-700: #0E67E5;
  --ds-brand-800: #0055C6;
  --ds-brand-900: #0A397F;
  --ds-brand-1000: #0F274B;
}

/* Xanh dương — seed #0C66E4 */
html[data-color="light-blue"] {
  --ds-brand-seed: #0C66E4;
  --ds-background-brand-bold: #0C66E4;
  --ds-background-brand-bold-hovered: #0056CA;
  --ds-background-brand-bold-pressed: #0048AC;
  --ds-background-brand-subtlest: #EDF4FF;
  --ds-background-brand-subtlest-hovered: #D3E4FF;
  --ds-background-brand-subtlest-pressed: #A7C9FF;
  --ds-background-selected: #EDF4FF;
  --ds-background-selected-hovered: #D3E4FF;
  --ds-background-selected-pressed: #A7C9FF;
  --ds-text-brand: #0C66E4;
  --ds-text-selected: #0C66E4;
  --ds-icon-brand: #0C66E4;
  --ds-icon-selected: #0C66E4;
  --ds-border-brand: #0C66E4;
  --ds-border-selected: #0C66E4;
  --ds-border-focused: #3D88FF;
  --ds-link: #0C66E4;
  --ds-link-pressed: #0048AC;
  --ds-nav-background: #1F6F9F;
  --ds-nav-background-hovered: #025F8E;
  --ds-brand-bold-rgb: 12, 102, 228;
  --ds-brand-100: #EDF4FF;
  --ds-brand-200: #D3E4FF;
  --ds-brand-300: #A7C9FF;
  --ds-brand-400: #76ABFF;
  --ds-brand-500: #5194FF;
  --ds-brand-600: #297CFC;
  --ds-brand-700: #0E67E5;
  --ds-brand-800: #0055C6;
  --ds-brand-900: #0A397F;
  --ds-brand-1000: #0F274B;
}

/* Xanh trời — seed #0B7DB5 */
html[data-color="light-sky"] {
  --ds-brand-seed: #0B7DB5;
  --ds-background-brand-bold: #0B7DB5;
  --ds-background-brand-bold-hovered: #006C9F;
  --ds-background-brand-bold-pressed: #005C88;
  --ds-background-brand-subtlest: #E9F5FE;
  --ds-background-brand-subtlest-hovered: #CDE7F9;
  --ds-background-brand-subtlest-pressed: #99CFF4;
  --ds-background-selected: #E9F5FE;
  --ds-background-selected-hovered: #CDE7F9;
  --ds-background-selected-pressed: #99CFF4;
  --ds-text-brand: #0075AC;
  --ds-text-selected: #0075AC;
  --ds-icon-brand: #0B7DB5;
  --ds-icon-selected: #0075AC;
  --ds-border-brand: #0B7DB5;
  --ds-border-selected: #0B7DB5;
  --ds-border-focused: #3B9CD6;
  --ds-link: #0075AC;
  --ds-link-pressed: #005C88;
  --ds-nav-background: #287D99;
  --ds-nav-background-hovered: #0F6D88;
  --ds-brand-bold-rgb: 11, 125, 181;
  --ds-brand-100: #E9F5FE;
  --ds-brand-200: #CDE7F9;
  --ds-brand-300: #99CFF4;
  --ds-brand-400: #66B4E7;
  --ds-brand-500: #45A0D8;
  --ds-brand-600: #278CC5;
  --ds-brand-700: #0078AF;
  --ds-brand-800: #006494;
  --ds-brand-900: #074261;
  --ds-brand-1000: #102A3B;
}

/* Xanh ngọc — seed #0E7C7E */
html[data-color="light-teal"] {
  --ds-brand-seed: #0E7C7E;
  --ds-background-brand-bold: #0E7C7E;
  --ds-background-brand-bold-hovered: #006B6D;
  --ds-background-brand-bold-pressed: #005A5B;
  --ds-background-brand-subtlest: #EBF6F6;
  --ds-background-brand-subtlest-hovered: #D0E9E9;
  --ds-background-brand-subtlest-pressed: #9ED3D3;
  --ds-background-selected: #EBF6F6;
  --ds-background-selected-hovered: #D0E9E9;
  --ds-background-selected-pressed: #9ED3D3;
  --ds-text-brand: #0E7C7E;
  --ds-text-selected: #0E7C7E;
  --ds-icon-brand: #0E7C7E;
  --ds-icon-selected: #0E7C7E;
  --ds-border-brand: #0E7C7E;
  --ds-border-selected: #0E7C7E;
  --ds-border-focused: #3B9A9C;
  --ds-link: #0E7C7E;
  --ds-link-pressed: #005A5B;
  --ds-nav-background: #0F7F82;
  --ds-nav-background-hovered: #006E71;
  --ds-brand-bold-rgb: 14, 124, 126;
  --ds-brand-100: #EBF6F6;
  --ds-brand-200: #D0E9E9;
  --ds-brand-300: #9ED3D3;
  --ds-brand-400: #6EBABB;
  --ds-brand-500: #4FA7A8;
  --ds-brand-600: #339395;
  --ds-brand-700: #168082;
  --ds-brand-800: #006B6D;
  --ds-brand-900: #0F4647;
  --ds-brand-1000: #132C2D;
}

/* Xanh lá — seed #1F845A */
html[data-color="light-green"] {
  --ds-brand-seed: #1F845A;
  --ds-background-brand-bold: #1F845A;
  --ds-background-brand-bold-hovered: #00734B;
  --ds-background-brand-bold-pressed: #00613F;
  --ds-background-brand-subtlest: #EBF7F0;
  --ds-background-brand-subtlest-hovered: #D1EADC;
  --ds-background-brand-subtlest-pressed: #A0D6B8;
  --ds-background-selected: #EBF7F0;
  --ds-background-selected-hovered: #D1EADC;
  --ds-background-selected-pressed: #A0D6B8;
  --ds-text-brand: #187F56;
  --ds-text-selected: #187F56;
  --ds-icon-brand: #1F845A;
  --ds-icon-selected: #187F56;
  --ds-border-brand: #1F845A;
  --ds-border-selected: #1F845A;
  --ds-border-focused: #45A377;
  --ds-link: #187F56;
  --ds-link-pressed: #00613F;
  --ds-nav-background: #00884B;
  --ds-nav-background-hovered: #007640;
  --ds-brand-bold-rgb: 31, 132, 90;
  --ds-brand-100: #EBF7F0;
  --ds-brand-200: #D1EADC;
  --ds-brand-300: #A0D6B8;
  --ds-brand-400: #71BE96;
  --ds-brand-500: #53AB80;
  --ds-brand-600: #38986C;
  --ds-brand-700: #1E845A;
  --ds-brand-800: #096F49;
  --ds-brand-900: #134831;
  --ds-brand-1000: #142E21;
}

/* Xanh cốm — seed #5B7F24 */
html[data-color="light-lime"] {
  --ds-brand-seed: #5B7F24;
  --ds-background-brand-bold: #5B7F24;
  --ds-background-brand-bold-hovered: #4C6F0D;
  --ds-background-brand-bold-pressed: #3E5E00;
  --ds-background-brand-subtlest: #F0F6EA;
  --ds-background-brand-subtlest-hovered: #DBE8CE;
  --ds-background-brand-subtlest-pressed: #B8D29C;
  --ds-background-selected: #F0F6EA;
  --ds-background-selected-hovered: #DBE8CE;
  --ds-background-selected-pressed: #B8D29C;
  --ds-text-brand: #577A1E;
  --ds-text-selected: #577A1E;
  --ds-icon-brand: #5B7F24;
  --ds-icon-selected: #577A1E;
  --ds-border-brand: #5B7F24;
  --ds-border-selected: #5B7F24;
  --ds-border-focused: #789E45;
  --ds-link: #577A1E;
  --ds-link-pressed: #3E5E00;
  --ds-nav-background: #5F7F2F;
  --ds-nav-background-hovered: #506F1D;
  --ds-brand-bold-rgb: 91, 127, 36;
  --ds-brand-100: #F0F6EA;
  --ds-brand-200: #DBE8CE;
  --ds-brand-300: #B8D29C;
  --ds-brand-400: #96B86D;
  --ds-brand-500: #80A551;
  --ds-brand-600: #6C9138;
  --ds-brand-700: #597D22;
  --ds-brand-800: #496A12;
  --ds-brand-900: #304513;
  --ds-brand-1000: #212C13;
}

/* Vàng nghệ — seed #B57400 */
html[data-color="light-yellow"] {
  --ds-brand-seed: #B57400;
  --ds-background-brand-bold: #A56900;
  --ds-background-brand-bold-hovered: #905B00;
  --ds-background-brand-bold-pressed: #7B4E00;
  --ds-background-brand-subtlest: #FCF2E6;
  --ds-background-brand-subtlest-hovered: #F4DFC7;
  --ds-background-brand-subtlest-pressed: #EABF8C;
  --ds-background-selected: #FCF2E6;
  --ds-background-selected-hovered: #F4DFC7;
  --ds-background-selected-pressed: #EABF8C;
  --ds-text-brand: #9C6300;
  --ds-text-selected: #9C6300;
  --ds-icon-brand: #A56900;
  --ds-icon-selected: #9C6300;
  --ds-border-brand: #A56900;
  --ds-border-selected: #A56900;
  --ds-border-focused: #C98626;
  --ds-link: #9C6300;
  --ds-link-pressed: #7B4E00;
  --ds-nav-background: #966F00;
  --ds-nav-background-hovered: #836000;
  --ds-brand-bold-rgb: 165, 105, 0;
  --ds-brand-100: #FCF2E6;
  --ds-brand-200: #F4DFC7;
  --ds-brand-300: #EABF8C;
  --ds-brand-400: #D89E55;
  --ds-brand-500: #C7882F;
  --ds-brand-600: #B47300;
  --ds-brand-700: #9A6200;
  --ds-brand-800: #825200;
  --ds-brand-900: #563500;
  --ds-brand-1000: #36230A;
}

/* Vàng kim — seed #8F7224 */
html[data-color="light-gold"] {
  --ds-brand-seed: #8F7224;
  --ds-background-brand-bold: #8F7224;
  --ds-background-brand-bold-hovered: #7E620C;
  --ds-background-brand-bold-pressed: #6D5300;
  --ds-background-brand-subtlest: #F7F3E9;
  --ds-background-brand-subtlest-hovered: #EBE2CD;
  --ds-background-brand-subtlest-pressed: #D8C699;
  --ds-background-selected: #F7F3E9;
  --ds-background-selected-hovered: #EBE2CD;
  --ds-background-selected-pressed: #D8C699;
  --ds-text-brand: #876B1A;
  --ds-text-selected: #876B1A;
  --ds-icon-brand: #8F7224;
  --ds-icon-selected: #876B1A;
  --ds-border-brand: #8F7224;
  --ds-border-selected: #8F7224;
  --ds-border-focused: #AE9045;
  --ds-link: #876B1A;
  --ds-link-pressed: #6D5300;
  --ds-nav-background: #986F00;
  --ds-nav-background-hovered: #846000;
  --ds-brand-bold-rgb: 143, 114, 36;
  --ds-brand-100: #F7F3E9;
  --ds-brand-200: #EBE2CD;
  --ds-brand-300: #D8C699;
  --ds-brand-400: #C2A86A;
  --ds-brand-500: #B0934C;
  --ds-brand-600: #9D7F33;
  --ds-brand-700: #896C1C;
  --ds-brand-800: #745A0A;
  --ds-brand-900: #4B3B10;
  --ds-brand-1000: #2F2712;
}

/* Nâu — seed #80604A */
html[data-color="light-brown"] {
  --ds-brand-seed: #80604A;
  --ds-background-brand-bold: #80604A;
  --ds-background-brand-bold-hovered: #70513B;
  --ds-background-brand-bold-pressed: #5F422E;
  --ds-background-brand-subtlest: #FAF2EC;
  --ds-background-brand-subtlest-hovered: #ECE0D9;
  --ds-background-brand-subtlest-pressed: #D9C2B3;
  --ds-background-selected: #FAF2EC;
  --ds-background-selected-hovered: #ECE0D9;
  --ds-background-selected-pressed: #D9C2B3;
  --ds-text-brand: #80604A;
  --ds-text-selected: #80604A;
  --ds-icon-brand: #80604A;
  --ds-icon-selected: #80604A;
  --ds-border-brand: #80604A;
  --ds-border-selected: #80604A;
  --ds-border-focused: #9F7D66;
  --ds-link: #80604A;
  --ds-link-pressed: #5F422E;
  --ds-nav-background: #8C734A;
  --ds-nav-background-hovered: #7C633B;
  --ds-brand-bold-rgb: 128, 96, 74;
  --ds-brand-100: #FAF2EC;
  --ds-brand-200: #ECE0D9;
  --ds-brand-300: #D9C2B3;
  --ds-brand-400: #C2A490;
  --ds-brand-500: #B08F79;
  --ds-brand-600: #9D7B64;
  --ds-brand-700: #896852;
  --ds-brand-800: #745642;
  --ds-brand-900: #4B392C;
  --ds-brand-1000: #2F251F;
}

/* Đỏ — seed #C4313F */
html[data-color="light-red"] {
  --ds-brand-seed: #C4313F;
  --ds-background-brand-bold: #C4313F;
  --ds-background-brand-bold-hovered: #B11930;
  --ds-background-brand-bold-pressed: #9A0323;
  --ds-background-brand-subtlest: #FFEFEE;
  --ds-background-brand-subtlest-hovered: #FFD8D7;
  --ds-background-brand-subtlest-pressed: #FFAFAD;
  --ds-background-selected: #FFEFEE;
  --ds-background-selected-hovered: #FFD8D7;
  --ds-background-selected-pressed: #FFAFAD;
  --ds-text-brand: #C4313F;
  --ds-text-selected: #C4313F;
  --ds-icon-brand: #C4313F;
  --ds-icon-selected: #C4313F;
  --ds-border-brand: #C4313F;
  --ds-border-selected: #C4313F;
  --ds-border-focused: #E8545C;
  --ds-link: #C4313F;
  --ds-link-pressed: #9A0323;
  --ds-nav-background: #791F3D;
  --ds-nav-background-hovered: #670B2F;
  --ds-brand-bold-rgb: 196, 49, 63;
  --ds-brand-100: #FFEFEE;
  --ds-brand-200: #FFD8D7;
  --ds-brand-300: #FFAFAD;
  --ds-brand-400: #FE7E7F;
  --ds-brand-500: #EF6166;
  --ds-brand-600: #DB4851;
  --ds-brand-700: #C4313F;
  --ds-brand-800: #A91F30;
  --ds-brand-900: #6C1C22;
  --ds-brand-1000: #421819;
}

/* Hồng — seed #C2437E */
html[data-color="light-pink"] {
  --ds-brand-seed: #C2437E;
  --ds-background-brand-bold: #C2437E;
  --ds-background-brand-bold-hovered: #AF316E;
  --ds-background-brand-bold-pressed: #9A225E;
  --ds-background-brand-subtlest: #FFEEF4;
  --ds-background-brand-subtlest-hovered: #FFD6E4;
  --ds-background-brand-subtlest-pressed: #FFAACB;
  --ds-background-selected: #FFEEF4;
  --ds-background-selected-hovered: #FFD6E4;
  --ds-background-selected-pressed: #FFAACB;
  --ds-text-brand: #BD3E7A;
  --ds-text-selected: #BD3E7A;
  --ds-icon-brand: #C2437E;
  --ds-icon-selected: #BD3E7A;
  --ds-border-brand: #C2437E;
  --ds-border-selected: #C2437E;
  --ds-border-focused: #E5639C;
  --ds-link: #BD3E7A;
  --ds-link-pressed: #9A225E;
  --ds-nav-background: #B65779;
  --ds-nav-background-hovered: #A44769;
  --ds-brand-bold-rgb: 194, 67, 126;
  --ds-brand-100: #FFEEF4;
  --ds-brand-200: #FFD6E4;
  --ds-brand-300: #FFAACB;
  --ds-brand-400: #F280AF;
  --ds-brand-500: #E2659C;
  --ds-brand-600: #CE4E88;
  --ds-brand-700: #B73975;
  --ds-brand-800: #9E2862;
  --ds-brand-900: #651F40;
  --ds-brand-1000: #3E1929;
}

/* Tím — seed #6E5DC6 */
html[data-color="light-purple"] {
  --ds-brand-seed: #6E5DC6;
  --ds-background-brand-bold: #6E5DC6;
  --ds-background-brand-bold-hovered: #5F4CB4;
  --ds-background-brand-bold-pressed: #503E9E;
  --ds-background-brand-subtlest: #F2F2FF;
  --ds-background-brand-subtlest-hovered: #E1DFFF;
  --ds-background-brand-subtlest-pressed: #C3BFFF;
  --ds-background-selected: #F2F2FF;
  --ds-background-selected-hovered: #E1DFFF;
  --ds-background-selected-pressed: #C3BFFF;
  --ds-text-brand: #6E5DC6;
  --ds-text-selected: #6E5DC6;
  --ds-icon-brand: #6E5DC6;
  --ds-icon-selected: #6E5DC6;
  --ds-border-brand: #6E5DC6;
  --ds-border-selected: #6E5DC6;
  --ds-border-focused: #8B7CE8;
  --ds-link: #6E5DC6;
  --ds-link-pressed: #503E9E;
  --ds-nav-background: #76559A;
  --ds-nav-background-hovered: #664589;
  --ds-brand-bold-rgb: 110, 93, 198;
  --ds-brand-100: #F2F2FF;
  --ds-brand-200: #E1DFFF;
  --ds-brand-300: #C3BFFF;
  --ds-brand-400: #A69CFB;
  --ds-brand-500: #9385EE;
  --ds-brand-600: #8070DB;
  --ds-brand-700: #6D5CC5;
  --ds-brand-800: #5B4BAB;
  --ds-brand-900: #3B326D;
  --ds-brand-1000: #262342;
}

/* Than chì — seed #3D4A5C */
html[data-color="light-black"] {
  --ds-brand-seed: #3D4A5C;
  --ds-background-brand-bold: #3D4A5C;
  --ds-background-brand-bold-hovered: #2F3B4D;
  --ds-background-brand-bold-pressed: #222D3D;
  --ds-background-brand-subtlest: #EEF4FC;
  --ds-background-brand-subtlest-hovered: #DEE3EB;
  --ds-background-brand-subtlest-pressed: #BFC8D6;
  --ds-background-selected: #EEF4FC;
  --ds-background-selected-hovered: #DEE3EB;
  --ds-background-selected-pressed: #BFC8D6;
  --ds-text-brand: #3D4A5C;
  --ds-text-selected: #3D4A5C;
  --ds-icon-brand: #3D4A5C;
  --ds-icon-selected: #3D4A5C;
  --ds-border-brand: #3D4A5C;
  --ds-border-selected: #3D4A5C;
  --ds-border-focused: #586679;
  --ds-link: #3D4A5C;
  --ds-link-pressed: #222D3D;
  --ds-nav-background: #37474F;
  --ds-nav-background-hovered: #293940;
  --ds-brand-bold-rgb: 61, 74, 92;
  --ds-brand-100: #EEF4FC;
  --ds-brand-200: #DEE3EB;
  --ds-brand-300: #BFC8D6;
  --ds-brand-400: #9FACBE;
  --ds-brand-500: #8A98AC;
  --ds-brand-600: #768498;
  --ds-brand-700: #637185;
  --ds-brand-800: #525F70;
  --ds-brand-900: #363E49;
  --ds-brand-1000: #24282E;
}