/**
 * Colors
 * -------------------------------------------------------------------------- */

:root {
  --c-yellow-1: rgba(255, 216, 89, 1);
  --c-yellow-2: rgba(247, 211, 54, 1);
  --c-yellow-3: rgba(222, 201, 110, 1);
  --c-yellow-soft-1: rgba(236, 183, 50, 1);
  --c-yellow-soft-2: rgba(201, 149, 19, 0.3);

  --c-white-dark: rgba(248, 248, 248, 1);
  --c-black-darker: rgba(13, 18, 27, 1);
  --c-black: rgba(17, 24, 39, 1);
  --c-black-light: rgba(22, 31, 50, 1);
  --c-black-lighter: rgba(38, 42, 68, 1);

  --c-green-1: rgba(61, 214, 140, 1);
  --c-green-2: rgba(48, 164, 108, 1);
  --c-green-3: rgba(41, 132, 89, 1);
  --c-green-soft: rgba(16, 185, 129, 0.16);

  /* light theme is a bit different */
  --vp-c-brand-1: var(--vp-c-green-1);
  --vp-c-brand-2: var(--vp-c-green-2);
  --vp-c-brand-3: var(--vp-c-green-3);
  --vp-c-brand-soft: var(--vp-c-green-soft);

  --c-text-dark-1: rgba(217, 230, 235, 1);
  --c-text-dark-2: rgba(196, 221, 230, 1);
  --c-text-dark-3: rgba(171, 196, 204, 1);
  --c-text-light-1: rgba(44, 62, 80, 1);
  --c-text-light-2: rgba(71, 101, 130, 1);
  --c-text-light-3: rgba(144, 164, 183, 1);

  --vp-c-brand-text: var(--c-text-light-1);
  --c-bg-accent: var(--c-white-dark);
}

html.dark:root {
  --vp-c-brand-1: var(--c-yellow-1);
  --vp-c-brand-2: var(--c-yellow-2);
  --vp-c-brand-3: var(--c-yellow-3);
  --vp-c-brand-soft: var(--c-yellow-soft-2);

  --vp-c-text-1: var(--c-text-dark-1);
  --vp-c-brand-text: var(--c-text-light-1);
  --c-text-light: var(--c-text-dark-2);
  --c-text-lighter: var(--c-text-dark-3);
  --c-bg-accent: var(--c-black-light);

  --vp-c-bg: var(--c-black);
  --vp-c-bg-soft: var(--c-black-light);
  --vp-c-bg-alt: rgba(13, 18, 27, 1);
  --vp-c-bg-elv: var(--vp-c-bg-soft);
}