:root {
  /* default theme will be blue */
  --jv-theme-core: var(--blue-indicator);
  --jv-theme-100: var(--blue-1);
  --jv-theme-150: var(--blue-2);
  --jv-theme-200: var(--blue-3);
  --jv-theme-300: var(--blue-4);
  --jv-theme-400: var(--blue-5);
  --jv-theme-500: var(--blue-6);
  --jv-theme-600: var(--blue-7);
  --jv-theme-700: var(--blue-8);
  --jv-theme-750: var(--blue-9);
  --jv-theme-800: var(--blue-10);
  --jv-theme-850: var(--blue-11);
  --jv-theme-900: var(--blue-12);

  --blue-1: #f3f7fa;
  --blue-2: #ecf2f8;
  --blue-3: #ddedf9;
  --blue-4: #cde6f8;
  --blue-5: #bcdcf3;
  --blue-6: #a7cfeb;
  --blue-7: #8dbde1;
  --blue-8: #6ba6cf;
  --blue-9: #284b63;
  --blue-10: #215d83;
  --blue-11: #2e698f;
  --blue-12: #1b3e56;

  --blue-a1: #d6eeff2b;
  --blue-a2: #0d7ae70e;
  --blue-a3: #0390fa1d;
  --blue-a4: #0690f42e;
  --blue-a5: #0384e13f;
  --blue-a6: #017acf54;
  --blue-a7: #016fc26f;
  --blue-a8: #0169b092;
  --blue-a9: #012b47d7;
  --blue-a10: #014672de;
  --blue-a11: #004877d0;
  --blue-a12: #012843e4;

  --blue-contrast: #fff;
  --blue-surface: #e9f0f8cc;
  --blue-indicator: #284b63;
  --blue-track: #284b63;

  @supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
      --blue-1: oklch(97.4% 0.0054 240.3);
      --blue-2: oklch(95.9% 0.01 240.3);
      --blue-3: oklch(93.8% 0.024 240.3);
      --blue-4: oklch(91.2% 0.0358 240.3);
      --blue-5: oklch(87.8% 0.0468 240.3);
      --blue-6: oklch(83.5% 0.058 240.3);
      --blue-7: oklch(77.8% 0.0721 240.3);
      --blue-8: oklch(70.1% 0.0863 240.3);
      --blue-9: oklch(39.7% 0.0576 240.3);
      --blue-10: oklch(45.8% 0.0863 240.3);
      --blue-11: oklch(49.8% 0.0863 240.3);
      --blue-12: oklch(35.1% 0.0576 240.3);

      --blue-a1: color(display-p3 0.8627 0.9333 1 / 0.167);
      --blue-a2: color(display-p3 0.0196 0.4196 0.8196 / 0.049);
      --blue-a3: color(display-p3 0.0078 0.4745 0.9412 / 0.101);
      --blue-a4: color(display-p3 0.0039 0.4784 0.902 / 0.157);
      --blue-a5: color(display-p3 0.0039 0.4471 0.8353 / 0.221);
      --blue-a6: color(display-p3 0.0039 0.4118 0.7529 / 0.298);
      --blue-a7: color(display-p3 0.0039 0.3725 0.7098 / 0.394);
      --blue-a8: color(display-p3 0 0.3333 0.6275 / 0.519);
      --blue-a9: color(display-p3 0 0.1255 0.2392 / 0.808);
      --blue-a10: color(display-p3 0 0.2078 0.3843 / 0.8);
      --blue-a11: color(display-p3 0 0.2196 0.4078 / 0.752);
      --blue-a12: color(display-p3 0 0.1137 0.2196 / 0.856);

      --blue-contrast: #fff;
      --blue-surface: color(display-p3 0.9176 0.9412 0.9647 / 0.8);
      --blue-indicator: oklch(39.7% 0.0576 240.3);
      --blue-track: oklch(39.7% 0.0576 240.3);
    }
  }

  /* #region blue */
  --jv-blue-core: #0d6efd;
  --jv-blue-100: hsl(216, 50%, 91%);
  --jv-blue-150: hsl(216, 50%, 86%);
  --jv-blue-200: hsl(216, 50%, 81%);
  --jv-blue-300: hsl(216, 50%, 71%);
  --jv-blue-400: hsl(216, 50%, 61%);
  --jv-blue-500: hsl(216, 50%, 51%);
  --jv-blue-600: hsl(216, 50%, 41%);
  --jv-blue-700: hsl(216, 50%, 31%);
  --jv-blue-800: hsl(216, 50%, 21%);
  --jv-blue-850: hsl(216, 50%, 16%);
  --jv-blue-900: hsl(216, 50%, 11%);
  /* #endregion blue */

  /* #region indigo */
  --jv-indigo-core: #6610f2;
  --jv-indigo-100: hsl(263, 88%, 90%);
  --jv-indigo-150: hsl(263, 88%, 85%);
  --jv-indigo-200: hsl(263, 88%, 80%);
  --jv-indigo-300: hsl(263, 88%, 70%);
  --jv-indigo-400: hsl(263, 88%, 60%);
  --jv-indigo-500: hsl(263, 88%, 50%);
  --jv-indigo-600: hsl(263, 88%, 40%);
  --jv-indigo-700: hsl(263, 88%, 30%);
  --jv-indigo-800: hsl(263, 88%, 20%);
  --jv-indigo-850: hsl(263, 88%, 15%);
  --jv-indigo-900: hsl(263, 88%, 10%);
  /* #endregion indigo */

  /* #region purple */
  --jv-purple-core: #6f42c1;
  --jv-purple-100: hsl(261, 52%, 90%);
  --jv-purple-150: hsl(261, 52%, 85%);
  --jv-purple-200: hsl(261, 52%, 80%);
  --jv-purple-300: hsl(261, 52%, 70%);
  --jv-purple-400: hsl(261, 52%, 60%);
  --jv-purple-500: hsl(261, 52%, 50%);
  --jv-purple-600: hsl(261, 52%, 40%);
  --jv-purple-700: hsl(261, 52%, 30%);
  --jv-purple-800: hsl(261, 52%, 20%);
  --jv-purple-850: hsl(261, 52%, 15%);
  --jv-purple-900: hsl(261, 52%, 10%);
  /* #endregion purple */

  /* #region pink */
  --jv-pink-core: #d63384;
  --jv-pink-100: hsl(331, 47%, 90%);
  --jv-pink-150: hsl(331, 47%, 85%);
  --jv-pink-200: hsl(331, 47%, 80%);
  --jv-pink-300: hsl(331, 47%, 70%);
  --jv-pink-400: hsl(331, 47%, 60%);
  --jv-pink-500: hsl(331, 47%, 50%);
  --jv-pink-600: hsl(331, 47%, 40%);
  --jv-pink-700: hsl(331, 47%, 30%);
  --jv-pink-800: hsl(331, 47%, 20%);
  --jv-pink-850: hsl(331, 47%, 15%);
  --jv-pink-900: hsl(331, 47%, 10%);
  /* #endregion pink */

  /* #region red */
  --jv-red-core: #dc3545;
  --jv-red-100: hsl(355, 70%, 91%);
  --jv-red-150: hsl(355, 70%, 86%);
  --jv-red-200: hsl(355, 70%, 81%);
  --jv-red-300: hsl(355, 70%, 71%);
  --jv-red-400: hsl(355, 70%, 61%);
  --jv-red-500: hsl(355, 70%, 51%);
  --jv-red-600: hsl(355, 70%, 41%);
  --jv-red-700: hsl(355, 70%, 31%);
  --jv-red-800: hsl(355, 70%, 21%);
  --jv-red-850: hsl(355, 70%, 16%);
  --jv-red-900: hsl(355, 70%, 11%);
  /* #endregion red */

  /* #region orange */
  --jv-orange-core: #fd7e14;
  --jv-orange-100: hsl(19, 50%, 91%);
  --jv-orange-150: hsl(19, 50%, 86%);
  --jv-orange-200: hsl(19, 50%, 81%);
  --jv-orange-300: hsl(19, 50%, 71%);
  --jv-orange-400: hsl(19, 50%, 61%);
  --jv-orange-500: hsl(19, 50%, 51%);
  --jv-orange-600: hsl(19, 50%, 41%);
  --jv-orange-700: hsl(19, 50%, 31%);
  --jv-orange-800: hsl(19, 50%, 21%);
  --jv-orange-850: hsl(19, 50%, 16%);
  --jv-orange-900: hsl(19, 50%, 11%);
  /* #endregion orange */

  /* #region yellow */
  --jv-yellow-core: #ffc107;
  --jv-yellow-100: hsl(46, 70%, 90%);
  --jv-yellow-150: hsl(46, 70%, 85%);
  --jv-yellow-200: hsl(46, 70%, 80%);
  --jv-yellow-300: hsl(46, 70%, 70%);
  --jv-yellow-400: hsl(46, 70%, 60%);
  --jv-yellow-500: hsl(46, 70%, 50%);
  --jv-yellow-600: hsl(46, 70%, 40%);
  --jv-yellow-700: hsl(46, 70%, 30%);
  --jv-yellow-800: hsl(46, 70%, 20%);
  --jv-yellow-850: hsl(46, 70%, 15%);
  --jv-yellow-900: hsl(46, 70%, 10%);
  /* #endregion yellow */

  /* #region green */
  --jv-green-core: #198754;
  --jv-green-100: hsl(152, 38%, 95%);
  --jv-green-150: hsl(152, 38%, 90%);
  --jv-green-200: hsl(152, 38%, 85%);
  --jv-green-300: hsl(152, 38%, 75%);
  --jv-green-400: hsl(152, 38%, 65%);
  --jv-green-500: hsl(152, 38%, 55%);
  --jv-green-600: hsl(152, 38%, 45%);
  --jv-green-700: hsl(152, 38%, 35%);
  --jv-green-800: hsl(152, 38%, 25%);
  --jv-green-850: hsl(152, 38%, 20%);
  --jv-green-900: hsl(152, 38%, 15%);
  /* #endregion green */

  /* #region teal */
  --jv-teal-core: #20c997;
  --jv-teal-100: hsl(162, 60%, 89%);
  --jv-teal-150: hsl(162, 60%, 84%);
  --jv-teal-200: hsl(162, 60%, 79%);
  --jv-teal-300: hsl(162, 60%, 69%);
  --jv-teal-400: hsl(162, 60%, 59%);
  --jv-teal-500: hsl(162, 60%, 49%);
  --jv-teal-600: hsl(162, 60%, 39%);
  --jv-teal-700: hsl(162, 60%, 29%);
  --jv-teal-800: hsl(162, 60%, 19%);
  --jv-teal-850: hsl(162, 60%, 14%);
  --jv-teal-900: hsl(162, 60%, 9%);
  /* #endregion teal */

  /* #region cyan */
  --jv-cyan-core: #0dcaf0;
  --jv-cyan-100: hsl(191, 60%, 90%);
  --jv-cyan-150: hsl(191, 60%, 85%);
  --jv-cyan-200: hsl(191, 60%, 80%);
  --jv-cyan-300: hsl(191, 60%, 70%);
  --jv-cyan-400: hsl(191, 60%, 60%);
  --jv-cyan-500: hsl(191, 60%, 50%);
  --jv-cyan-600: hsl(191, 60%, 40%);
  --jv-cyan-700: hsl(191, 60%, 30%);
  --jv-cyan-800: hsl(191, 60%, 20%);
  --jv-cyan-850: hsl(191, 60%, 15%);
  --jv-cyan-900: hsl(191, 60%, 10%);
  /* #endregion cyan */

  /* #region gray */
  --jv-gray-core: #adb5bd;
  --jv-gray-100: hsl(210, 17%, 98%);
  --jv-gray-150: hsl(210, 17%, 93%);
  --jv-gray-200: hsl(210, 17%, 88%);
  --jv-gray-300: hsl(210, 17%, 78%);
  --jv-gray-400: hsl(210, 17%, 68%);
  --jv-gray-500: hsl(210, 17%, 58%);
  --jv-gray-600: hsl(210, 17%, 48%);
  --jv-gray-700: hsl(210, 17%, 38%);
  --jv-gray-800: hsl(210, 17%, 28%);
  --jv-gray-850: hsl(210, 17%, 23%);
  --jv-gray-900: hsl(210, 17%, 18%);
  /* #endregion gray */
}

