/* Aspen brand overrides for ACSS.
   html:root outranks ACSS's :root (and the builder's ACSS preview), so these win
   everywhere. Prefer changing values in the ACSS settings when it offers them. */
html:root {
  /* Colors */
  --primary: #aa2015;
  --primary-hover: #8e1a11;
  --primary-light: #e0584b;
  --primary-semi-light: #e0584b;
  --primary-ultra-light: #f8e6e4;
  --accent-light: #f7c88a;
  --base: #363636;
  --base-ultra-dark: #212121;
  --base-ultra-light: #f7f7f7;
  --neutral-ultra-light: #f7f7f7;
  --neutral-ultra-dark: #212121;
  --white: #ffffff;
  --black: #363636;
  --text-dark: #363636;
  --text-dark-muted: #646464;
  --text-light: #ffffff;
  --text-light-muted: #bcbcbc;
  --bg-ultra-light: #f7f7f7;
  --bg-ultra-dark: #212121;
  --border-color-light: #ececec;
  --border-color: #e4e4e4;
  --border-color-dark: #3a3a3a;
  --link-color: var(--primary);
  --link-color-hover: var(--primary-hover);
  --focus-color: var(--primary);

  /* Typography */
  --heading-font-family: "Montserrat", system-ui, sans-serif;
  --text-font-family: "Open Sans", system-ui, sans-serif;
  --heading-color: var(--text-dark);
  --heading-line-height: 1.2;
  --text-line-height: 1.7;
  --h1: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
  --h2: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem);
  --h3: clamp(1.375rem, 1.2rem + 0.6vw, 1.875rem);
  --h4: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --h5: 1.375rem;
  --text-xs: 0.8125rem;
  --text-s: 0.9375rem;
  --text-m: 1rem;
  --text-l: 1.125rem;
  --text-xl: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);

  /* Spacing and layout */
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: clamp(1.75rem, 1.5rem + 1vw, 2.75rem);
  --space-xl: clamp(2.25rem, 1.75rem + 2vw, 3.5rem);
  --section-space-m: clamp(4rem, 3rem + 3.5vw, 6rem);
  --section-space-s: clamp(3rem, 2.5rem + 2.5vw, 5rem);
  --gutter: clamp(1rem, 0.25rem + 3.5vw, 5rem);
  --content-width: 1280px;
  --grid-gap: clamp(1rem, 0.75rem + 1vw, 1.75rem);
  --card-padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);

  /* Radius */
  --radius-s: 0.75rem;
  --radius-m: 0.875rem;
  --radius-l: 1.25rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;

  /* Buttons (ACSS button API) */
  --btn-radius: var(--radius-pill);
  --btn-border-radius: var(--radius-pill);
  --btn-padding-block: 1rem;
  --btn-padding-inline: 1.75rem;
  --btn-min-width: 0;
  --btn-line-height: 1.25;
  --btn-font-family: var(--heading-font-family);
  --btn-font-size: var(--text-m);
  --btn-font-weight: 700;
  --btn-border-width: 1.5px;
}

/* :root body outranks the ACSS preview rule :is(body, p, li, …). */
:root body {
  font-family: var(--text-font-family);
  color: var(--text-dark);
  line-height: 1.7;
}

/* ACSS colours .btn--primary text with --primary-ultra-light; the design uses white. */
html .btn--primary:not(.btn--outline) {
  --btn-text-color: var(--white);
  --btn-text-color-hover: var(--white);
}
.btn--s {
  --btn-padding-block: 0.75rem;
  --btn-padding-inline: 1.375rem;
  --btn-font-size: 0.875rem;
}