/* 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-25: #f1fcf7;
  --tt-teal-50: #ebf6f7;
  --tt-teal-100: #d7ecef;
  --tt-teal-200: #b0dadf;
  --tt-teal-300: #88c8cd;
  --tt-teal-500: #39a2ae;
  --tt-teal-700: #226168;
  --tt-teal-800: #164146;
  --tt-teal-850: #113134;

  --tt-mint-25: #f1fcf7;
  --tt-mint-50: #f1fcf7;
  --tt-mint-100: #c4e3e7;
  --tt-mint-400: #d6f7e8;

  --tt-lavender-50: #f4f3fc;
  --tt-lavender-100: #dddcf7;
  --tt-lavender-200: #e8e7fa;
  --tt-lavender-300: #d8d6e7;
  --tt-lavender-400: #67728d;
  --tt-lavender-900: #4c418f;
  --tt-lavender-950: #2f2b81;

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

  --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-color-rgb: 31, 34, 38; /* --tt-ink, for .text-body */
  --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;

  /* Deep teal for small text on tinted bands (client industries, blog kicker
     and dates); drives .text-primary-emphasis */
  --bs-primary-text-emphasis: var(--tt-teal-700);

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

  /* info = light teal; the accent that reads on our dark sections */
  --bs-info: var(--tt-teal-300);
  --bs-info-rgb: 136, 200, 205;

  /* dark = deep teal; the ground for .bg-dark / .text-bg-dark sections */
  --bs-dark: var(--tt-teal-800);
  --bs-dark-rgb: 22, 65, 70;

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

  /* Tinted "subtle" ground for primary-flavored components (accordion open
     headers, etc.) — Bootstrap's default is a pale blue. */
  --bs-primary-bg-subtle: var(--tt-teal-100);

  /* Hairlines and dividers are the pale teal, matching the client strip rules */
  --bs-border-color: var(--tt-teal-200);

  --bs-border-radius: 0.5rem;
  --bs-border-radius-lg: 0.75rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-xxl: 1.5rem; /* drives .rounded-5 (blog + before/after cards) */
}

/* Accordion (FAQ): Bootstrap's open-state chevron and focus ring are blue;
   re-ink them in the light teal. The open header's tint comes from
   --bs-primary-bg-subtle above, and its text from --bs-primary-text-emphasis. */
.accordion {
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2388c8cd' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(57, 162, 174, 0.25);
}

/* Dropdown (nav): the pressed/active item is Bootstrap blue by default. */
.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--tt-teal-500);
}

.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);
}

/* Faint variant: the palest teal fill, for a filter pill in its off state
   beside a soft-teal one that is on. */
.btn-teal-faint {
  --bs-btn-bg: var(--tt-teal-50);
  --bs-btn-color: var(--tt-teal-700);
  --bs-btn-border-color: var(--tt-teal-50);
  --bs-btn-hover-bg: var(--tt-teal-100);
  --bs-btn-hover-color: var(--tt-teal-700);
  --bs-btn-hover-border-color: var(--tt-teal-100);
  --bs-btn-active-bg: var(--tt-teal-200);
  --bs-btn-active-color: var(--tt-teal-700);
  --bs-btn-active-border-color: var(--tt-teal-200);
}

/* 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);
}