/* 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 ------------------------------------------------------------- */

/*
Each family runs light to dark, 25 to 950, and the number always goes up as
the colour gets darker. Nothing here changes what any page renders: every
value that was already in use is still here, at the step its lightness
actually puts it. The steps that were missing are filled in, so a page that
needs a mid-tone has one to reach for instead of inventing it. See #1911.

Three things were wrong before and are worth knowing about, because the fix
was to renumber rather than to recolour:

  lavender 100 and 200 were the wrong way round (100 was darker than 200)
  raspberry 25 and 50 were the wrong way round
  raspberry 100 and 200 were the same colour

Two more that are not a ramp at all and now say so in their names:

  --tt-slate-500   was --tt-lavender-400. It is a desaturated blue-grey, not
                   a step on the lavender ramp; it sits between lavender 500
                   and 700 by lightness but reads as a different colour.
  --tt-pink        is --tt-raspberry-500. Kept as its own name because it is
                   used semantically, as the link colour, not as a step.
*/

: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-400: #61b5be;
  --tt-teal-500: #39a2ae;
  --tt-teal-600: #2e828b;
  --tt-teal-700: #226168;
  --tt-teal-800: #164146;
  --tt-teal-900: #113134;
  --tt-teal-950: #09191a;

  /* Mint is a three-step accent, not a full ramp: it only ever appears as a
     tint behind a card. */
  --tt-mint-50:  #f1fcf7;
  --tt-mint-100: #d6f7e8;
  --tt-mint-200: #c4e3e7;

  --tt-lavender-25:  #faf9fe;
  --tt-lavender-50:  #f4f3fc;
  --tt-lavender-100: #e8e7fa;
  --tt-lavender-200: #dddcf7;
  --tt-lavender-300: #d8d6e7;
  --tt-lavender-400: #c6c4f2;
  --tt-lavender-500: #8280c0;
  --tt-lavender-600: #6761a8;
  --tt-lavender-700: #4c418f;
  --tt-lavender-800: #403c8e;
  --tt-lavender-900: #2f2b81;
  --tt-lavender-950: #181641;

  --tt-raspberry-25:  #fef6fa;
  --tt-raspberry-50:  #fdf3f9;
  --tt-raspberry-100: #fbe6f0;
  --tt-raspberry-200: #f7cde1;
  --tt-raspberry-300: #ed8ab9;
  --tt-raspberry-400: #e34690;
  --tt-raspberry-500: #d90368;
  --tt-raspberry-600: #ae0253;
  --tt-raspberry-700: #82023e;
  --tt-raspberry-800: #570129;
  --tt-raspberry-900: #2b0115;
  --tt-raspberry-950: #16000a;

  /* Off the ramps. See the note above. */
  --tt-slate-500: #67728d;

  --tt-pink:       var(--tt-raspberry-500);
  --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-900);
  --bs-btn-active-border-color: var(--tt-teal-900);
}

.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-900);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: var(--tt-teal-900);
  --bs-btn-active-bg: var(--tt-teal-900);
  --bs-btn-active-color: #fff;
  --bs-btn-active-border-color: var(--tt-teal-900);
}

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