:root {
  /* scheme based on https://syntax.tailwindui.com/docs/cacheadvance-predict */
  
  --miwi-body-bg-light: hsl(210, 40%, 97%);
  --miwi-body-bg-light-hex: #f4f7fa;
  --miwi-body-bg-light-rgb: 244, 247, 250;

  --miwi-body-bg-dark: hsl(216, 35%, 14%);
  --miwi-body-bg-dark-hex: #172130;
  --miwi-body-bg-dark-rgb: 23, 33, 48;

  --miwi-header-bg-light:     hsla(220, 80%, 7%, 0.9);
  --miwi-header-border-light: hsla(220, 20%, 1%, 0.9);

  --miwi-header-bg-dark:     hsla(220, 40%, 9%, 0.75);
  --miwi-header-border-dark: hsla(220, 38%, 16%, 0.9);

  --miwi-footer-bg-light: hsl(220, 50%, 10%);
  --miwi-footer-bg-dark: hsl(220, 43%, 11%);

  --miwi-color-text-light: hsl(160, 7%, 85%);
  --miwi-color-text-light-hex: #d6dbda;
  --miwi-color-text-light-rgb: 214, 219, 218;

  --miwi-color-text-dark: hsl(220, 25%, 27%);
  --miwi-color-text-dark-hex: #343f56;
  --miwi-color-text-dark-rgb: 52, 63, 86;

  --miwi-link-color-light: hsl(160, 100%, 30%);
  --miwi-link-color-light-hex: #009966;
  --miwi-link-color-light-rgb: 0, 153, 102;
  --miwi-link-color-underline-light: rgba(0, 153, 102, 0.3);

  --miwi-link-color-dark: hsl(160, 100%, 37%);
  --miwi-link-color-dark-hex: #00bc7d;
  --miwi-link-color-dark-rgb: 0, 188, 125;
  --miwi-link-color-underline-dark: rgba(0, 153, 102, 0.3);

  --miwi-color-accent-1: hsl(160, 100%, 37%);
  --miwi-color-accent-1-darker: hsl(160, 100%, 32%);
  --miwi-color-accent-1-darkest: hsl(160, 100%, 27%);

  --miwi-color-callout-1-bg-light: hsl(195, 15%, 90%);
  --miwi-color-callout-1-bg-dark: hsl(210, 36%, 16%);
  
  --miwi-color-accent-2: #e12afb;
}

:root,
[data-bs-theme=light] {
  --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: "IBM Plex Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --bs-body-bg: var(--miwi-body-bg-light-hex);
  --bs-body-bg-rgb: var(--miwi-body-bg-light-rgb);

  --bs-body-color: var(--miwi-color-text-dark-hex);
  --bs-body-color-rgb: var(--miwi-color-text-dark-rgb);

  --bs-link-color: var(--miwi-link-color-light-hex);
  --bs-link-color-rgb: var(--miwi-link-color-light-rgb);
  --miwi-link-color-underline: var(--miwi-link-color-underline-light);
}

[data-bs-theme=dark] {
  --bs-body-bg: var(--miwi-body-bg-dark-hex);
  --bs-body-bg-rgb: var(--miwi-body-bg-dark-rgb);

  --bs-body-color: var(--miwi-color-text-light-hex);
  --bs-body-color-rgb: var(--miwi-color-text-light-rgb);

  --bs-link-color: var(--miwi-link-color-dark-hex);
  --bs-link-color-rgb: var(--miwi-link-color-dark-rgb);
  --miwi-link-color-underline: var(--miwi-link-color-underline-dark);
}