/* Shared typography roles; layout and business accent colors remain in styles.css. */
:root {
  --font-family: Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --type-display-size: 88px;
  --type-page-size: 64px;
  --type-section-size: 46px;
  --type-card-size: 26px;
  --type-subheading-size: 20px;
  --type-quote-size: 24px;
  --type-lead-size: 18px;
  --type-english-size: 20px;
  --type-body-size: 16px;
  --type-fact-size: 16px;
  --type-action-size: 14px;
  --type-meta-size: 14px;
  --type-label-size: 12px;
  --type-caption-size: 12px;
  --type-nav-size: 14px;
  --type-subnav-size: 14px;
  --type-ticker-size: 12px;
  --weight-display: 800;
  --weight-heading: 700;
  --weight-action: 700;
  --weight-emphasis: 600;
  --weight-body: 400;
  --leading-display: 1.12;
  --leading-page: 1.16;
  --leading-section: 1.3;
  --leading-card: 1.4;
  --leading-subheading: 1.5;
  --leading-body: 1.75;
  --leading-caption: 1.65;
  --tracking-heading: -.04em;
  --text-title: #101112;
  --text-body: #686b70;
  --text-muted: #6b747e;
  --text-accent: var(--blue);
  --text-on-accent: #0b1825;
}

/* Neutral text follows the surface; colored words retain their business accents. */
:is(.section-dark, .service-page, .hero, .photo-statement, .site-header, .site-footer) {
  --text-title: #f1f5f8;
  --text-body: #b6c6d2;
  --text-muted: #9aafbf;
  --text-accent: var(--blue-light);
}
.service-page {
  --text-accent: var(--service-accent);
  --service-text: var(--text-title);
  --service-muted: var(--text-body);
}
.theme-sustainability {
  --text-title: #f1f5f8;
  --text-body: var(--sustainability-muted);
  --text-muted: var(--sustainability-muted);
  --text-accent: var(--sustainability-accent);
}
.program-card { --text-accent: var(--card-accent); }
.connect-banner {
  --text-title: #101112;
  --text-body: #17394c;
  --text-muted: #244c60;
  --text-accent: #101112;
}
.article-prompt, .contact-checklist {
  --text-title: #101112;
  --text-body: #686b70;
  --text-muted: #6b747e;
}
.business-image figcaption, .editorial-photo figcaption {
  --text-muted: #4b5563;
}
.notice-dialog { --text-title: #101112; --text-body: #686b70; --text-muted: #6b747e; }
body:is([data-page=holssi], [data-page=programs], [data-page=living]) .notice-dialog {
  --text-title: #f1f5f8;
  --text-body: #b6c6d2;
  --text-muted: #9aafbf;
}

body {
  font-family: var(--font-family);
  font-size: var(--type-body-size);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  color: var(--text-body);
}
h1, h2, h3, h4 { color: var(--text-title); font-weight: var(--weight-heading); letter-spacing: var(--tracking-heading); }
h1 { font-size: var(--type-page-size); line-height: var(--leading-page); }
h2 { font-size: var(--type-section-size); line-height: var(--leading-section); }
h3 { font-size: var(--type-card-size); line-height: var(--leading-card); }
h4 { font-size: var(--type-subheading-size); line-height: var(--leading-subheading); }
strong, b { font-weight: var(--weight-heading); }
button, input, select, textarea { font-family: inherit; }

.button, .text-link, .masthead-link, .program-card-actions > a, .program-section-nav a, .filter-button {
  font-size: var(--type-action-size);
  font-weight: var(--weight-action);
  line-height: 1.4;
}
.text-link, .masthead-link, .program-card-actions > a { color: var(--text-accent); }
.text-link { border-color: var(--text-accent); }
.program-card-actions > a + a { margin-left: 12px; padding-left: 12px; }
.text-link:hover, .masthead-link:hover, .program-card-actions > a:hover { color: var(--text-title); }
.button:disabled { font-weight: var(--weight-action); }
.site-footer .footer-top > div > p { color: var(--text-title); }
.brand { color: var(--text-title); }
.service-apply-actions .status-note, .application-card .status-note { color: var(--text-muted); }
.eyebrow, .card-category, .card-index, .program-card-index, .week-top { font-weight: var(--weight-heading); }
.page-lead, .masthead-lead, .detail-lead, .stat-label { font-weight: var(--weight-emphasis); line-height: 1.65; }
.large-copy, .article-opening, .article-body blockquote, .manifesto > p, .senses-quote > p { font-weight: var(--weight-emphasis); }
.sustainability-lead strong { font-weight: var(--weight-emphasis); color: var(--text-title); }
.breadcrumb, .hero-bottom > div > span, .card-index, .journal-meta,
.sustainability-index, .manifesto > span, .index, .promise-grid article > span,
.steps li > span, .tag-list, .service-facts dt, .detail-facts dt,
.participation-guide-facts dt, .participation-guide-section h3 > span,
.list-lines article > span, .list-lines > li > span, .need-cards article > span,
.collab-key, .article-prompt span, .program-card-index, .card-category,
.program-card-meta, .session-flow > li > span, .week-top, .week-top .sense-name,
.week-routine small, .value-number, .footer-links strong, .service-kicker, .direction-tabs button {
  font-size: var(--type-label-size);
  font-weight: var(--weight-heading);
}
.journal-meta span, .service-facts small { font-size: var(--type-caption-size); font-weight: var(--weight-body); color: var(--text-muted); }
.detail-facts dd, .service-facts dd { font-size: var(--type-fact-size); font-weight: var(--weight-emphasis); color: var(--text-title); }
.participation-guide-facts dt { color: var(--text-accent); }
.ticker-message strong { font-weight: var(--weight-heading); }
.ticker-message > span { font-weight: var(--weight-body); }
.ticker { color: var(--text-on-accent); }
.faq-list summary { color: var(--text-title); }
.statistic { color: var(--text-title); }

@media (max-width: 950px) {
  :root {
    --type-display-size: 64px;
    --type-page-size: 56px;
    --type-section-size: 36px;
    --type-nav-size: 20px;
    --type-subnav-size: 16px;
  }
}
@media (max-width: 600px) {
  :root {
    --type-display-size: 44px;
    --type-page-size: 44px;
    --type-section-size: 30px;
    --type-card-size: 24px;
    --type-subheading-size: 18px;
    --type-quote-size: 20px;
    --type-lead-size: 16px;
    --type-english-size: 18px;
    --type-ticker-size: 11px;
  }
  .program-card-body { padding-inline: 24px; }
  .hero-bottom { grid-template-columns: 1fr; gap: 18px; }
  .hero-bottom > div { min-width: 0; }
}
@media (max-width: 360px) {
  :root { --type-display-size: 38px; --type-page-size: 38px; }
}