/* Sanctioned small utility layer: text-style helpers for pages that are otherwise BEM
   (currently: contact/terms/privacy). Not a parallel component system — see utilities.css
   for the spacing/divider counterparts and .ai/DESIGN.md for the full rationale. */
@layer base {
  .heading {
    font-weight: 600;
    letter-spacing: -0.025em;
    color: #111827;

    [data-theme="dark"] & { color: #ffffff; }

    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) & { color: #ffffff; }
    }
  }

  .h1 {
    font-size: 2.25rem;
    line-height: 2.5rem;
    @media (min-width: 768px) { font-size: 3rem; line-height: 1; }
  }

  .h2 {
    font-size: 1.875rem;
    line-height: 2.25rem;
    @media (min-width: 768px) { font-size: 2.25rem; line-height: 2.5rem; }
  }

  .h3 {
    font-size: 1.5rem;
    line-height: 2rem;
    @media (min-width: 768px) { font-size: 1.875rem; line-height: 2.25rem; }
  }

  .h4 {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .text-body {
    font-size: 1rem;
    line-height: 1.625;
    color: #374151;

    [data-theme="dark"] & { color: #d1d5db; }

    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) & { color: #d1d5db; }
    }
  }

  .text-muted {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #6b7280;

    [data-theme="dark"] & { color: #9ca3af; }

    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) & { color: #9ca3af; }
    }
  }
}