/* =====================================================================
   TEXT STYLES — which element on the site uses which text style.
   The values themselves live in tokens.css (e.g. --h2-size).
   ===================================================================== */

body {
  font-family: var(--body-font);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: 1.5;
  color: var(--color-text);
}

/* name: Your name above the big home title */
.hero-name {
  font-family: var(--name-font);
  font-size: var(--name-size);
  font-weight: var(--name-weight);
  letter-spacing: var(--name-tracking);
  line-height: var(--name-leading);
  text-transform: var(--name-case);
  font-style: var(--name-style);
  color: var(--name-color);
}

/* display: Big title on the home page */
.hero-title {
  font-family: var(--display-font);
  font-size: var(--display-size);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
  text-transform: var(--display-case);
  font-style: var(--display-style);
  color: var(--display-color);
}

/* subtitle: Line under a project title */
.cs-hero .sub {
  font-family: var(--subtitle-font);
  font-size: var(--subtitle-size);
  font-weight: var(--subtitle-weight);
  letter-spacing: var(--subtitle-tracking);
  line-height: var(--subtitle-leading);
  text-transform: var(--subtitle-case);
  font-style: var(--subtitle-style);
  color: var(--subtitle-color);
}

/* h1: Project page title */
.cs-hero h1, .ds-title {
  font-family: var(--h1-font);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-tracking);
  line-height: var(--h1-leading);
  text-transform: var(--h1-case);
  font-style: var(--h1-style);
  color: var(--h1-color);
}

/* h2: Section titles */
.section-title, h2.cs-title, .contact h2, .ds-h {
  font-family: var(--h2-font);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  letter-spacing: var(--h2-tracking);
  line-height: var(--h2-leading);
  text-transform: var(--h2-case);
  font-style: var(--h2-style);
  color: var(--h2-color);
}

/* h3: Sub-section titles */
.act-title, .sub-title, .note h3 {
  font-family: var(--h3-font);
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  letter-spacing: var(--h3-tracking);
  line-height: var(--h3-leading);
  text-transform: var(--h3-case);
  font-style: var(--h3-style);
  color: var(--h3-color);
}

/* h4: Titles inside cards & boxes (incl. The Challenge / The Goal) */
.card h3, .point h3, .user h3, .split h3, .rows h3, .brief-title {
  font-family: var(--h4-font);
  font-size: var(--h4-size);
  font-weight: var(--h4-weight);
  letter-spacing: var(--h4-tracking);
  line-height: var(--h4-leading);
  text-transform: var(--h4-case);
  font-style: var(--h4-style);
  color: var(--h4-color);
}

/* statement: Big scroll-lit sentence */
.statement {
  font-family: var(--statement-font);
  font-size: var(--statement-size);
  font-weight: var(--statement-weight);
  letter-spacing: var(--statement-tracking);
  line-height: var(--statement-leading);
  text-transform: var(--statement-case);
  font-style: var(--statement-style);
  color: var(--statement-color);
}

/* stat: Big numbers */
.stat .num, .demo-box .num {
  font-family: var(--stat-font);
  font-size: var(--stat-size);
  font-weight: var(--stat-weight);
  letter-spacing: var(--stat-tracking);
  line-height: var(--stat-leading);
  text-transform: var(--stat-case);
  font-style: var(--stat-style);
  color: var(--stat-color);
}

/* eyebrow: Small label above titles */
.eyebrow {
  font-family: var(--eyebrow-font);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  line-height: var(--eyebrow-leading);
  text-transform: var(--eyebrow-case);
  font-style: var(--eyebrow-style);
  color: var(--eyebrow-color);
}

/* meta: Info line on cards, numbers on points */
.card-meta, .point .n {
  font-family: var(--meta-font);
  font-size: var(--meta-size);
  font-weight: var(--meta-weight);
  letter-spacing: var(--meta-tracking);
  line-height: var(--meta-leading);
  text-transform: var(--meta-case);
  font-style: var(--meta-style);
  color: var(--meta-color);
}

/* lead: Intro paragraphs */
.lead-text, .intro p, .contact p.lead {
  font-family: var(--lead-font);
  font-size: var(--lead-size);
  font-weight: var(--lead-weight);
  letter-spacing: var(--lead-tracking);
  line-height: var(--lead-leading);
  text-transform: var(--lead-case);
  font-style: var(--lead-style);
  color: var(--lead-color);
}

/* body: Regular text */
.body-text, .card-sub, .brief p, .point p, .user p, .stat .desc, .split li, .list li, .rows p, .demo-box p {
  font-family: var(--body-font);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  letter-spacing: var(--body-tracking);
  line-height: var(--body-leading);
  text-transform: var(--body-case);
  font-style: var(--body-style);
  color: var(--body-color);
}

/* caption: Labels under images */
.media figcaption, .cap, .gallery-cap, .meta dt, .shot figcaption {
  font-family: var(--caption-font);
  font-size: var(--caption-size);
  font-weight: var(--caption-weight);
  letter-spacing: var(--caption-tracking);
  line-height: var(--caption-leading);
  text-transform: var(--caption-case);
  font-style: var(--caption-style);
  color: var(--caption-color);
}

/* tag: Text inside tags */
.tags span {
  font-family: var(--tag-font);
  font-size: var(--tag-size);
  font-weight: var(--tag-weight);
  letter-spacing: var(--tag-tracking);
  line-height: var(--tag-leading);
  text-transform: var(--tag-case);
  font-style: var(--tag-style);
  color: var(--tag-color);
}

/* mix: Highlighted words inside the home name / title (*like this*) */
.mix {
  font-family: var(--mix-font);
  font-size: var(--mix-size);
  font-weight: var(--mix-weight);
  letter-spacing: var(--mix-tracking);
  text-transform: var(--mix-case);
  font-style: var(--mix-style);
  color: var(--mix-color);
}

/* Exceptions that keep their own color */
.statement .w { color: var(--color-text-faint); }
.statement .w.on { color: var(--statement-color); }
.list li b, .split li b, .body-text b { color: var(--color-text); }