/* ==========================================================
   PROJECT XAMUCO
   File: typography.css
   Version: 1.0.0
   Description: Global Typography System
========================================================== */

/* ======================================================
   BODY
====================================================== */

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

  font-size: var(--fs-md);

  font-weight: var(--fw-regular);

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

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

  color: var(--color-black);

  background-color: var(--color-background);
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);

  font-weight: var(--fw-regular);

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

  line-height: var(--lh-tight);

  color: var(--color-primary);

  text-transform: uppercase;
}

/* ======================================================
   HEADING SCALE
====================================================== */

h1 {
  font-size: clamp(3.5rem, 7vw, 7rem);
}

h2 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
}

h3 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
}

h4 {
  font-size: var(--fs-lg);
}

h5 {
  font-size: var(--fs-md);
}

h6 {
  font-size: var(--fs-sm);
}

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

p {
  max-width: var(--content-width);

  line-height: var(--lh-relaxed);

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

/* ======================================================
   STRONG
====================================================== */

strong {
  font-weight: var(--fw-bold);
}

/* ======================================================
   EMPHASIS
====================================================== */

em {
  font-style: italic;
}

/* ======================================================
   SMALL
====================================================== */

small {
  font-size: var(--fs-sm);
}

/* ======================================================
   BLOCKQUOTE
====================================================== */

blockquote {
  padding-left: var(--space-lg);

  border-left: 4px solid var(--color-primary);

  font-style: italic;
}

/* ======================================================
   LISTS
====================================================== */

ul,
ol {
  padding-left: var(--space-lg);
}

li + li {
  margin-top: var(--space-xs);
}

/* ======================================================
   LINKS
====================================================== */

a {
  transition: color var(--transition-fast) var(--ease-in-out);
}

a:hover {
  color: var(--color-primary);
}

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

.eyebrow {
  display: inline-block;

  margin-bottom: var(--space-md);

  font-size: var(--fs-sm);

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

  letter-spacing: 0.35em;

  text-transform: uppercase;

  opacity: 0.9;
}

/* ======================================================
   LEAD
====================================================== */

.lead {
  max-width: 30rem;

  font-size: var(--fs-lg);

  line-height: var(--lh-relaxed);
}

/* ======================================================
   BOTTLE STATEMENT
====================================================== */

.bottle__statement {
  font-style: italic;

  letter-spacing: 0.01em;

  line-height: 1.7;
}

/* ======================================================
   BOTTLE STATEMENT LINES
====================================================== */

.bottle__statement-line {
  display: block;

  letter-spacing: 0.01em;
}

/* ======================================================
   BOTTLE STATEMENT EMPHASIS
====================================================== */

.bottle__statement-line--emphasis {
  margin-top: var(--space-md);

  letter-spacing: 0.03em;
}

/* ======================================================
   LEGEND QUOTE
====================================================== */

.legend__quote {
  font-style: italic;

  letter-spacing: 0.01em;

  line-height: 1.5;
}