[data-jv-theme='blue'] {
  --jv-theme-core: var(--jv-blue-core);
  --jv-theme-100: var(--jv-blue-100);
  --jv-theme-150: var(--jv-blue-150);
  --jv-theme-200: var(--jv-blue-200);
  --jv-theme-300: var(--jv-blue-300);
  --jv-theme-400: var(--jv-blue-400);
  --jv-theme-500: var(--jv-blue-500);
  --jv-theme-600: var(--jv-blue-600);
  --jv-theme-700: var(--jv-blue-700);
  --jv-theme-800: var(--jv-blue-800);
  --jv-theme-850: var(--jv-blue-850);
  --jv-theme-900: var(--jv-blue-900);
}

[data-jv-theme='indigo'] {
  --jv-theme-core: var(--jv-indigo-core);
  --jv-theme-100: var(--jv-indigo-100);
  --jv-theme-150: var(--jv-indigo-150);
  --jv-theme-200: var(--jv-indigo-200);
  --jv-theme-300: var(--jv-indigo-300);
  --jv-theme-400: var(--jv-indigo-400);
  --jv-theme-500: var(--jv-indigo-500);
  --jv-theme-600: var(--jv-indigo-600);
  --jv-theme-700: var(--jv-indigo-700);
  --jv-theme-800: var(--jv-indigo-800);
  --jv-theme-850: var(--jv-indigo-850);
  --jv-theme-900: var(--jv-indigo-900);
}

