/* =========================================================
   BADGER BUSINESS COMPASS
   BASE DESIGN SYSTEM

   Shared styles used across the whole application.
========================================================= */


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}


body {
  min-height: 100vh;

  overflow-x: hidden;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

  color: var(--text);

  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(23, 117, 84, 0.08),
      transparent 27rem
    ),
    linear-gradient(
      180deg,
      #f7f8f4 0%,
      var(--background) 100%
    );

  line-height: 1.5;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* =========================================================
   DESIGN TOKENS
========================================================= */

:root {

  /* Backgrounds */

  --background: #f5f3ed;

  --surface: #ffffff;

  --surface-soft: #fbfaf7;

  --cream: #f7f4ed;


  /* Text */

  --text: #17201b;

  --muted: #66706a;

  --text-soft: #7a837d;


  /* Brand */

  --primary: #177554;

  --primary-dark: #0f5f43;

  --primary-soft: #e8f2eb;


  /* Supporting colours */

  --gold: #c79a45;

  --earth: #8a7258;


  /* Borders */

  --border: #dfe3dc;

  --border-strong: #cfd8d1;


  /* Shadows */

  --shadow-sm:
    0 8px 24px
    rgba(23, 32, 27, 0.06);

  --shadow-md:
    0 18px 50px
    rgba(23, 32, 27, 0.09);

  --shadow-lg:
    0 28px 80px
    rgba(23, 32, 27, 0.12);


  /* Radius */

  --radius-sm: 12px;

  --radius-md: 18px;

  --radius-lg: 26px;

  --radius-xl: 32px;


  /* Layout */

  --content-width: 1180px;
}


/* =========================================================
   BASIC ELEMENTS
========================================================= */

body,
button,
input,
select,
textarea {
  font-family: inherit;
}


button,
input,
select,
textarea {
  font: inherit;
}


button {
  color: inherit;
}


a {
  color: inherit;
}


img,
svg {
  max-width: 100%;
}


img {
  display: block;
}


::selection {
  color: #ffffff;
  background: var(--primary);
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline:
    3px solid
    rgba(23, 117, 84, 0.22);

  outline-offset: 3px;
}


/* =========================================================
   SHARED EYEBROW LABEL
========================================================= */

.eyebrow {
  display: inline-block;

  margin-bottom: 18px;

  color: var(--primary);

  font-size: 11px;

  font-weight: 850;

  line-height: 1.2;

  letter-spacing: 0.18em;

  text-transform: uppercase;
}


/* =========================================================
   SHARED BUTTON BEHAVIOUR
========================================================= */

button,
a {
  -webkit-tap-highlight-color: transparent;
}


button {
  cursor: pointer;
}


button:disabled {
  cursor: not-allowed;
}


/* =========================================================
   SHARED TRANSITIONS
========================================================= */

a,
button {
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}


/* =========================================================
   UTILITY
========================================================= */

.hidden {
  display: none !important;
}


.visually-hidden {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  padding: 0 !important;
  margin: -1px !important;

  overflow: hidden !important;

  clip: rect(0, 0, 0, 0) !important;

  white-space: nowrap !important;

  border: 0 !important;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;

    scroll-behavior:
      auto !important;
  }

}