/* ==========================================================================
   Typography Tokens — Andrés Carne de Res
   Built by Contra Studio
   ========================================================================== */

:root {

  /* --------------------------------------------------
     Font Families
     -------------------------------------------------- */
  --font-primary:   'Andresweb', sans-serif;
  --font-heading:   'Futura No2 Cond D', sans-serif;
  --font-secondary: 'Helvetica', Arial, sans-serif;

  /* --------------------------------------------------
     Display
     -------------------------------------------------- */
  --fs-display-1: 72px;
  --lh-display-1: 1.3;
  --ls-display-1: 0;
  --fw-display-1: 400;

  /* --------------------------------------------------
     Headings
     -------------------------------------------------- */
  --fs-heading-1: 240px;
  --lh-heading-1: 0.9;
  --ls-heading-1: 0;
  --fw-heading-1: 800;

  --fs-heading-2: 238px;
  --lh-heading-2: 0.9;
  --ls-heading-2: 0;
  --fw-heading-2: 800;

  --fs-heading-3: 170px;
  --lh-heading-3: 0.9;
  --ls-heading-3: 0;
  --fw-heading-3: 800;

  --fs-heading-4: 126px;
  --lh-heading-4: 0.9;
  --ls-heading-4: 0;
  --fw-heading-4: 800;

  --fs-heading-5: 72px;
  --lh-heading-5: 1.2;
  --ls-heading-5: 0;
  --fw-heading-5: 800;

  --fs-heading-6: 42px;
  --lh-heading-6: 1.2;
  --ls-heading-6: 0;
  --fw-heading-6: 400;

  /* --------------------------------------------------
     Body
     -------------------------------------------------- */
  --fs-body-1: 20px;
  --lh-body-1: 1.6;
  --ls-body-1: 0;
  --fw-body-1: 400;

  --fs-body-2: 20px;
  --lh-body-2: 1.2;
  --ls-body-2: 0;
  --fw-body-2: 400;

  --fs-body-3: 16px;
  --lh-body-3: 1.4;
  --ls-body-3: 0;
  --fw-body-3: 400;

  --fs-body-4: 14px;
  --lh-body-4: 1.4;
  --ls-body-4: 0;
  --fw-body-4: 400;

  --fs-body-5: 12px;
  --lh-body-5: 1.2;
  --ls-body-5: 0;
  --fw-body-5: 400;

  --fs-body-6: 14px;
  --lh-body-6: 1.2;
  --ls-body-6: 0;
  --fw-body-6: 400;

  /* TODO: label tokens pending design specs */

}

/* ==========================================================================
   Mobile overrides — max-width: 768px
   Only tokens that change at mobile are listed here.
   ========================================================================== */

@media (max-width: 768px) {
  :root {

    /* Display */
    --fs-display-1: 36px;
    --lh-display-1: 1.4;

    /* Headings */
    --fs-heading-1: 104px;

    --fs-heading-2: 96px;
    --ls-heading-2: -0.03em;

    --fs-heading-3: 72px;
    --lh-heading-3: 1.1;
    --ls-heading-3: 0.01em;

    --fs-heading-4: 62px;

    --fs-heading-5: 40px;
    --lh-heading-5: 1;

    --fs-heading-6: 24px;
    --lh-heading-6: 1;

    /* Body */
    --fs-body-1: 18px;
    --lh-body-1: 1.4;

    --fs-body-2: 18px;

    --lh-body-3: 1.2;

    --lh-body-4: 1.6;

  }
}