[data-jv-theme='purple'] {
  --jv-theme-core: var(--jv-purple-core);
  --jv-theme-100: var(--jv-purple-100);
  --jv-theme-150: var(--jv-purple-150);
  --jv-theme-200: var(--jv-purple-200);
  --jv-theme-300: var(--jv-purple-300);
  --jv-theme-400: var(--jv-purple-400);
  --jv-theme-500: var(--jv-purple-500);
  --jv-theme-600: var(--jv-purple-600);
  --jv-theme-700: var(--jv-purple-700);
  --jv-theme-800: var(--jv-purple-800);
  --jv-theme-850: var(--jv-purple-850);
  --jv-theme-900: var(--jv-purple-900);
}

[data-jv-theme='pink'] {
  --jv-theme-core: var(--jv-pink-core);
  --jv-theme-100: var(--jv-pink-100);
  --jv-theme-150: var(--jv-pink-150);
  --jv-theme-200: var(--jv-pink-200);
  --jv-theme-300: var(--jv-pink-300);
  --jv-theme-400: var(--jv-pink-400);
  --jv-theme-500: var(--jv-pink-500);
  --jv-theme-600: var(--jv-pink-600);
  --jv-theme-700: var(--jv-pink-700);
  --jv-theme-800: var(--jv-pink-800);
  --jv-theme-850: var(--jv-pink-850);
  --jv-theme-900: var(--jv-pink-900);
}

