/* Light Theme */
:root,
:root[data-force-theme='light'] {
  --grey-greyer: var(--gray-100);

  --cloud-ateneo: var(--cloud);
  --denim-white: var(--denim);
  --inky-lily: var(--inky);
  --purple-white: var(--purple);
  --purple-princess: var(--purple);
  --rift-princess: var(--rift);
  --rift-white: var(--rift);
  --black-princess: var(--black);
  --black-white: var(--black);
  --smoke-denim: var(--smoke);
  --smoke-halite: var(--smoke);
  --smoke-indigo: var(--smoke);
  --white-denim: var(--white);

  --callout-note: var(--smoke);
  --callout-tip: rgb(230, 246, 230);
  --callout-info: rgb(238, 249, 253);
  --callout-caution: rgb(255, 248, 230);
  --callout-danger: rgb(255, 235, 236);
  --callout-code-bg: hsla(0deg 0% 0% / 10%)
}

/* Dark Theme */
:root[data-force-theme='dark'] {
  --grey-greyer: var(--gray-600);

  --cloud-ateneo: var(--ateneo);
  --denim-white: var(--white);
  --inky-lily: var(--lily);
  --purple-white: var(--white);
  --purple-princess: var(--princess);
  --rift-princess: var(--princess);
  --rift-white: var(--white);
  --black-princess: var(--princess);
  --black-white: var(--white);
  --smoke-denim: var(--denim);
  --smoke-halite: var(--halite);
  --smoke-indigo: var(--indigo);
  --white-denim: var(--denim);

  --callout-note: rgb(71, 71, 72);
  --callout-tip: rgb(0, 49, 0);
  --callout-info: rgb(25, 60, 71);
  --callout-caution: rgb(77, 56, 0);
  --callout-danger: rgb(75, 17, 19);
  --callout-code-bg: hsla(0deg 0% 100% / 12.5%)
}

/* Dark Theme: System */
/* This should be a copy of the above block */
@media (prefers-color-scheme: dark) {
  :root {
    --grey-greyer: var(--gray-600);

    --cloud-ateneo: var(--ateneo);
    --denim-white: var(--white);
    --inky-lily: var(--lily);
    --purple-white: var(--white);
    --purple-princess: var(--princess);
    --rift-princess: var(--princess);
    --rift-white: var(--white);
    --black-princess: var(--princess);
    --black-white: var(--white);
    --smoke-denim: var(--denim);
    --smoke-halite: var(--halite);
    --smoke-indigo: var(--indigo);
    --white-denim: var(--denim);

    --callout-note: rgb(71, 71, 72);
    --callout-tip: rgb(0, 49, 0);
    --callout-info: rgb(25, 60, 71);
    --callout-caution: rgb(77, 56, 0);
    --callout-danger: rgb(75, 17, 19);
    --callout-code-bg: hsla(0deg 0% 100% / 12.5%)
  }
}