/* Our Bootstrap variable overrides — the theme, expressed entirely as CSS
 * custom properties (no Sass, no build step). Loaded by layouts/marketing
 * between bootstrap.min.css and marketing.css.
 *
 * Look up what a component is driven by in
 * _bootstrap_variables_reference.css (all Bootstrap defaults, never loaded),
 * then override the variable here.
 */

/* Brand tokens ------------------------------------------------------------- */

:root {
  --tt-ink: #1f2226;

  --tt-teal-50: #ebf6f7;
  --tt-teal-100: #d7ecef;
  --tt-teal-200: #b0dadf;
  --tt-teal-500: #39a2ae;
  --tt-teal-700: #226168;
  --tt-teal-850: #113134;

  --tt-lavender-50: #f4f3fc;
  --tt-lavender-200: #e8e7fa;
  --tt-lavender-300: #dddcf7;
  --tt-lavender-900: #403c8e;
  --tt-lavender-950: #2f2b81;

  --tt-raspberry-25: #fdf3f9;
  --tt-raspberry-50: #fbe6f0;
  --tt-raspberry-100: #f7cde1;
  --tt-raspberry-600: #ae0253;
  --tt-raspberry-700: #82023e;

  --tt-mint-50: #f1fcf7;

  --tt-pink: #d90368;
  --tt-pink-hover: #92003d;

  --tt-font-body: "Avenir-Medium", sans-serif;
  --tt-font-display: "Bitter", serif;
}

/* Bootstrap overrides ------------------------------------------------------ */

:root {
  --bs-body-font-family: var(--tt-font-body);
  --bs-body-color: var(--tt-ink);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.625;

  /* primary = brand teal; drives .text-primary, .bg-primary, .border-primary */
  --bs-primary: var(--tt-teal-500);
  --bs-primary-rgb: 57, 162, 174;

  /* secondary = brand pink; the loud CTA color */
  --bs-secondary: var(--tt-pink);
  --bs-secondary-rgb: 217, 3, 104;

  --bs-link-color-rgb: 34, 97, 104;
  --bs-link-hover-color-rgb: 17, 49, 52;

  --bs-border-radius: 0.5rem;
  --bs-border-radius-lg: 0.75rem;
  --bs-border-radius-xl: 1rem;
}

.btn-primary {
  --bs-btn-bg: var(--tt-teal-500);
  --bs-btn-border-color: var(--tt-teal-500);
  --bs-btn-hover-bg: var(--tt-teal-700);
  --bs-btn-hover-border-color: var(--tt-teal-700);
  --bs-btn-active-bg: var(--tt-teal-850);
  --bs-btn-active-border-color: var(--tt-teal-850);
}

.btn-secondary {
  --bs-btn-bg: var(--tt-pink);
  --bs-btn-border-color: var(--tt-pink);
  --bs-btn-hover-bg: var(--tt-pink-hover);
  --bs-btn-hover-border-color: var(--tt-pink-hover);
  --bs-btn-active-bg: var(--tt-pink-hover);
  --bs-btn-active-border-color: var(--tt-pink-hover);
}

/* Strong variant: the soft button inverted — deep teal fill, white text.
   For the CTA that has to stick out (nav trial button). */
.btn-teal-strong {
  --bs-btn-bg: var(--tt-teal-700);
  --bs-btn-color: #fff;
  --bs-btn-border-color: var(--tt-teal-700);
  --bs-btn-hover-bg: var(--tt-teal-850);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: var(--tt-teal-850);
  --bs-btn-active-bg: var(--tt-teal-850);
  --bs-btn-active-color: #fff;
  --bs-btn-active-border-color: var(--tt-teal-850);
}

/* Soft variant: teal-tinted fill, deep teal text. */
.btn-teal-soft {
  --bs-btn-bg: var(--tt-teal-200);
  --bs-btn-color: var(--tt-teal-700);
  --bs-btn-border-color: var(--tt-teal-200);
  --bs-btn-hover-bg: var(--tt-teal-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: var(--tt-teal-500);
  --bs-btn-active-bg: var(--tt-teal-700);
  --bs-btn-active-color: #fff;
  --bs-btn-active-border-color: var(--tt-teal-700);
}

.btn-outline-primary {
  --bs-btn-color: var(--tt-teal-700);
  --bs-btn-border-color: var(--tt-teal-500);
  --bs-btn-hover-bg: var(--tt-teal-500);
  --bs-btn-hover-border-color: var(--tt-teal-500);
  --bs-btn-active-bg: var(--tt-teal-700);
  --bs-btn-active-border-color: var(--tt-teal-700);
}