/* Carbon color palette — packages/colors/src/colors.ts (exact hex values) */
:root {
  --black: #000000;
  --white: #ffffff;
  --white-hover: #e8e8e8;
  --black-hover: #212121;

  /* Gray */
  --gray-10: #f4f4f4;
  --gray-20: #e0e0e0;
  --gray-30: #c6c6c6;
  --gray-40: #a8a8a8;
  --gray-50: #8d8d8d;
  --gray-60: #6f6f6f;
  --gray-70: #525252;
  --gray-80: #393939;
  --gray-90: #262626;
  --gray-100: #161616;
  --gray-10-hover: #e8e8e8;
  --gray-20-hover: #d1d1d1;
  --gray-30-hover: #b5b5b5;
  --gray-40-hover: #999999;
  --gray-50-hover: #7a7a7a;
  --gray-60-hover: #5e5e5e;
  --gray-70-hover: #636363;
  --gray-80-hover: #474747;
  --gray-90-hover: #333333;
  --gray-100-hover: #292929;

  /* Cool Gray */
  --cool-gray-10: #f2f4f8;
  --cool-gray-20: #dde1e6;
  --cool-gray-30: #c1c7cd;
  --cool-gray-40: #a2a9b0;
  --cool-gray-50: #878d96;
  --cool-gray-60: #697077;
  --cool-gray-70: #4d5358;
  --cool-gray-80: #343a3f;
  --cool-gray-90: #21272a;
  --cool-gray-100: #121619;

  /* Warm Gray */
  --warm-gray-10: #f7f3f2;
  --warm-gray-20: #e5e0df;
  --warm-gray-30: #cac5c4;
  --warm-gray-40: #ada8a8;
  --warm-gray-50: #8f8b8b;
  --warm-gray-60: #726e6e;
  --warm-gray-70: #565151;
  --warm-gray-80: #3c3838;
  --warm-gray-90: #272525;
  --warm-gray-100: #171414;

  /* Blue */
  --blue-10: #edf5ff;
  --blue-20: #d0e2ff;
  --blue-30: #a6c8ff;
  --blue-40: #78a9ff;
  --blue-50: #4589ff;
  --blue-60: #0f62fe;
  --blue-70: #0043ce;
  --blue-80: #002d9c;
  --blue-90: #001d6c;
  --blue-100: #001141;
  --blue-60-hover: #0050e6;
  --blue-70-hover: #0053ff;

  /* Cyan */
  --cyan-10: #e5f6ff;
  --cyan-20: #bae6ff;
  --cyan-30: #82cfff;
  --cyan-40: #33b1ff;
  --cyan-50: #1192e8;
  --cyan-60: #0072c3;
  --cyan-70: #00539a;
  --cyan-80: #003a6d;
  --cyan-90: #012749;
  --cyan-100: #061727;

  /* Teal */
  --teal-10: #d9fbfb;
  --teal-20: #9ef0f0;
  --teal-30: #3ddbd9;
  --teal-40: #08bdba;
  --teal-50: #009d9a;
  --teal-60: #007d79;
  --teal-70: #005d5d;
  --teal-80: #004144;
  --teal-90: #022b30;
  --teal-100: #081a1c;

  /* Green */
  --green-10: #defbe6;
  --green-20: #a7f0ba;
  --green-30: #6fdc8c;
  --green-40: #42be65;
  --green-50: #24a148;
  --green-60: #198038;
  --green-70: #0e6027;
  --green-80: #044317;
  --green-90: #022d0d;
  --green-100: #071908;

  /* Yellow */
  --yellow-10: #fcf4d6;
  --yellow-20: #fddc69;
  --yellow-30: #f1c21b;
  --yellow-40: #d2a106;
  --yellow-50: #b28600;
  --yellow-60: #8e6a00;
  --yellow-70: #684e00;
  --yellow-80: #483700;
  --yellow-90: #302400;
  --yellow-100: #1c1500;

  /* Orange */
  --orange-10: #fff2e8;
  --orange-20: #ffd9be;
  --orange-30: #ffb784;
  --orange-40: #ff832b;
  --orange-50: #eb6200;
  --orange-60: #ba4e00;
  --orange-70: #8a3800;
  --orange-80: #5e2900;
  --orange-90: #3e1a00;
  --orange-100: #231000;

  /* Red */
  --red-10: #fff1f1;
  --red-20: #ffd7d9;
  --red-30: #ffb3b8;
  --red-40: #ff8389;
  --red-50: #fa4d56;
  --red-60: #da1e28;
  --red-70: #a2191f;
  --red-80: #750e13;
  --red-90: #520408;
  --red-100: #2d0709;
  --red-60-hover: #b81922;

  /* Magenta */
  --magenta-10: #fff0f7;
  --magenta-20: #ffd6e8;
  --magenta-30: #ffafd2;
  --magenta-40: #ff7eb6;
  --magenta-50: #ee5396;
  --magenta-60: #d02670;
  --magenta-70: #9f1853;
  --magenta-80: #740937;
  --magenta-90: #510224;
  --magenta-100: #2a0a18;

  /* Purple */
  --purple-10: #f6f2ff;
  --purple-20: #e8daff;
  --purple-30: #d4bbff;
  --purple-40: #be95ff;
  --purple-50: #a56eff;
  --purple-60: #8a3ffc;
  --purple-70: #6929c4;
  --purple-80: #491d8b;
  --purple-90: #31135e;
  --purple-100: #1c0f30;
}