/* =========================================================
   FILE: 01-dnh-typography.css
   ROLE: Typography system only
   RULES:
   - dùng như API nội bộ
   - không mỗi page tự sáng tác heading style riêng
   - page nào cần khác biệt phải đi qua token hoặc component
   ========================================================= */

/* =========================================================
   01. BASE TEXT DEFAULTS
   ========================================================= */

body {
  font-family: var(--dnh-font-family-base);
  font-size: var(--dnh-font-size-body);
  line-height: var(--dnh-line-height-body);
  font-weight: var(--dnh-font-weight-regular);
  letter-spacing: var(--dnh-letter-spacing-normal);
  color: var(--dnh-color-text);
}

.dnh-text-body {
  font-size: var(--dnh-font-size-body);
  line-height: var(--dnh-line-height-body);
  font-weight: var(--dnh-font-weight-regular);
  color: var(--dnh-color-text);
}

.dnh-text-lead {
  font-size: var(--dnh-font-size-lead);
  line-height: var(--dnh-line-height-lead);
  font-weight: var(--dnh-font-weight-regular);
  color: var(--dnh-color-text-soft);
}

.dnh-text-sm {
  font-size: var(--dnh-font-size-small);
  line-height: var(--dnh-line-height-small);
  color: var(--dnh-color-text-soft);
}

.dnh-text-xs {
  font-size: var(--dnh-font-size-xs);
  line-height: var(--dnh-line-height-small);
  color: var(--dnh-color-text-muted);
}

/* =========================================================
   02. DISPLAY + HEADINGS
   ========================================================= */

.dnh-display,
.dnh-h1,
.dnh-h2,
.dnh-h3,
.dnh-h4,
.dnh-h5,
.dnh-h6 {
  font-family: var(--dnh-font-family-heading);
  font-weight: var(--dnh-font-weight-semibold);
  letter-spacing: var(--dnh-letter-spacing-tight);
  color: var(--dnh-color-text);
  margin: 0;
}

.dnh-display {
  font-size: clamp(40px, 6vw, var(--dnh-font-size-display));
  line-height: var(--dnh-line-height-display);
}

.dnh-h1 {
  font-size: clamp(34px, 5vw, var(--dnh-font-size-h1));
  line-height: var(--dnh-line-height-heading);
}

.dnh-h2 {
  font-size: clamp(28px, 4vw, var(--dnh-font-size-h2));
  line-height: var(--dnh-line-height-heading);
}

.dnh-h3 {
  font-size: clamp(24px, 3vw, var(--dnh-font-size-h3));
  line-height: 1.2;
}

.dnh-h4 {
  font-size: var(--dnh-font-size-h4);
  line-height: 1.25;
}

.dnh-h5 {
  font-size: var(--dnh-font-size-h5);
  line-height: 1.3;
}

.dnh-h6 {
  font-size: var(--dnh-font-size-h6);
  line-height: 1.35;
}

/* =========================================================
   03. OVERLINE / LABEL / META
   ========================================================= */

.dnh-text-overline,
.dnh-text-label,
.dnh-text-meta,
.dnh-text-caption {
  font-size: var(--dnh-font-size-xs);
  line-height: 1.4;
  letter-spacing: var(--dnh-letter-spacing-wide);
  text-transform: uppercase;
}

.dnh-text-overline {
  font-weight: var(--dnh-font-weight-semibold);
  color: var(--dnh-color-primary);
}

.dnh-text-label {
  font-weight: var(--dnh-font-weight-semibold);
  color: var(--dnh-color-text-soft);
}

.dnh-text-meta {
  font-weight: var(--dnh-font-weight-medium);
  color: var(--dnh-color-text-muted);
  text-transform: none;
  letter-spacing: normal;
}

.dnh-text-caption {
  font-weight: var(--dnh-font-weight-medium);
  color: var(--dnh-color-text-soft);
  text-transform: none;
  letter-spacing: normal;
}

/* =========================================================
   04. SECTION HEADING SYSTEM
   ========================================================= */

.dnh-section-heading {
  display: grid;
  gap: var(--dnh-space-3);
  max-width: var(--dnh-measure-reading);
}

.dnh-section-heading__eyebrow {
  font-size: var(--dnh-font-size-xs);
  line-height: 1.4;
  letter-spacing: var(--dnh-letter-spacing-wide);
  text-transform: uppercase;
  font-weight: var(--dnh-font-weight-semibold);
  color: var(--dnh-color-primary);
}

