/**
 * MB4 Category 13 — Typography & spacing enforcement on mobile
 * Minimum 15px body, WCAG-safe contrast, safe-area insets, 8pt grid.
 */

:root {
  --mobile-space-xs:  4px;
  --mobile-space-sm:  8px;
  --mobile-space-md:  16px;
  --mobile-space-lg:  24px;
  --mobile-space-xl:  32px;
  --mobile-space-2xl: 48px;
}

@media (max-width: 768px) {
  body {
    font-size: 15px !important;
    line-height: 1.6 !important;
    padding-top:    env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left:   env(safe-area-inset-left, 0px);
    padding-right:  env(safe-area-inset-right, 0px);
  }

  /* Font hierarchy */
  p, span, li, td, th, label { font-size: 15px !important; }
  small, .caption, .muted    { font-size: 13px !important; }
  .micro                     { font-size: 12px !important; }

  h1 { font-size: clamp(1.5rem, 6vw, 2rem)   !important; line-height: 1.3 !important; font-weight: 700 !important; }
  h2 { font-size: clamp(1.25rem, 5vw, 1.75rem) !important; line-height: 1.3 !important; font-weight: 700 !important; }
  h3 { font-size: clamp(1.1rem, 4.5vw, 1.5rem) !important; line-height: 1.3 !important; font-weight: 600 !important; }
  h4 { font-size: 1.1rem !important; line-height: 1.35 !important; font-weight: 600 !important; }

  /* Stat numbers */
  .stat-value, .kpi-value, [data-stat-value] {
    font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
    line-height: 1.1 !important;
    font-variant-numeric: tabular-nums !important;
  }

  /* Contrast tightening — promote tertiary colors to meet AA */
  .text-muted,
  .text-tertiary,
  .secondary-text,
  [class*="text-sec"],
  [class*="text-mut"] {
    color: #B0B0B0 !important;   /* at least 7:1 on #0a0a0a */
  }

  /* Padding rules */
  .content-area,
  .page-container,
  [data-page-root] {
    padding-inline: var(--mobile-space-md) !important;
  }

  .card,
  .panel,
  .sp-card {
    padding: var(--mobile-space-md) !important;
  }

  /* Button min-size 44x44 + comfortable padding */
  button:not(.icon-only):not(.small):not(.ff-close),
  .btn,
  .sp-btn,
  .cf-btn,
  .ff-btn {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 12px 20px !important;
  }

  /* Form vertical gap */
  form > * + *,
  .form-group + .form-group,
  .sp-row + .sp-row {
    margin-top: var(--mobile-space-md) !important;
  }

  /* Reading-width optimizer */
  .readable, .docs-content p, .help-page p, .prose {
    max-width: 65ch;
  }
}