/* Semantic type roles — full stacks consumed by reference specimens + example pages */

/* —— Display —— */
.ts-display,
.display {
  font-family: var(--type-display);
  font-size: var(--text-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  color: var(--color-display);
}

/* —— Page display —— */
.ts-page-display,
.hero-display {
  font-family: var(--type-page-display, var(--type-display));
  font-size: var(--text-page-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-page-display);
  line-height: var(--leading-page-display);
  color: var(--color-display);
}

/* —— H1 —— */
.ts-h1,
.hierarchy-demo h1 {
  font-family: var(--type-h1);
  font-size: var(--text-h1);
  font-weight: var(--weight-h1);
  letter-spacing: var(--tracking-h1);
  line-height: var(--leading-h1);
  color: var(--color-h1);
}

/* —— Page H1 —— */
.ts-page-h1,
.h1 {
  font-family: var(--type-page-h1, var(--type-display));
  font-size: var(--text-page-h1);
  font-weight: var(--weight-h1);
  letter-spacing: var(--tracking-page-h1);
  line-height: var(--leading-page-h1);
  color: var(--color-h1);
}

/* —— H2 —— */
.ts-h2,
.type-lg,
h2.type-lg,
.type-lg.font-display,
h2.type-lg.font-display,
.section-title {
  font-family: var(--type-h2);
  font-size: var(--text-h2);
  font-weight: var(--weight-h2);
  letter-spacing: var(--tracking-h2);
  line-height: var(--leading-h2);
  color: var(--color-h2);
}

/* —— H3 —— */
.ts-h3,
.cost-block h3,
.cohort-block h3,
.lname,
.hsub {
  font-family: var(--type-h3);
  font-size: var(--text-h3);
  font-weight: var(--weight-h3);
  line-height: var(--leading-h3);
  color: var(--color-h3);
}

/* —— Statement —— */
.ts-statement,
.statement-display,
.statement-kicker {
  font-family: var(--type-statement, var(--type-display));
  font-size: var(--text-statement);
  font-weight: var(--weight-statement);
  letter-spacing: var(--tracking-statement);
  line-height: var(--leading-statement);
  color: var(--color-statement);
}

/* —— Overline —— */
.ts-overline,
.eyebrow,
.sect-ey,
.founder-eyebrow,
.eyebrow-light,
.s4-pete-video .attr--light,
.guide .eyebrow,
.hierarchy-demo .eyebrow {
  font-family: var(--type-overline);
  font-size: var(--text-overline);
  font-weight: var(--weight-overline);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--color-overline);
}

.eyebrow-light,
.dark-section .eyebrow {
  color: var(--color-overline-on-dark);
}

.founder-eyebrow {
  color: var(--color-overline-accent, var(--gold));
}

/* —— Quote —— */
.ts-quote,
.quote,
.bq,
.mq,
.dq,
.ctah,
.ceo-pull,
.ceo-statement,
.ceo-video-quote-pull,
.pull-quote--feature p,
.pull-quote--inline p,
.layout-display-led .ceo-profile--danielle .ceo-profile-copy .dq,
.layout-display-led .ceo-mini-copy .mq {
  font-family: var(--type-quote);
  font-size: var(--text-quote);
  font-weight: var(--weight-quote);
  line-height: var(--leading-quote);
}

.ts-quote,
.quote,
.bq,
.mq,
.dq,
.ctah,
.ceo-pull,
.ceo-statement {
  color: var(--color-quote);
}

.dark-section .bq,
.dark-section .mq,
.dark-section .dq,
.dark-section .ceo-video-quote-pull,
.layout-display-led .dark-section .bq,
.layout-display-led .dark-section .mq,
.layout-display-led .dark-section .dq,
.layout-display-led .dark-section .ceo-video-quote-pull,
.layout-display-led .dark-section .ceo-mini-copy .mq,
.layout-display-led .dark-section .ceo-profile--danielle .ceo-profile-copy .dq,
.pull-quote--feature p,
.pull-quote--inline p,
.pull-quote-inset .pull-quote--feature p,
.proof-in-action .pull-quote--inline p,
.cta-section .ctah {
  color: var(--color-quote-on-dark);
}