.dnh-section-heading__title {
  font-family: var(--dnh-font-family-heading);
  font-size: clamp(28px, 4vw, var(--dnh-font-size-h2));
  line-height: var(--dnh-line-height-heading);
  font-weight: var(--dnh-font-weight-semibold);
  letter-spacing: var(--dnh-letter-spacing-tight);
  color: var(--dnh-color-text);
  margin: 0;
}

.dnh-section-heading__desc {
  font-size: var(--dnh-font-size-body);
  line-height: var(--dnh-line-height-body);
  color: var(--dnh-color-text-soft);
  max-width: var(--dnh-measure-reading);
  margin: 0;
}

/* =========================================================
   05. HELPER / LEGAL / NOTE TEXT
   ========================================================= */

.dnh-text-helper {
  font-size: var(--dnh-font-size-small);
  line-height: var(--dnh-line-height-small);
  color: var(--dnh-color-text-soft);
}

.dnh-text-help {
  font-size: var(--dnh-font-size-small);
  line-height: var(--dnh-line-height-small);
  color: var(--dnh-color-text-muted);
}

.dnh-text-legal {
  font-size: var(--dnh-font-size-xs);
  line-height: 1.5;
  color: var(--dnh-color-text-muted);
}

.dnh-text-note {
  font-size: var(--dnh-font-size-small);
  line-height: var(--dnh-line-height-small);
  color: var(--dnh-color-text-soft);
}

/* =========================================================
   06. PRICE / METRIC / NUMBER DISPLAY
   ========================================================= */

.dnh-price-lg,
.dnh-price-md,
.dnh-price-sm {
  font-family: var(--dnh-font-family-heading);
  font-weight: var(--dnh-font-weight-semibold);
  letter-spacing: var(--dnh-letter-spacing-tight);
  color: var(--dnh-color-text);
  margin: 0;
}

.dnh-price-lg {
  font-size: var(--dnh-font-size-price-lg);
  line-height: 1.1;
}

.dnh-price-md {
  font-size: var(--dnh-font-size-price-md);
  line-height: 1.15;
}

.dnh-price-sm {
  font-size: var(--dnh-font-size-price-sm);
  line-height: 1.2;
}

.dnh-metric-lg,
.dnh-metric-md,
.dnh-metric-sm {
  font-family: var(--dnh-font-family-heading);
  font-weight: var(--dnh-font-weight-semibold);
  letter-spacing: var(--dnh-letter-spacing-tight);
  color: var(--dnh-color-text);
  margin: 0;
}

.dnh-metric-lg {
  font-size: var(--dnh-font-size-metric-lg);
  line-height: 1.05;
}

.dnh-metric-md {
  font-size: var(--dnh-font-size-metric-md);
  line-height: 1.1;
}

.dnh-metric-sm {
  font-size: var(--dnh-font-size-metric-sm);
  line-height: 1.15;
}

.dnh-price-label,
.dnh-metric-label {
  font-size: var(--dnh-font-size-xs);
  line-height: 1.4;
  font-weight: var(--dnh-font-weight-medium);
  color: var(--dnh-color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--dnh-letter-spacing-wide);
}

/* =========================================================
   07. MODAL / INQUIRY / RESPONSE TITLES
   ========================================================= */

.dnh-modal-title,
.dnh-inquiry-title,
.dnh-response-title {
  font-family: var(--dnh-font-family-heading);
  font-size: var(--dnh-font-size-h3);
  line-height: 1.2;
  font-weight: var(--dnh-font-weight-semibold);
  letter-spacing: var(--dnh-letter-spacing-tight);
  color: var(--dnh-color-text);
  margin: 0;
}

.dnh-modal-subtitle,
.dnh-inquiry-subtitle,
.dnh-response-subtitle {
  font-size: var(--dnh-font-size-body);
  line-height: var(--dnh-line-height-body);
  color: var(--dnh-color-text-soft);
  margin: 0;
}

/* =========================================================
   08. PROSE / LONG-FORM CONTENT
   ========================================================= */

.dnh-prose {
  max-width: var(--dnh-measure-text);
  color: var(--dnh-color-text);
}

.dnh-prose > * + * {
  margin-top: var(--dnh-space-5);
}

.dnh-prose p,
.dnh-prose li {
  font-size: var(--dnh-font-size-body);
  line-height: var(--dnh-line-height-body);
  color: var(--dnh-color-text);
}

