/* light theme as default */
body {
  --bg-color-hightlight-code: #e9e9e9;
  --surface-a: #ffffff;
  --surface-b: #f5f5f5;
  --surface-c: #edf0fa;
  --surface-d: #ebebeb;
  --surface-e: #ffffff;
  --surface-f: #ffffff;
  --text-color: #6c6c6c;
  --text-color-secondary: #898989;
  --primary-color: #5472d4;
  --primary-color-text: #ffffff;
  --font-family: Poppins, sans-serif;
  --surface-0: #ffffff;
  --surface-50: #f1f3f5;
  --surface-100: #e2e6eb;
  --surface-200: #c6cdd7;
  --surface-300: #a9b4c2;
  --surface-400: #8d9bae;
  --surface-500: #70829a;
  --surface-600: #5a687b;
  --surface-700: #434e5c;
  --surface-800: #2d343e;
  --surface-900: #161a1f;
  --gray-50: #f1f3f5;
  --gray-100: #e2e6eb;
  --gray-200: #c6cdd7;
  --gray-300: #a9b4c2;
  --gray-400: #8d9bae;
  --gray-500: #70829a;
  --gray-600: #5a687b;
  --gray-700: #434e5c;
  --gray-800: #2d343e;
  --gray-900: #161a1f;
  --content-padding: 1rem;
  --inline-spacing: 0.5rem;
  --border-radius: 6px;
  --surface-ground: #f5f5f5;
  --surface-section: #ffffff;
  --surface-card: #ffffff;
  --surface-overlay: #ffffff;
  --surface-border: #ebebeb;
  --surface-hover: #edf0fa;
  --focus-ring: 0 0 0 0.1rem #bbc7ee;
  --maskbg: rgba(0, 0, 0, 0.4);
  --highlight-bg: #ced6f1;
  --highlight-text-color: #585858;
  color-scheme: light;
}

body {
  --blue-50: #f6fbfd;
  --blue-100: #d6eaf5;
  --blue-200: #b5d9ed;
  --blue-300: #95c8e4;
  --blue-400: #74b7dc;
  --blue-500: #54a6d4;
  --blue-600: #478db4;
  --blue-700: #3b7494;
  --blue-800: #2e5b75;
  --blue-900: #224255;
  --green-50: #f9fbf4;
  --green-100: #e3eccc;
  --green-200: #cddca4;
  --green-300: #b7cd7c;
  --green-400: #a1bd54;
  --green-500: #8bae2c;
  --green-600: #769425;
  --green-700: #617a1f;
  --green-800: #4c6018;
  --green-900: #384612;
  --yellow-50: #fffdf4;
  --yellow-100: #fff4cc;
  --yellow-200: #ffeba3;
  --yellow-300: #ffe27b;
  --yellow-400: #ffd952;
  --yellow-500: #ffd02a;
  --yellow-600: #d9b124;
  --yellow-700: #b3921d;
  --yellow-800: #8c7217;
  --yellow-900: #665311;
  --cyan-50: #f5fafc;
  --cyan-100: #cfe9f3;
  --cyan-200: #a8d8e9;
  --cyan-300: #82c7df;
  --cyan-400: #5bb5d6;
  --cyan-500: #35a4cc;
  --cyan-600: #2d8bad;
  --cyan-700: #25738f;
  --cyan-800: #1d5a70;
  --cyan-900: #154252;
  --pink-50: #fdf6f8;
  --pink-100: #f5d6dd;
  --pink-200: #edb5c2;
  --pink-300: #e495a8;
  --pink-400: #dc748d;
  --pink-500: #d45472;
  --pink-600: #b44761;
  --pink-700: #943b50;
  --pink-800: #752e3f;
  --pink-900: #55222e;
  --indigo-50: #f6f8fd;
  --indigo-100: #d6ddf5;
  --indigo-200: #b5c2ed;
  --indigo-300: #95a8e4;
  --indigo-400: #748ddc;
  --indigo-500: #5472d4;
  --indigo-600: #4761b4;
  --indigo-700: #3b5094;
  --indigo-800: #2e3f75;
  --indigo-900: #222e55;
  --teal-50: #f5fcfa;
  --teal-100: #d1f0e8;
  --teal-200: #ace3d6;
  --teal-300: #88d7c4;
  --teal-400: #63cbb2;
  --teal-500: #3fbfa0;
  --teal-600: #36a288;
  --teal-700: #2c8670;
  --teal-800: #236958;
  --teal-900: #194c40;
  --orange-50: #fffaf4;
  --orange-100: #ffe5cc;
  --orange-200: #ffd0a3;
  --orange-300: #ffbb7b;
  --orange-400: #ffa752;
  --orange-500: #ff922a;
  --orange-600: #d97c24;
  --orange-700: #b3661d;
  --orange-800: #8c5017;
  --orange-900: #663a11;
  --bluegray-50: #f9fafb;
  --bluegray-100: #e1e5ea;
  --bluegray-200: #c9d0d9;
  --bluegray-300: #b1bbc8;
  --bluegray-400: #99a6b7;
  --bluegray-500: #8191a6;
  --bluegray-600: #6e7b8d;
  --bluegray-700: #5a6674;
  --bluegray-800: #47505b;
  --bluegray-900: #343a42;
  --purple-50: #f8f6fd;
  --purple-100: #ded6f5;
  --purple-200: #c4b5ed;
  --purple-300: #aa95e4;
  --purple-400: #9074dc;
  --purple-500: #7654d4;
  --purple-600: #6447b4;
  --purple-700: #533b94;
  --purple-800: #412e75;
  --purple-900: #2f2255;
  --red-50: #fff7f6;
  --red-100: #ffd8d2;
  --red-200: #ffb9af;
  --red-300: #ff9b8b;
  --red-400: #ff7c68;
  --red-500: #ff5d44;
  --red-600: #d94f3a;
  --red-700: #b34130;
  --red-800: #8c3325;
  --red-900: #66251b;
  --primary-50: #f6f8fd;
  --primary-100: #d6ddf5;
  --primary-200: #b5c2ed;
  --primary-300: #95a8e4;
  --primary-400: #748ddc;
  --primary-500: #5472d4;
  --primary-600: #4761b4;
  --primary-700: #3b5094;
  --primary-800: #2e3f75;
  --primary-900: #222e55;
}

