/* ==========================================================================
   Let's Be Green theme tokens
   Colour, type, spacing, shape and motion values. Every other stylesheet
   reads from here, so a theme change starts in this file.
   ========================================================================== */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surfaces */
  --white: #ffffff;
  --mist: #f2f7f3;
  --mist-deep: #e4efe8;
  --line: #dbe6df;
  --hairline: rgba(11, 31, 23, 0.08);

  /* Brand: the logo's green and amber, plus a deep pine for dark surfaces */
  --pine: #06281d;
  --pine-2: #0a382a;
  --pine-3: #135240;
  --green: #187850;
  --green-deep: #116140;
  --green-bright: #2bb673;
  --mint: #bdefd4;
  --sun: #f8a828;
  --sun-bright: #ffc655;
  --sun-deep: #d98a06;

  /* Text */
  --ink: #0b1f17;
  --body: #45554d;
  --muted: #5d6c65;
  --on-dark: rgba(255, 255, 255, 0.78);
  --danger: #b3261e;

  /* Type */
  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* The site's type standard: running text, buttons, menu links and form
     text are 16px, and 18px from 992px (--text-base, below). Only short
     labels are smaller (--text-xs, 14px): tags and badges, the label above
     a value, meta lines (breadcrumbs, dates), the top bar and copyright.
     Intro paragraphs, quotes and FAQ questions are the same size as body
     text too. --text-sm and --text-lead are kept so older rules follow the
     standard; both are the same as --text-base. */
  --text-xs: 0.875rem;
  --text-base: 1rem;
  --text-sm: var(--text-base);
  --text-lead: var(--text-base);
  --text-h3: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --text-h2: clamp(2rem, 1.35rem + 2.3vw, 3.25rem);
  --text-display: clamp(2.5rem, 1.2rem + 4.6vw, 5rem);

  /* Plus Jakarta Sans has a narrow word space. These open it up: a little
     for running text, more for headings, whose letters are set tighter. */
  --word-space: 0.06em;
  --word-space-display: 0.11em;

  /* Space */
  --gutter: clamp(1.25rem, 3.4vw, 3rem);
  --section: clamp(4.5rem, 3rem + 6.5vw, 8.75rem);
  --frame: clamp(0.5rem, 1.2vw, 1.25rem);

  /* Shape */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: clamp(22px, 2.6vw, 36px);
  --r-2xl: clamp(26px, 3.4vw, 48px);
  --r-pill: 999px;

  /* Depth */
  --shadow-sm: 0 1px 2px rgba(11, 31, 23, 0.05), 0 6px 16px -8px rgba(11, 31, 23, 0.1);
  --shadow-md: 0 2px 6px rgba(11, 31, 23, 0.05), 0 18px 40px -18px rgba(11, 31, 23, 0.22);
  --shadow-lg: 0 8px 20px -10px rgba(11, 31, 23, 0.12), 0 40px 80px -32px rgba(11, 31, 23, 0.34);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --fast: 0.22s;
  --medium: 0.5s;

  /* Layers */
  --z-header: 1030;
  --z-float: 1040;
  --z-preloader: 2000;

  /* Bootstrap variable overrides */
  --bs-body-bg: var(--white);
  --bs-body-color: var(--body);
  --bs-body-font-family: var(--font);
  --bs-body-font-size: var(--text-base);
  --bs-body-line-height: 1.65;
  --bs-link-color: var(--green);
  --bs-link-color-rgb: 24, 120, 80;
  --bs-link-hover-color: var(--green-deep);
  --bs-link-hover-color-rgb: 17, 97, 64;
  --bs-border-color: var(--line);
  --bs-heading-color: var(--ink);
  --bs-secondary-color: var(--muted);
}

@media (min-width: 992px) {
  :root {
    --text-base: 1.125rem;
  }
}