/*----------------------------------------*/
/* LIGHT MODE */
/*----------------------------------------*/

.light-mode {
  /* backgrounds */
  --scalar-background-1: oklch(97.4% 0.006 75.4); /* sand-light */
  --scalar-background-2: oklch(96% 0.011 76.6); /* sand-main */
  --scalar-background-3: oklch(92.1% 0.01 72.7); /* sand-dark */

  /* highlighted background */
  --scalar-background-accent: color-mix(
    in oklab,
    oklch(80.5% 0.122 49), /* primary-300 */
    transparent 90%
  );

  /* typography */
  --scalar-color-1: oklch(21% 0.03 265); /* gray-900 */
  --scalar-color-2: oklch(44.6% 0.03 257); /* gray-600 */
  --scalar-color-3: oklch(55.1% 0.02 264); /* gray-500 */

  /* accent = primary scale */
  --scalar-color-accent: oklch(70.8% 0.14 48.2); /* primary-500 */

  /* borders */
  --scalar-border-color: oklch(92.8% 0.01 265); /* gray-200 */
}


/*----------------------------------------*/
/* DARK MODE */
/*----------------------------------------*/

.dark-mode {
  --scalar-background-1: oklch(21% 0.03 265); /* gray-900 */
  --scalar-background-2: oklch(27.8% 0.03 257); /* gray-800 */
  --scalar-background-3: oklch(37.3% 0.03 260); /* gray-700 */

  --scalar-background-accent: color-mix(
    in oklab,
    oklch(80.5% 0.122 49), /* primary-300 */
    transparent 85%
  );

  --scalar-color-1: oklch(98.5% 0 248); /* gray-50 */
  --scalar-color-2: oklch(87.2% 0.01 258); /* gray-300 */
  --scalar-color-3: oklch(71.4% 0.02 261); /* gray-400 */

  --scalar-color-accent: oklch(80.5% 0.122 49); /* primary-300 */

  --scalar-border-color: oklch(37.3% 0.03 260); /* gray-700 */
}

/*----------------------------------------*/
/* Light semantic */
/*----------------------------------------*/

.light-mode {
  --scalar-color-green: oklch(69.6% 0.15 162); /* green-500 */
  --scalar-color-red: oklch(63.7% 0.21 25.3); /* red-500 */
  --scalar-color-yellow: oklch(83.7% 0.16 84.4); /* orange-400 */
  --scalar-color-blue: oklch(62.3% 0.19 260); /* blue-500 */
  --scalar-color-orange: oklch(66.6% 0.16 58.3); /* orange-600 */
  --scalar-color-purple: oklch(30.8% 0.082 300.8); /* secondary-500 */

  --scalar-link-color: oklch(70.8% 0.14 48.2); /* primary-500 */
  --scalar-link-color-hover: oklch(64.7% 0.128 48.3); /* primary-600 */

  --scalar-button-1: oklch(64.7% 0.128 48.3); /* primary-600 */
  --scalar-button-1-hover: oklch(58.9% 0.115 48.5); /* primary-700 */
  --scalar-button-1-color: oklch(98.5% 0 248); /* gray-50 */

  --scalar-tooltip-background: color-mix(
    in oklab,
    oklch(21% 0.03 265),
    transparent 12%
  );
  --scalar-tooltip-color: oklch(98.5% 0 248);

  --scalar-color-danger: oklch(57.7% 0.22 27.3); /* red-600 */
  --scalar-background-danger: oklch(93.6% 0.03 17.7); /* red-100 */

  --scalar-color-alert: oklch(66.6% 0.16 58.3); /* orange-600 */
  --scalar-background-alert: oklch(96.2% 0.06 95.6); /* orange-100 */
}

/*----------------------------------------*/
/* Dark semantic */
/*----------------------------------------*/

.dark-mode {
  --scalar-color-green: oklch(77.3% 0.15 163); /* green-400 */
  --scalar-color-red: oklch(80.8% 0.1 19.6); /* red-300 */
  --scalar-color-yellow: oklch(87.9% 0.15 91.6); /* orange-300 */
  --scalar-color-blue: oklch(71.4% 0.14 255); /* blue-400 */
  --scalar-color-orange: oklch(76.9% 0.16 70.1); /* orange-500 */
  --scalar-color-purple: oklch(47.4% 0.066 302.3); /* secondary-300 */

  --scalar-link-color: oklch(80.5% 0.122 49); /* primary-300 */
  --scalar-link-color-hover: oklch(85% 0.09 49.7); /* primary-200 */

  --scalar-button-1: oklch(80.5% 0.122 49); /* primary-300 */
  --scalar-button-1-hover: oklch(85% 0.09 49.7); /* primary-200 */
  --scalar-button-1-color: black;

  --scalar-tooltip-background: oklch(27.8% 0.03 257); /* gray-800 */
  --scalar-tooltip-color: oklch(98.5% 0 248);

  --scalar-color-danger: oklch(80.8% 0.1 19.6); /* red-300 */
  --scalar-background-danger: oklch(39.6% 0.13 25.7); /* red-900 */

  --scalar-color-alert: oklch(76.9% 0.16 70.1); /* orange-500 */
  --scalar-background-alert: oklch(55.5% 0.15 49); /* orange-700 */
}