[data-jv-theme='red'] {
  --jv-theme-core: var(--jv-red-core);
  --jv-theme-100: var(--jv-red-100);
  --jv-theme-150: var(--jv-red-150);
  --jv-theme-200: var(--jv-red-200);
  --jv-theme-300: var(--jv-red-300);
  --jv-theme-400: var(--jv-red-400);
  --jv-theme-500: var(--jv-red-500);
  --jv-theme-600: var(--jv-red-600);
  --jv-theme-700: var(--jv-red-700);
  --jv-theme-800: var(--jv-red-800);
  --jv-theme-850: var(--jv-red-850);
  --jv-theme-900: var(--jv-red-900);
}

[data-jv-theme='orange'] {
  --jv-theme-core: var(--jv-orange-core);
  --jv-theme-100: var(--jv-orange-100);
  --jv-theme-150: var(--jv-orange-150);
  --jv-theme-200: var(--jv-orange-200);
  --jv-theme-300: var(--jv-orange-300);
  --jv-theme-400: var(--jv-orange-400);
  --jv-theme-500: var(--jv-orange-500);
  --jv-theme-600: var(--jv-orange-600);
  --jv-theme-700: var(--jv-orange-700);
  --jv-theme-800: var(--jv-orange-800);
  --jv-theme-850: var(--jv-orange-850);
  --jv-theme-900: var(--jv-orange-900);
}

