:root {
  /* background */

  --cal-bg-emphasis: #e5e7eb;
  --cal-bg: white;
  --cal-bg-subtle: #f3f4f6;
  --cal-bg-muted: #f9fafb;
  --cal-bg-inverted: #111827;

  /* background -> components*/
  --cal-bg-info: #dee9fc;
  --cal-bg-success: #e2fbe8;
  --cal-bg-attention: #fceed8;
  --cal-bg-error: #f9e3e2;
  --cal-bg-dark-error: #752522;

  /* Borders */
  --cal-border-emphasis: #9ca3af;
  --cal-border: #d1d5db;
  --cal-border-subtle: #e5e7eb;
  --cal-border-muted: #f3f4f6;
  --cal-border-error: #aa2e26;

  /* Content/Text */
  --cal-text-emphasis: #111827;
  --cal-text: #374151;
  --cal-text-subtle: #6b7280;
  --cal-text-muted: #9ca3af;
  --cal-text-inverted: white;

  /* Content/Text -> components */
  --cal-text-info: #253985;
  --cal-text-success: #285231;
  --cal-text-attention: #73321b;
  --cal-text-error: hsla(0, 63%, 31%, 1);
  /* Brand shenanigans
    -> These will be computed for the users theme at runtime.
  */
  --cal-brand: #111827;
  --cal-brand-emphasis: #101010;
}

/* Darkmode Colors  -- TODO: WIP*/
.dark {
  /* background */

  --cal-bg-emphasis: #2b2b2b;
  --cal-bg: #111111;
  --cal-bg-subtle: #1c1c1c;
  --cal-bg-muted: #101010;
  --cal-bg-inverted: #f3f4f6;

  /* background -> components*/
  --cal-bg-info: #dee9fc;
  --cal-bg-success: #e2fbe8;
  --cal-bg-attention: #fceed8;
  --cal-bg-error: #f9e3e2;
  --cal-bg-dark-error: #752522;

  /* Borders */
  --cal-border-emphasis: #575757;
  --cal-border: #444444;
  --cal-border-subtle: #2b2b2b;
  --cal-border-muted: #1c1c1c;
  --cal-border-error: #aa2e26;

  /* Content/Text */
  --cal-text-emphasis: #f3f4f6;
  --cal-text: #d6d6d6;
  --cal-text-subtle: #767676;
  --cal-text-muted: #575757;
  --cal-text-inverted: white;

  /* Content/Text -> components */
  --cal-text-info: #253985;
  --cal-text-success: #285231;
  --cal-text-attention: #73321b;
  --cal-text-error: #752522;

  /* Brand shenanigans
    -> These will be computed for the users theme at runtime.
  */
  --cal-brand: #111827;
  --cal-brand-emphasis: #101010;
}