.dnh-prose p {
  margin: 0;
}

.dnh-prose ul,
.dnh-prose ol {
  padding-left: 1.25em;
  margin: 0;
}

.dnh-prose li + li {
  margin-top: var(--dnh-space-2);
}

.dnh-prose h1,
.dnh-prose h2,
.dnh-prose h3,
.dnh-prose h4,
.dnh-prose h5,
.dnh-prose h6 {
  font-family: var(--dnh-font-family-heading);
  font-weight: var(--dnh-font-weight-semibold);
  letter-spacing: var(--dnh-letter-spacing-tight);
  color: var(--dnh-color-text);
  margin: 0;
}

.dnh-prose h1 { font-size: var(--dnh-font-size-h1); line-height: var(--dnh-line-height-heading); }
.dnh-prose h2 { font-size: var(--dnh-font-size-h2); line-height: var(--dnh-line-height-heading); }
.dnh-prose h3 { font-size: var(--dnh-font-size-h3); line-height: 1.2; }
.dnh-prose h4 { font-size: var(--dnh-font-size-h4); line-height: 1.25; }

.dnh-prose a {
  color: var(--dnh-color-primary);
  text-decoration: none;
}

.dnh-prose strong {
  font-weight: var(--dnh-font-weight-semibold);
  color: var(--dnh-color-text);
}

.dnh-prose blockquote {
  margin: 0;
  padding-left: var(--dnh-space-4);
  border-left: 2px solid var(--dnh-color-border-strong);
  color: var(--dnh-color-text-soft);
}

/* =========================================================
   09. DARK TEXT VARIANTS
   ========================================================= */

.is-dark,
.dnh-on-dark {
  color: var(--dnh-color-text-inverse);
}

.is-dark .dnh-display,
.is-dark .dnh-h1,
.is-dark .dnh-h2,
.is-dark .dnh-h3,
.is-dark .dnh-h4,
.is-dark .dnh-h5,
.is-dark .dnh-h6,
.is-dark .dnh-section-heading__title,
.is-dark .dnh-modal-title,
.is-dark .dnh-inquiry-title,
.is-dark .dnh-response-title,
.dnh-on-dark .dnh-display,
.dnh-on-dark .dnh-h1,
.dnh-on-dark .dnh-h2,
.dnh-on-dark .dnh-h3,
.dnh-on-dark .dnh-h4,
.dnh-on-dark .dnh-h5,
.dnh-on-dark .dnh-h6,
.dnh-on-dark .dnh-section-heading__title,
.dnh-on-dark .dnh-modal-title,
.dnh-on-dark .dnh-inquiry-title,
.dnh-on-dark .dnh-response-title {
  color: var(--dnh-color-text-inverse);
}

.is-dark .dnh-text-lead,
.is-dark .dnh-text-body,
.is-dark .dnh-section-heading__desc,
.is-dark .dnh-modal-subtitle,
.is-dark .dnh-inquiry-subtitle,
.is-dark .dnh-response-subtitle,
.is-dark .dnh-text-helper,
.is-dark .dnh-text-note,
.dnh-on-dark .dnh-text-lead,
.dnh-on-dark .dnh-text-body,
.dnh-on-dark .dnh-section-heading__desc,
.dnh-on-dark .dnh-modal-subtitle,
.dnh-on-dark .dnh-inquiry-subtitle,
.dnh-on-dark .dnh-response-subtitle,
.dnh-on-dark .dnh-text-helper,
.dnh-on-dark .dnh-text-note {
  color: rgba(245, 241, 234, 0.82);
}

.is-dark .dnh-text-meta,
.is-dark .dnh-text-caption,
.is-dark .dnh-text-help,
.is-dark .dnh-text-legal,
.dnh-on-dark .dnh-text-meta,
.dnh-on-dark .dnh-text-caption,
.dnh-on-dark .dnh-text-help,
.dnh-on-dark .dnh-text-legal {
  color: rgba(245, 241, 234, 0.68);
}

/* =========================================================
   10. MEASURE / ALIGNMENT UTILITIES
   ========================================================= */

.dnh-measure-text { max-width: var(--dnh-measure-text); }
.dnh-measure-reading { max-width: var(--dnh-measure-reading); }
.dnh-measure-narrow { max-width: var(--dnh-measure-narrow); }

.dnh-text-left { text-align: left; }
.dnh-text-center { text-align: center; }
.dnh-text-right { text-align: right; }

