@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');



/* =========================================================
   GLOBAL HTML TYPOGRAPHY
========================================================= */

body {
  font-family:
    var(--font-family);

  color:
    var(--text-primary);

  background:
    var(--light);

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;
}



/* =========================================================
   GLOBAL HEADINGS
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
  color:
    var(--text-heading-dark);
}



/* =========================================================
   HEADLINE ROLES
========================================================= */

.headline-large {
  font-size:
    var(--headline-large-size);

  font-weight:
    var(--headline-large-weight);

  line-height:
    var(--headline-large-line);

  letter-spacing:
    var(--headline-large-tracking);
}


.headline-medium {
  font-size:
    var(--headline-medium-size);

  font-weight:
    var(--headline-medium-weight);

  line-height:
    var(--headline-medium-line);

  letter-spacing:
    var(--headline-medium-tracking);
}


.headline-normal {
  font-size:
    var(--headline-normal-size);

  font-weight:
    var(--headline-normal-weight);

  line-height:
    var(--headline-normal-line);

  letter-spacing:
    var(--headline-normal-tracking);
}


.headline-small {
  font-size:
    var(--headline-small-size);

  font-weight:
    var(--headline-small-weight);

  line-height:
    var(--headline-small-line);

  letter-spacing:
    var(--headline-small-tracking);
}


.label-title {
  font-size:
    var(--text-label);

  font-weight:
    var(--weight-bold);

  line-height:
    var(--line-normal);

  letter-spacing:
    var(--tracking-wide);

  text-transform:
    uppercase;
}



/* =========================================================
   HEADLINE COLORS
========================================================= */

.heading-dark {
  color:
    var(--text-heading-dark);
}


.heading-light {
  color:
    var(--text-heading-light);
}



/* =========================================================
   GLOBAL PARAGRAPHS
========================================================= */

p {
  font-size:
    var(--text-body);

  line-height:
    var(--line-loose);

  color:
    var(--text-soft);
}


small {
  font-size:
    var(--text-caption);

  color:
    var(--text-muted);
}



/* =========================================================
   EYEBROW LABELS
========================================================= */

.eyebrow {
  color:
    var(--gold);

  font-size:
    var(--text-caption);

  font-weight:
    var(--weight-bold);

  letter-spacing:
    var(--tracking-wide);

  text-transform:
    uppercase;

  margin-bottom:
    var(--space-sm);
}



/* =========================================================
   TEXT ROLE UTILITIES
========================================================= */

.text-copy-large,
.text-copy-large p {
  font-size:
    var(--text-body-large);

  line-height:
    var(--line-loose);

  letter-spacing:
    var(--tracking-normal);
}


.text-muted {
  color:
    var(--text-muted);
}


.text-secondary {
  color:
    var(--text-secondary);
}


.text-light {
  color:
    var(--text-heading-light);
}


.text-inverse {
  color:
    var(--text-heading-light);
}