/* Tipografia dos cases.
   Tokens = mesmos nomes da home (`globals.css`) e do Tailwind (`text-body`, `text-item`…).
   Comuns = home. Específicos = só o que a página de case precisa. */

:root {
  --font-display: "DM Serif Display", serif;
  --font-ui: "DM Sans", sans-serif;
  --fs-section: clamp(36px, 4vw, 56px);
  --fs-chapter: clamp(24px, 2.6vw, 32px);
  --fs-metric: 28px;
  --fs-item: 18px;
  --fs-body: 15px;
  --fs-ui: 14px;
  --fs-meta: 13px;
  --fs-label: 11px;
  --lh-body: 1.55;
}

/* —— Comuns (home) —— */
body {
  font-family: var(--font-ui);
  color: var(--text);
}

.reading-nav .back,
.reading-nav-links a,
.btn-outline,
.btn-primary {
  font-size: var(--fs-ui);
  font-weight: 600;
}

.eyebrow,
.chapter-label {
  color: var(--accent);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.case-tag-pill {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

h1.title {
  font-family: var(--font-display);
  font-size: var(--fs-section);
  font-weight: 400;
  letter-spacing: -1.5px;
  line-height: 1.1;
  color: var(--text);
}

.dek,
p.lead,
p.body-text,
.footer-cta p {
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

p.body-text strong,
p.lead strong {
  color: var(--text);
  font-weight: 700;
}

.stat .n,
.dash-item .d-n {
  font-family: var(--font-ui);
  font-size: var(--fs-metric);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--accent);
}

.stat .l,
.dash-item .d-l {
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

figcaption,
.shot-caption {
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--figcaption-color, var(--text-subtle));
}

.stack-name {
  font-size: var(--fs-item);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
}

.stack-cat,
.pillar .p-eyebrow,
.meta-item .k,
.ba-card .ba-label,
.dash-title,
.tool-row .lbl,
.closer .tagline {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.stack-copy,
.footer-cta p {
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.meta-item .v,
.role-line {
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--text);
}

/* —— Específicos de case —— */
h2.chapter-title {
  font-family: var(--font-ui);
  font-size: var(--fs-chapter);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--text);
}

h3.sub-title,
.problem-evolution-title,
.stack-intro,
.mvp-highlight-copy,
.l-title,
.learning-row .l-title,
.step-row .s-title {
  font-family: var(--font-ui);
  font-size: var(--fs-item);
  font-weight: 700;
  font-style: normal;
  letter-spacing: -0.03em;
  color: var(--text);
}

blockquote.pull {
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-item);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.35;
}

.kicker {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Card: título item preto + corpo muted — igual pilares da home */
.module .m-title,
.pillar .p-title,
.principle .pr-title,
.solution-card .sc-title {
  font-size: var(--fs-item);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--text);
}

.module .m-copy,
.pillar .p-copy,
.principle .pr-copy,
.solution-card li,
.ba-card .ba-flow,
.step-row .s-copy,
.l-copy,
.learning-row .l-copy,
.mvp-highlight-copy span {
  color: var(--text-muted);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
}

.module .m-index {
  color: var(--accent);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
}

/* Lista com título (desafio / gargalo) */
ul.bottleneck-list .mark {
  color: var(--accent);
  font-size: var(--fs-ui);
  font-weight: 700;
  line-height: var(--lh-body);
}

ul.bottleneck-list strong {
  display: block;
  margin-bottom: 4px;
  font-size: var(--fs-item);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
}

ul.bottleneck-list span:not(.mark) {
  color: var(--text-muted);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
}

/* Lista simples — mesmo corpo da home */
ul.trust-list li,
ul.checklist li {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

ul.trust-list li strong,
ul.checklist li strong {
  color: var(--text);
}

ul.trust-list .dot,
ul.checklist .check {
  color: var(--accent);
  font-weight: 700;
}

.def-row dt {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.def-row dd {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

.def-row dd strong {
  color: var(--text);
}

.step-row .s-idx {
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  font-weight: 700;
  color: var(--text-subtle);
  line-height: 1.3;
}

.l-idx,
.learning-row .l-idx {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--accent);
  line-height: 1.3;
}

.comparison-title {
  color: var(--text);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tool-tag {
  color: var(--text-muted);
  font-size: var(--fs-label);
  font-weight: 600;
}

.flow-line,
.closer .credit,
p.note {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-subtle);
}

.ba-card.after .ba-label {
  color: var(--accent);
}