.dnh-text-balance { text-wrap: balance; }
.dnh-text-pretty { text-wrap: pretty; }

/* =========================================================
   PROMOTED: HOME TYPOGRAPHY VARIANTS
   Use case:
   - hero editorial display
   - section title 36px / 500
   - card title 20px
   - overline mạnh cho hero / pulse / rules
   ========================================================= */

.dnh-display-hero {
  font-family: var(--dnh-font-family-heading);
  font-size: clamp(42px, 6vw, 68px);
  line-height: 1.05;
  font-weight: var(--dnh-font-weight-regular);
  letter-spacing: -0.04em;
  color: var(--dnh-color-text);
  margin: 0;
}

.dnh-heading-section {
  font-family: var(--dnh-font-family-heading);
  font-size: clamp(28px, 4vw, 36px);
  line-height: 1.2;
  font-weight: var(--dnh-font-weight-medium);
  letter-spacing: -0.5px;
  color: var(--dnh-color-text);
  margin: 0 0 40px;
}

.dnh-heading-card {
  font-family: var(--dnh-font-family-heading);
  font-size: 20px;
  line-height: 1.3;
  font-weight: var(--dnh-font-weight-medium);
  letter-spacing: -0.01em;
  color: var(--dnh-color-text);
  margin: 0 0 12px;
}

.dnh-text-lead-lg {
  font-size: 20px;
  line-height: 1.6;
  font-weight: var(--dnh-font-weight-regular);
  color: var(--dnh-color-text-soft);
}

.dnh-text-overline-strong {
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--dnh-font-weight-bold);
  color: var(--dnh-color-primary);
}

.dnh-display-1 {
  font-family: var(--dnh-font-family-heading);
  font-size: clamp(42px, 6vw, 68px);
  line-height: 1.05;
  font-weight: var(--dnh-font-weight-regular);
  letter-spacing: -0.04em;
  color: var(--dnh-color-text);
  margin: 0;
}

.dnh-measure-lead {
  max-width: 650px;
  margin-inline: auto;
}

.dnh-text-primary {
  color: var(--dnh-color-primary) !important;
}

.dnh-font-medium {
  font-weight: var(--dnh-font-weight-medium) !important;
}

/* =========================================================
   HOME PARITY: DARK CONTEXT SUPPORT FOR PROMOTED TYPOGRAPHY
   Target:
   - hero side rail
   - dark feature panel
   - final CTA band
   Reason:
   - các typography variants promote từ HOME hiện đang có màu sáng/tối chưa đủ chuẩn khi đặt trên nền dark
   - fix đúng ở layer 01, không vá bằng inline CSS
   ========================================================= */

.is-dark .dnh-display-hero,
.dnh-on-dark .dnh-display-hero,
.is-dark .dnh-heading-section,
.dnh-on-dark .dnh-heading-section,
.is-dark .dnh-heading-card,
.dnh-on-dark .dnh-heading-card {
  color: var(--dnh-color-text-inverse);
}

.is-dark .dnh-text-lead-lg,
.dnh-on-dark .dnh-text-lead-lg {
  color: rgba(245, 241, 234, 0.82);
}

.is-dark .dnh-text-overline-strong,
.dnh-on-dark .dnh-text-overline-strong {
  color: var(--dnh-color-primary);
}

.is-dark .dnh-text-sm,
.dnh-on-dark .dnh-text-sm,
.is-dark .dnh-text-body,
.dnh-on-dark .dnh-text-body {
  color: rgba(245, 241, 234, 0.72);
}

.is-dark .dnh-text-label,
.dnh-on-dark .dnh-text-label {
  color: rgba(245, 241, 234, 0.68);
}

/* Final CTA / centered dark band tweak */
.dnh-cta-band .dnh-display-hero,
.dnh-cta-band .dnh-heading-section,
.dnh-card--dark-panel .dnh-heading-section,
.dnh-card--dark-panel .dnh-heading-card {
  color: var(--dnh-color-text-inverse);
}

.dnh-cta-band .dnh-text-body,
.dnh-card--dark-panel .dnh-text-body,
.dnh-card--dark-panel .dnh-text-sm {
  color: rgba(245, 241, 234, 0.72);
}

.dnh-cta-band .dnh-text-overline-strong,
.dnh-card--dark-panel .dnh-text-overline-strong {
  color: var(--dnh-color-primary);
}