body[data-theme='dark'] {
  --surface-a: #161d21;
  --surface-b: #0e1315;
  --surface-c: rgba(158, 173, 230, 0.08);
  --surface-d: #263238;
  --surface-e: #161d21;
  --surface-f: #161d21;
  --text-color: rgba(255, 255, 255, 0.87);
  --text-color-secondary: rgba(255, 255, 255, 0.6);
  --primary-color: #9eade6;
  --primary-color-text: #121212;
  --font-family: Poppins, sans-serif;
  --surface-0: #0e1315;
  --surface-50: #262b2c;
  --surface-100: #3e4244;
  --surface-200: #565a5b;
  --surface-300: #6e7173;
  --surface-400: #87898a;
  --surface-500: #9fa1a1;
  --surface-600: #b7b8b9;
  --surface-700: #cfd0d0;
  --surface-800: #e7e7e8;
  --surface-900: #ffffff;
  --gray-50: #e7e7e8;
  --gray-100: #cfd0d0;
  --gray-200: #b7b8b9;
  --gray-300: #9fa1a1;
  --gray-400: #87898a;
  --gray-500: #6e7173;
  --gray-600: #565a5b;
  --gray-700: #3e4244;
  --gray-800: #262b2c;
  --gray-900: #0e1315;
  --content-padding: 1rem;
  --inline-spacing: 0.5rem;
  --border-radius: 6px;
  --surface-ground: #0e1315;
  --surface-section: #0e1315;
  --surface-card: #161d21;
  --surface-overlay: #161d21;
  --surface-border: #263238;
  --surface-hover: rgba($primaryColor, 0.08);
  --focus-ring: 0 0 0 1px #9eade6;
  --maskbg: rgba(0, 0, 0, 0.4);
  --highlight-bg: rgba(158, 173, 230, 0.16);
  --highlight-text-color: #9eade6;
  color-scheme: dark;
}

