/* ==========================================================================
   theme.css
   Single source of truth for the design system.
   Change values here and the whole site updates.
   Sections alternate between white and off-white. No black backgrounds.
   ========================================================================== */

:root {
  /* ---- Colors --------------------------------------------------------- */
  --color-red: #D71920;
  --color-red-dark: #A80F15;
  --color-black: #000000;
  --color-text: #2B2B2B;
  --color-muted: #6B6B6B;
  --color-white: #FFFFFF;
  --color-offwhite: #F5F5F5;
  --color-line: #E4E4E4;
  --color-grey-mid: #E2E2E2;   /* used by btn-grey */

  /* ---- Font (headings and body use the same family) ------------------- */
  --font-family-base: "Neue Haas Grotesk Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-family-heading: var(--font-family-base);
  --font-size-base: 15px;
  --line-height-base: 25.5px;
  --paragraph-margin: 0 0 16px;

  /* ---- Headings ------------------------------------------------------- */
  --heading-weight: 500;
  --heading-line-height: 1.08;
  --heading-letter-spacing: -0.02em;
  --heading-margin: 0 0 16px;
  --hero-title-size: clamp(2.4rem, 4.2vw, 3.75rem);
  --h1-size: clamp(2.4rem, 5vw, 4rem);
  --h2-size: clamp(2rem, 3.6vw, 3rem);
  --h3-size: 1.25rem;
  --h4-size: 1.0625rem;

  /* ---- Spacing -------------------------------------------------------- */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 80px;
  --space-section: clamp(72px, 9vw, 120px);
  --header-height: 72px;

  /* ---- Motion --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --btn-fill-duration: 1.2s;

  /* ---- Bootstrap variable overrides ----------------------------------- */
  --bs-body-font-family: var(--font-family-base);
  --bs-body-font-size: var(--font-size-base);
  --bs-body-line-height: 1.7; /* 25.5px / 15px */
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--color-white);
  --bs-link-color: var(--color-red);
  --bs-link-hover-color: var(--color-red-dark);
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
}