/* ============================================================
   Design tokens - the single source of truth for every visual
   value on the site. site.css only ever references these names.
   Values were measured from the original Oxygen build so the
   replica renders identically.

   Breakpoints (CSS cannot put variables inside @media, so they
   are listed here and repeated verbatim in the media queries
   below):
     large 1000px   medium 991px   small 767px   tiny 479px
   ============================================================ */
:root {
  /* Colors */
  --color-page-bg: #f9f9f9;        /* body background (only visible outside the section) */
  --color-section-bg: #2b2c27;     /* the dark letter panel */
  --color-heading: #f4f4f4;
  --color-body-text: #bcbcbc;      /* the letter paragraphs */
  --color-muted-text: #7a7a7a;     /* the credit line under the form */
  --color-accent: #cc0033;         /* Rutgers red: the short bar under the headline */
  --color-link: #f4f4f4;           /* in-text links (404 page); same as the heading */
  --color-default-text: #2b2c28;   /* inherited default, overridden by the above */

  /* Typography */
  --font-sans: 'Poppins', sans-serif;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --font-size-base: 16px;
  --font-size-heading: 20px;
  --font-size-letter: 20px;
  --font-size-small: 14px;
  --line-height-body: 1.6;
  --line-height-heading: 1.15;

  /* Layout */
  --content-max-width: 1000px;
  --section-pad-top: 106px;
  --section-pad-bottom: 38px;
  --section-pad-x: 20px;

  /* Spacing between the blocks */
  --space-heading-bottom: 6px;
  --space-icon-bottom: 38px;
  --space-form-top: 31px;
  --space-credit-top: 33px;

  /* Sizes */
  --icon-size: 24px;
}

/* Responsive overrides: the same token names take new values as
   the screen narrows, mirroring the original Oxygen breakpoints. */
@media (max-width: 1000px) {
  :root {
    --section-pad-top: 132px;
    --section-pad-x: 100px;
    --font-size-heading: 24px;
    --font-size-letter: 18px;
  }
}
@media (max-width: 991px) {
  :root {
    --section-pad-top: 120px;
    --section-pad-x: 80px;
  }
}
@media (max-width: 767px) {
  :root {
    --section-pad-top: 80px;
    --section-pad-x: 40px;
    --font-size-heading: 17px;
    --font-size-letter: 16px;
  }
}
@media (max-width: 479px) {
  :root {
    --section-pad-top: 40px;
    --section-pad-x: 20px;
    --font-size-letter: 14px;
  }
}