body[data-theme='dark'] {
  --bg-color-hightlight-code: #1e1e1e;
  --blue-50: #f6fbfd;
  --blue-100: #d6eaf5;
  --blue-200: #b5d9ed;
  --blue-300: #95c8e4;
  --blue-400: #74b7dc;
  --blue-500: #54a6d4;
  --blue-600: #478db4;
  --blue-700: #3b7494;
  --blue-800: #2e5b75;
  --blue-900: #224255;
  --green-50: #f9fbf4;
  --green-100: #e3eccc;
  --green-200: #cddca4;
  --green-300: #b7cd7c;
  --green-400: #a1bd54;
  --green-500: #8bae2c;
  --green-600: #769425;
  --green-700: #617a1f;
  --green-800: #4c6018;
  --green-900: #384612;
  --yellow-50: #fffdf4;
  --yellow-100: #fff4cc;
  --yellow-200: #ffeba3;
  --yellow-300: #ffe27b;
  --yellow-400: #ffd952;
  --yellow-500: #ffd02a;
  --yellow-600: #d9b124;
  --yellow-700: #b3921d;
  --yellow-800: #8c7217;
  --yellow-900: #665311;
  --cyan-50: #f5fafc;
  --cyan-100: #cfe9f3;
  --cyan-200: #a8d8e9;
  --cyan-300: #82c7df;
  --cyan-400: #5bb5d6;
  --cyan-500: #35a4cc;
  --cyan-600: #2d8bad;
  --cyan-700: #25738f;
  --cyan-800: #1d5a70;
  --cyan-900: #154252;
  --pink-50: #fdf6f8;
  --pink-100: #f5d6dd;
  --pink-200: #edb5c2;
  --pink-300: #e495a8;
  --pink-400: #dc748d;
  --pink-500: #d45472;
  --pink-600: #b44761;
  --pink-700: #943b50;
  --pink-800: #752e3f;
  --pink-900: #55222e;
  --indigo-50: #f6f8fd;
  --indigo-100: #d6ddf5;
  --indigo-200: #b5c2ed;
  --indigo-300: #95a8e4;
  --indigo-400: #748ddc;
  --indigo-500: #5472d4;
  --indigo-600: #4761b4;
  --indigo-700: #3b5094;
  --indigo-800: #2e3f75;
  --indigo-900: #222e55;
  --teal-50: #f5fcfa;
  --teal-100: #d1f0e8;
  --teal-200: #ace3d6;
  --teal-300: #88d7c4;
  --teal-400: #63cbb2;
  --teal-500: #3fbfa0;
  --teal-600: #36a288;
  --teal-700: #2c8670;
  --teal-800: #236958;
  --teal-900: #194c40;
  --orange-50: #fffaf4;
  --orange-100: #ffe5cc;
  --orange-200: #ffd0a3;
  --orange-300: #ffbb7b;
  --orange-400: #ffa752;
  --orange-500: #ff922a;
  --orange-600: #d97c24;
  --orange-700: #b3661d;
  --orange-800: #8c5017;
  --orange-900: #663a11;
  --bluegray-50: #f9fafb;
  --bluegray-100: #e1e5ea;
  --bluegray-200: #c9d0d9;
  --bluegray-300: #b1bbc8;
  --bluegray-400: #99a6b7;
  --bluegray-500: #8191a6;
  --bluegray-600: #6e7b8d;
  --bluegray-700: #5a6674;
  --bluegray-800: #47505b;
  --bluegray-900: #343a42;
  --purple-50: #f8f6fd;
  --purple-100: #ded6f5;
  --purple-200: #c4b5ed;
  --purple-300: #aa95e4;
  --purple-400: #9074dc;
  --purple-500: #7654d4;
  --purple-600: #6447b4;
  --purple-700: #533b94;
  --purple-800: #412e75;
  --purple-900: #2f2255;
  --red-50: #fff7f6;
  --red-100: #ffd8d2;
  --red-200: #ffb9af;
  --red-300: #ff9b8b;
  --red-400: #ff7c68;
  --red-500: #ff5d44;
  --red-600: #d94f3a;
  --red-700: #b34130;
  --red-800: #8c3325;
  --red-900: #66251b;
  --primary-50: #fafbfe;
  --primary-100: #e8ebf9;
  --primary-200: #d5dcf4;
  --primary-300: #c3ccf0;
  --primary-400: #b0bdeb;
  --primary-500: #9eade6;
  --primary-600: #8693c4;
  --primary-700: #6f79a1;
  --primary-800: #575f7f;
  --primary-900: #3f455c;
}