/* Set up the basics for text content and standard HTML tags */

/* AVOID using base color vars directly to make future changes easier. Prefer semantic or Bootstrap color vars instead. */
/* Base colors from Freedom Lifemap branding booklet */
:root {
  /* "Primary Colors" */
  --color-brand-spring-green: #00aa00;
  --color-brand-off-black: #1c1b1c;
  /* "Background Colors" */
  --color-brand-plain-white: #ffffff;
  --color-brand-stone: #ebeae2;
  --color-brand-sea-salt: #c3cec8;
  /* "Secondary and Accent" colors */
  --color-brand-lemon: #ffd41c;
  --color-brand-rose: #f46058;
  /* Tints/shades */
  --color-brand-spring-green-light: #b3e6b3;
  --color-brand-lemon-light: #fff2bb;
  --color-brand-rose-light: #fccfcd;
  /* Extra colors */
  --color-brand-green-dark: #006600;
}
/* Extra base colors */
:root {
  /* Gray scale ("Zinc" from https://tailwindcss.com/docs/customizing-colors) */
  --color-gray-600: #52525b;
  --color-gray-300: var(--color-brand-sea-salt);
}

/* Semantic colors */
:root {
  --color-border-strong: var(--color-gray-600);
  --color-border-weak: var(--color-gray-300);
  --color-highlight: var(--color-brand-spring-green);
}

/* Bootstrap overrides */
:root {
  --bs-body-bg: var(--color-brand-plain-white);
  --bg-light: var(--color-brand-stone);
  --bs-primary: var(--color-highlight);
  --bs-secondary-color: var(--color-gray-600);
  --bs-link-color: var(--color-brand-green-dark);
  --bs-body-color: var(--color-brand-off-black);

  --bs-border-radius: 6px;
  --bs-border-color: var(--color-border-weak);
  --bs-border-color-translucent: var(--color-border-weak);

  --bs-success: var(--color-brand-green-dark);
  --bs-success-text-emphasis: var(--bs-body-color);
  --bs-success-bg-subtle: var(--color-brand-spring-green-light);
  --bs-success-border-subtle: var(--color-brand-spring-green-light);

  --bs-warning-text-emphasis: var(--bs-body-color);
  --bs-warning-bg-subtle: var(--color-brand-lemon-light);
  --bs-warning-border-subtle: var(--color-brand-lemon-light);
  --bs-warning-rgb: 255, 212, 28; /* var(--color-brand-lemon) */ 

  --bs-danger-text-emphasis: var(--bs-body-color);
  --bs-danger-bg-subtle: var(--color-brand-rose-light);
  --bs-danger-border-subtle: var(--color-brand-rose-light);

  --bs-info-text-emphasis: var(--bs-body-color);
  --bs-info-bg-subtle: var(--color-brand-stone);
  --bs-info-border-subtle: var(--color-brand-stone);

  --color-stoplight-red: var(--color-brand-rose);
  --color-stoplight-green: var(--color-brand-spring-green);
  --color-stoplight-yellow: var(--color-brand-lemon);
  --color-stoplight-does-not-apply: var(--color-brand-sea-salt);
  --color-stoplight-skipped: var(--color-brand-plain-white);
}

body {
  font-family: "Proxima Nova", system-ui, sans-serif;
  font-weight: 400;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  color: var(--bs-body-color);
  margin-bottom: 0.75em;
  font-weight: 700;
}
h1,
.h1 {
  color: var(--color-highlight);
}

/* Use .prose for formatting article text */
.prose :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
  margin-top: 1.25em;
}

a {
  color: var(--bs-link-color);
  text-decoration: underline;
  text-underline-offset: 0.1em;
  cursor: pointer;
}

*[onclick] {
  cursor: pointer;
}

*:focus-visible {
  box-shadow: none !important;
  outline-offset: 1.5px;
  outline: 4px solid var(--bs-primary) !important;
}

/* While printing, print colors for elements using background colors without the user having to enable `Background graphics` in print settings */
@media print {
  body {
    print-color-adjust: exact !important;
    color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
  }
}