@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-primary-50: #faf0e7;
  --color-primary-100: #f5e2cf;
  --color-primary-200: #eed4b7;
  --color-primary-300: #e3c9ac;
  --color-primary-400: #e8c6a0;
  --color-primary-500: #e0b889;
  --color-primary-600: #d8aa72;
  --color-primary-700: #b18b5e;
  --color-primary-800: #8b6e4c;
  --color-primary-900: #33281d;
  --color-primary-950: #241c14;

  --color-secondary-100: #f1f5e9;
  --color-secondary-200: #dbe7d1;
  --color-secondary-300: #c2d4b2;
  --color-secondary-400: #a8c194;
  --color-secondary-500: #8eae75;
  --color-secondary-600: #738c5e;
  --color-secondary-700: #5a6f4b;
  --color-secondary-800: #44553a;
  --color-secondary-900: #2d3a27;

  --color-dark-100: #fafafa;
  --color-dark-200: #faf2f2;
  --color-dark-300: #969696;
  --color-dark-400: #757575;
  --color-dark-500: #606060;
  --color-dark-600: #2b2b2b;
  --color-dark-700: #1f1f1f;
  --color-dark-800: #191919;
  --color-dark-900: #151515;

  --color-success-100: #e9f6ec;
  --color-success-200: #cdebd5;
  --color-success-300: #9fd5ae;
  --color-success-400: #68ba84;
  --color-success-500: #4ba36a;
  --color-success-600: #3d8656;
  --color-success-700: #2f6842;
  --color-success-800: #234e32;
  --color-success-900: #163622;

  --color-warning-100: #fff8e7;
  --color-warning-200: #ffecb8;
  --color-warning-300: #ffd98a;
  --color-warning-400: #ffc158;
  --color-warning-500: #ffa726;
  --color-warning-600: #e98d0f;
  --color-warning-700: #ba6f0a;
  --color-warning-800: #8b5207;
  --color-warning-900: #5c3504;

  --color-error-100: #fdecea;
  --color-error-200: #f9c9c3;
  --color-error-300: #f29a90;
  --color-error-400: #e56b60;
  --color-error-500: #d94d44;
  --color-error-600: #bb3e36;
  --color-error-700: #9b322c;
  --color-error-800: #7c2823;
  --color-error-900: #511a17;

  --color-info-100: #f1f4f7;
  --color-info-200: #d9e1ea;
  --color-info-300: #b3c4d5;
  --color-info-400: #8da7c0;
  --color-info-500: #688bad;
  --color-info-600: #547092;
  --color-info-700: #425876;
  --color-info-800: #32445a;
  --color-info-900: #222f3e;

  --color-gray-50: #f5f5f5;
  --color-gray-100: #efefef;
  --color-gray-200: #dfdfdf;
  --color-gray-300: #979797;
  --color-gray-400: #888888;
  --color-gray-500: #797979;
  --color-gray-600: #717171;
  --color-gray-700: #5b5b5b;
  --color-gray-800: #444444;
  --color-gray-900: #353535;

  --color-gray1-50: #eaeaea;
  --color-gray1-100: #dfdfdf;
  --color-gray1-200: #bdbdbd;
  --color-gray1-300: #2a2a2a;
  --color-gray1-400: #262626;
  --color-gray1-500: #222222;
  --color-gray1-600: #202020;
  --color-gray1-700: #191919;
  --color-gray1-800: #131313;
  --color-gray1-900: #0f0f0f;

  --color-gray2-50: #f4f4f4;
  --color-gray2-100: #eeeeee;
  --color-gray2-200: #dcdcdc;
  --color-gray2-300: #8f8f8f;
  --color-gray2-400: #818181;
  --color-gray2-500: #727272;
  --color-gray2-600: #6b6b6b;
  --color-gray2-700: #565656;
  --color-gray2-800: #404040;
  --color-gray2-900: #323232;

  --color-white1-100: #fdfdfd;
  --color-white1-100: #fcfcfc;
  --color-white1-200: #fafafa;
  --color-white1-300: #eeeeee;
  --color-white1-400: #d6d6d6;
  --color-white1-500: #bebebe;
  --color-white1-600: #b3b3b3;
  --color-white1-700: #8f8f8f;
  --color-white1-800: #6b6b6b;
  --color-white1-900: #535353;

  --color-white2-100: #fefefe;
  --color-white2-200: #fdfdfd;
  --color-white2-300: #f9f9f9;
  --color-white2-400: #e0e0e0;
  --color-white2-500: #c7c7c7;
  --color-white2-600: #bbbbbb;
  --color-white2-700: #959595;
  --color-white2-800: #707070;
  --color-white2-900: #575757;

  --color-black-50: #e6e6e6;
  --color-black-100: #d9d9d9;
  --color-black-200: #b0b0b0;
  --color-black-300: #000000;
}

/* Modern scrollbar styles */
.modern-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.modern-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.modern-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.modern-scrollbar::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 3px;
  transition: background-color 0.2s ease;
}

.modern-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

.dark .modern-scrollbar {
  scrollbar-color: #4b5563 transparent;
}

.dark .modern-scrollbar::-webkit-scrollbar-thumb {
  background-color: #4b5563;
}

.dark .modern-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #6b7280;
}