.ceo-video-quote-pull,
.layout-display-led .ceo-profile--danielle .ceo-profile-copy .dq,
.layout-display-led .ceo-mini-copy .mq,
.dark-section .mini-card .mq,
.dark-section .dan > .dq {
  font-size: var(--text-quote-compact);
  line-height: var(--leading-quote-compact);
  margin-top: 0;
}

/* —— Body —— */
.ts-body,
.lead,
.opener,
.s4body,
.ob,
.pd,
.founder-text,
.cost-block p,
.pctx,
.lbio,
.ctap,
.ctaspoiler,
.hierarchy-demo p,
.card p,
.photo-label span,
.principle span,
.accent-body span,
.graphic-venn-card span,
.type-body,
.footer,
.navlinks a,
aside a {
  font-family: var(--type-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  color: var(--color-body);
}

.lead {
  font-size: var(--text-lead);
}

.opener,
.cost-block p,
.s4body,
.ob,
.pd {
  color: var(--color-body-strong);
}

.dark-section .pctx,
.cta-section .ctap {
  color: var(--color-body-on-dark);
}

.cta-section .ctaspoiler {
  color: var(--white, #fff);
}

/* —— Caption —— */
.ts-caption,
.attr,
.dr,
.mr,
.lcred,
.s4close,
.s5close,
.ntag,
.logo-placeholder {
  font-family: var(--type-caption, var(--type-body));
  font-size: var(--text-caption);
  font-weight: var(--weight-caption);
  line-height: var(--leading-caption);
  color: var(--color-caption);
}

.s4close,
.s5close,
.lcred {
  color: var(--black, #000000);
}

.lcred {
  font-weight: 700;
}

.dr {
  font-weight: 700;
}

.dark-section .attr,
.dark-section .dr,
.dark-section .mr {
  color: var(--color-caption-on-dark);
}

.dark-section .pctx {
  color: var(--color-body-on-dark);
}

/* —— Label —— */
.ts-label,
.pt,
.ol,
.outcome-num,
.mn,
.dn,
.card h3,
.brand,
.page-nav .brand,
nav.page-nav .brand,
.nav .brand,
.dl-brand,
.principle b,
.accent-body b,
.graphic-venn-card b,
.spacing-row b,
.spacing-row code,
.logo-mark-superbia {
  font-family: var(--type-label);
  font-size: var(--text-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-label);
}

.button,
.btn-dark,
.ctabtn,
.dl-header-cta,
.nbtn {
  font-family: var(--type-label);
  font-size: var(--text-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label);
}

.pt,
.ol {
  letter-spacing: var(--tracking-label-wide);
}

.outcome-num,
.mn,
.dn {
  color: var(--color-label-accent);
}

.dark-section .mn,
.dark-section .dn {
  color: var(--color-label-on-dark);
}

.button,
.btn-dark,
.ctabtn,
.dl-header-cta,
.nbtn {
  text-transform: none;
  letter-spacing: normal;
}

.btn-dark,
.dl-header-cta,
.nbtn {
  color: var(--white, #fff);
}

.ctabtn {
  color: var(--ink, var(--black));
}

.hierarchy-demo .button:not(.ghost) {
  background: var(--black);
  color: var(--white, #fff);
}

.hierarchy-demo .button.ghost {
  background: transparent;
  color: var(--ink-50);
}

.hierarchy-demo.dark .button:not(.ghost) {
  background: var(--on-dark, var(--off));
  color: var(--black);
}

.hierarchy-demo.dark .button.ghost {
  background: transparent;
  color: var(--ghost-link-color, var(--on-dark-faint));
  border-color: var(--ghost-link-border, var(--on-dark-border));
}

.hierarchy-demo.dark .button.ghost:hover {
  color: var(--ghost-link-hover, var(--on-dark));
}

.dark-section .attr strong {
  color: var(--color-label-on-dark);
}

/* —— Ghost link (on dark surfaces) —— */
.link-ghost,
.mli a {
  font-family: var(--type-caption, var(--type-body));
  font-size: var(--ghost-link-size);
  color: var(--ghost-link-color);
  border: 0.5px solid var(--ghost-link-border);
  padding: 3px 10px;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
}

.link-ghost:hover,
.mli a:hover {
  color: var(--ghost-link-hover);
}

.dark-section .attr a,
.dark-section .dr a {
  font-size: var(--text-caption);
  color: var(--ghost-link-color);
  text-decoration: none;
}

.dark-section .attr a:hover,
.dark-section .dr a:hover {
  color: var(--ghost-link-hover);
}

/* —— Eyebrow rule —— */
.eyebrow-rule,
.rule {
  width: var(--overline-rule-width);
  height: var(--overline-rule-height);
  background: var(--overline-rule-color);
}

.gold-rule:not(.gold-rule--full) {
  width: var(--overline-rule-width);
}

/* —— Base + misc UI —— */
body {
  font-family: var(--type-body), system-ui, sans-serif;
}

.kicker {
  font-family: var(--type-kicker);
  color: var(--ink-50);
  font-size: 18px;
}

aside p {
  font-family: var(--type-sidebar);
  font-size: var(--text-h3);
  line-height: var(--leading-h2);
  font-weight: var(--weight-h2);
}

.photo-label b {
  font-family: var(--type-photo-title);
  font-size: 24px;
  font-weight: var(--weight-h3);
  color: #fff;
}

.variant-switcher,
.variant-switcher a,
.layout-switcher,
.layout-switcher a {
  font-family: var(--type-body), system-ui, sans-serif;
  font-size: var(--text-overline);
}

.variant-switcher-label {
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-overline);
}

.dl-nav-actions select {
  font-family: var(--type-body), system-ui, sans-serif;
}

/* —— Diagram labels —— */
.venn .lbl,
.venn .lbl-inv,
.holistic-venn .lbl,
.framework-venn .lbl,
.framework-venn .lbl-inv {
  font-family: var(--type-overline);
  font-size: var(--text-overline);
  font-weight: var(--venn-label-weight, var(--weight-overline));
  text-transform: var(--venn-label-transform, uppercase);
  letter-spacing: var(--venn-label-spacing, var(--tracking-overline));
}

.venn .ctr,
.venn .ctr-inv,
.holistic-venn .ctr,
.framework-venn .ctr,
.framework-venn .ctr-inv {
  font-family: var(--type-label);
  font-size: var(--venn-center-font-size, 14px);
  font-weight: var(--venn-center-weight, var(--weight-label));
  font-style: var(--venn-center-style, normal);
  text-transform: uppercase;
  letter-spacing: var(--venn-center-spacing, 0.04em);
}

/* —— Style guide: dark surfaces —— */
.section.dark,
.hierarchy-demo.dark {
  background: var(--dark-section-bg, var(--black));
  color: var(--on-dark, var(--off));
}

.hierarchy-demo.dark {
  border-color: var(--on-dark-border);
}

.section.dark .display,
.section.dark .ts-display {
  color: var(--on-dark, var(--off));
}

.section.dark .eyebrow,
.hierarchy-demo.dark .eyebrow {
  color: var(--color-overline-on-dark);
}

.section.dark .lead {
  color: var(--on-dark-muted);
}

.hierarchy-demo.dark h1 {
  color: var(--on-dark, var(--off));
}

.hierarchy-demo.dark p {
  color: var(--on-dark-muted);
}

.hierarchy-demo.dark .font-meta {
  color: var(--on-dark-faint);
}

/* Italic reserved for hero headline only */
.kicker,
.ts-quote,
.quote,
.bq,
.mq,
.dq,
.ctah,
.s4close,
.s5close,
.lcred,
.statement-kicker,
.ceo-pull,
.ceo-statement,
em,
i {
  font-style: normal;
}

.h1 em,
.hero-display em {
  font-style: italic;
}

/* —— Responsive —— */
@media (max-width: 860px) {
  .ts-h1,
  .hierarchy-demo h1 {
    font-size: var(--text-h2-mobile);
  }
}

@media (max-width: 640px) {
  .h1,
  .ts-page-h1 {
    font-size: var(--text-page-h1-mobile);
  }

  .hero-display,
  .ts-page-display,
  .statement-display,
  .ts-statement {
    font-size: var(--text-page-display-mobile);
  }

  .section-title,
  .ctah {
    font-size: var(--text-h2-mobile);
  }
}