/* content-typography.css
 * Phase 2 content-area normalization for legacy pages.
 * Scoped to <main class="main-content"> so nav / footer visual hierarchy stays intact.
 */

@media screen {
  :root {
    --cp-fs-section-title: clamp(1.08rem, 1rem + 0.35vw, 1.28rem);
    --cp-fs-card-title: clamp(1.02rem, 0.98rem + 0.2vw, 1.12rem);
    --cp-fs-meta: 0.84rem;
    --cp-fs-badge: 0.82rem;
    --cp-fs-code: 0.86rem;
  }

  main.main-content {
    font-size: var(--cp-fs-text);
  }

  main.main-content :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, td, th, label, legend, button, input, select, textarea, small, blockquote, figcaption, a) {
    font-family: var(--cp-font-family-base) !important;
  }

  main.main-content :where(code, pre, kbd, samp, .mono, .monospace, .pre, .log, .sql-preview, .code-block, .debug-box, .debug-box pre) {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !important;
    font-size: var(--cp-fs-code) !important;
    line-height: 1.5;
  }

  main.main-content :where(table, .table, .data-table, .grid-table, .archive-table, .list-table) {
    font-size: var(--cp-fs-text) !important;
  }

  main.main-content :where(th, td) {
    font-size: var(--cp-fs-text) !important;
    line-height: 1.55;
  }

  main.main-content :where(input, select, textarea, button, .btn, a.button, .button, .select-wrapper) {
    font-size: var(--cp-fs-control) !important;
  }

  main.main-content :where(.page-title, .module-title, .section-title, .list-title, .tool-title, .form-title, .dialog-title, .modal-title, .block-title) {
    font-size: var(--cp-fs-section-title) !important;
    line-height: 1.3;
  }

  main.main-content :where(.card h3, .panel h3, .sub-container h3, .card-title, .panel-title, .section-card h3) {
    font-size: var(--cp-fs-card-title) !important;
    line-height: 1.35;
  }

  main.main-content :where(.card h4, .panel h4, .sub-container h4, .section-card h4) {
    font-size: var(--cp-fs-h4) !important;
    line-height: 1.35;
  }

  main.main-content :where(.help, .hint, .help-text, .subtext, .meta, .note, .desc, .muted, .caption, .field-note, .table-note, .inline-help, .pc-help, .pc-group-card__date, .pc-date-group__meta) {
    font-size: var(--cp-fs-meta) !important;
    line-height: 1.55;
  }

  main.main-content :where(.badge, .chip, .tag, .pill, .status, .mini-badge, .soft-badge, .hard-badge, .pc-date-group__status, .pc-group-card__foot) {
    font-size: var(--cp-fs-badge) !important;
    line-height: 1.4;
  }

  main.main-content :where(.toolbar, .filters, .search-bar, .field-row, .form-row, .table-toolbar, .action-row, .pc-group-filter__field input) {
    font-size: var(--cp-fs-text);
  }

  main.main-content :where(.metric-label, .stat-label, .summary-label, .eyebrow) {
    font-size: var(--cp-fs-meta) !important;
    line-height: 1.45;
  }

  main.main-content :where(div, span, p, td, th, label, a, small, strong, em)[style*='font-size:15px'],
  main.main-content :where(div, span, p, td, th, label, a, small, strong, em)[style*='font-size: 15px'] {
    font-size: 0.96rem !important;
  }

  main.main-content :where(div, span, p, td, th, label, a, small, strong, em)[style*='font-size:16px'],
  main.main-content :where(div, span, p, td, th, label, a, small, strong, em)[style*='font-size: 16px'] {
    font-size: 1rem !important;
  }

  main.main-content :where(div, span, p, td, th, label, a, small, strong, em)[style*='font-size:17px'],
  main.main-content :where(div, span, p, td, th, label, a, small, strong, em)[style*='font-size: 17px'] {
    font-size: 1.04rem !important;
  }

  main.main-content :where(div, span, p, td, th, label, a, small, strong, em)[style*='font-size:18px'],
  main.main-content :where(div, span, p, td, th, label, a, small, strong, em)[style*='font-size: 18px'] {
    font-size: 1.08rem !important;
  }

  main.main-content :where(div, span, p, td, th, label, a, small, strong, em)[style*='font-size:0.9em'],
  main.main-content :where(div, span, p, td, th, label, a, small, strong, em)[style*='font-size: 0.9em'],
  main.main-content :where(div, span, p, td, th, label, a, small, strong, em)[style*='font-size:.9em'],
  main.main-content :where(div, span, p, td, th, label, a, small, strong, em)[style*='font-size: .9em'] {
    font-size: 0.92rem !important;
  }

  main.main-content :where(div, span, p, td, th, label, a, small, strong, em)[style*='font-size:0.92em'],
  main.main-content :where(div, span, p, td, th, label, a, small, strong, em)[style*='font-size: 0.92em'],
  main.main-content :where(div, span, p, td, th, label, a, small, strong, em)[style*='font-size:.92em'],
  main.main-content :where(div, span, p, td, th, label, a, small, strong, em)[style*='font-size: .92em'] {
    font-size: 0.94rem !important;
  }

  main.main-content :where(div, span, p, td, th, label, a, small, strong, em)[style*='font-size:0.95em'],
  main.main-content :where(div, span, p, td, th, label, a, small, strong, em)[style*='font-size: 0.95em'],
  main.main-content :where(div, span, p, td, th, label, a, small, strong, em)[style*='font-size:.95em'],
  main.main-content :where(div, span, p, td, th, label, a, small, strong, em)[style*='font-size: .95em'] {
    font-size: 0.95rem !important;
  }

  @media (max-width: 768px) {
    :root {
      --cp-fs-section-title: clamp(1.02rem, 0.98rem + 0.28vw, 1.16rem);
      --cp-fs-card-title: clamp(1rem, 0.97rem + 0.16vw, 1.08rem);
      --cp-fs-meta: 0.83rem;
      --cp-fs-badge: 0.80rem;
    }
  }
}