[data-jv-theme='yellow'] {
  --jv-theme-core: var(--jv-yellow-core);
  --jv-theme-100: var(--jv-yellow-100);
  --jv-theme-150: var(--jv-yellow-150);
  --jv-theme-200: var(--jv-yellow-200);
  --jv-theme-300: var(--jv-yellow-300);
  --jv-theme-400: var(--jv-yellow-400);
  --jv-theme-500: var(--jv-yellow-500);
  --jv-theme-600: var(--jv-yellow-600);
  --jv-theme-700: var(--jv-yellow-700);
  --jv-theme-800: var(--jv-yellow-800);
  --jv-theme-850: var(--jv-yellow-850);
  --jv-theme-900: var(--jv-yellow-900);
}

[data-jv-theme='green'] {
  --jv-theme-core: #198754;
  --jv-theme-100: hsl(152, 38%, 95%);
  --jv-theme-150: hsl(152, 38%, 90%);
  --jv-theme-200: hsl(152, 38%, 85%);
  --jv-theme-300: hsl(152, 38%, 75%);
  --jv-theme-400: hsl(152, 38%, 65%);
  --jv-theme-500: hsl(152, 38%, 55%);
  --jv-theme-600: hsl(152, 38%, 45%);
  --jv-theme-700: hsl(152, 38%, 35%);
  --jv-theme-800: hsl(152, 38%, 25%);
  --jv-theme-850: hsl(152, 38%, 20%);
  --jv-theme-900: hsl(152, 38%, 15%);
}

[data-jv-theme='teal'] {
  --jv-theme-core: var(--jv-teal-core);
  --jv-theme-100: var(--jv-teal-100);
  --jv-theme-150: var(--jv-teal-150);
  --jv-theme-200: var(--jv-teal-200);
  --jv-theme-300: var(--jv-teal-300);
  --jv-theme-400: var(--jv-teal-400);
  --jv-theme-500: var(--jv-teal-500);
  --jv-theme-600: var(--jv-teal-600);
  --jv-theme-700: var(--jv-teal-700);
  --jv-theme-800: var(--jv-teal-800);
  --jv-theme-850: var(--jv-teal-850);
  --jv-theme-900: var(--jv-teal-900);
}

[data-jv-theme='cyan'] {
  --jv-theme-core: var(--jv-cyan-core);
  --jv-theme-100: var(--jv-cyan-100);
  --jv-theme-150: var(--jv-cyan-150);
  --jv-theme-200: var(--jv-cyan-200);
  --jv-theme-300: var(--jv-cyan-300);
  --jv-theme-400: var(--jv-cyan-400);
  --jv-theme-500: var(--jv-cyan-500);
  --jv-theme-600: var(--jv-cyan-600);
  --jv-theme-700: var(--jv-cyan-700);
  --jv-theme-800: var(--jv-cyan-800);
  --jv-theme-850: var(--jv-cyan-850);
  --jv-theme-900: var(--jv-cyan-900);
}

[data-jv-theme='gray'] {
  --jv-theme-core: var(--jv-gray-core);
  --jv-theme-100: var(--jv-gray-100);
  --jv-theme-150: var(--jv-gray-150);
  --jv-theme-200: var(--jv-gray-200);
  --jv-theme-300: var(--jv-gray-300);
  --jv-theme-400: var(--jv-gray-400);
  --jv-theme-500: var(--jv-gray-500);
  --jv-theme-600: var(--jv-gray-600);
  --jv-theme-700: var(--jv-gray-700);
  --jv-theme-800: var(--jv-gray-800);
  --jv-theme-850: var(--jv-gray-850);
  --jv-theme-900: var(--jv-gray-900);
}