/* Utility Classes */

@layer utilities {

  /* ===== Typography ===== */

  .font-heading { font-family: var(--font-heading); }
  .font-body { font-family: var(--font-body); }
  .font-mono { font-family: var(--font-mono); }

  .text-xs { font-size: var(--text-xs); }
  .text-sm { font-size: var(--text-sm); }
  .text-base { font-size: var(--text-base); }
  .text-lg { font-size: var(--text-lg); }
  .text-xl { font-size: var(--text-xl); }
  .text-2xl { font-size: var(--text-2xl); }
  .text-3xl { font-size: var(--text-3xl); }

  .font-light { font-weight: 300; }
  .font-normal { font-weight: 400; }
  .font-medium { font-weight: 500; }
  .font-semibold { font-weight: 600; }
  .font-bold { font-weight: 700; }

  .leading-tight { line-height: var(--leading-tight); }
  .leading-snug { line-height: var(--leading-snug); }
  .leading-normal { line-height: var(--leading-normal); }
  .leading-relaxed { line-height: var(--leading-relaxed); }

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

  /* ===== Colors ===== */

  .text-foreground { color: var(--color-foreground); }
  .text-muted { color: var(--color-muted-foreground); }
  .text-accent { color: var(--color-accent-500); }
  .text-primary { color: var(--color-primary-500); }

  /* ===== Spacing ===== */

  .mt-1 { margin-top: var(--space-1); }
  .mt-2 { margin-top: var(--space-2); }
  .mt-3 { margin-top: var(--space-3); }
  .mt-4 { margin-top: var(--space-4); }
  .mt-5 { margin-top: var(--space-5); }
  .mt-6 { margin-top: var(--space-6); }

  .mb-1 { margin-bottom: var(--space-1); }
  .mb-2 { margin-bottom: var(--space-2); }
  .mb-3 { margin-bottom: var(--space-3); }
  .mb-4 { margin-bottom: var(--space-4); }
  .mb-5 { margin-bottom: var(--space-5); }
  .mb-6 { margin-bottom: var(--space-6); }

  .p-1 { padding: var(--space-1); }
  .p-2 { padding: var(--space-2); }
  .p-3 { padding: var(--space-3); }
  .p-4 { padding: var(--space-4); }
  .p-5 { padding: var(--space-5); }

  .gap-1 { gap: var(--space-1); }
  .gap-2 { gap: var(--space-2); }
  .gap-3 { gap: var(--space-3); }
  .gap-4 { gap: var(--space-4); }
  .gap-5 { gap: var(--space-5); }

  /* ===== Layout ===== */

  .flex { display: flex; }
  .flex-col { flex-direction: column; }
  .flex-wrap { flex-wrap: wrap; }
  .items-center { align-items: center; }
  .items-start { align-items: flex-start; }
  .justify-center { justify-content: center; }
  .justify-between { justify-content: space-between; }

  .grid { display: grid; }
  .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

  @media (max-width: 768px) {
    .grid-cols-2,
    .grid-cols-3 {
      grid-template-columns: 1fr;
    }
  }

  /* ===== Visibility ===== */

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /* ===== Prose (for long-form content) ===== */

  .prose {
    max-width: var(--content-width);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-foreground);

    & h1, & h2, & h3, & h4 {
      font-family: var(--font-heading);
      color: var(--color-foreground);
      margin-top: var(--space-6);
      margin-bottom: var(--space-3);
    }

    & h1 { font-size: var(--text-4xl); line-height: var(--leading-tight); }
    & h2 { font-size: var(--text-3xl); line-height: var(--leading-tight); }
    & h3 { font-size: var(--text-2xl); line-height: var(--leading-snug); }
    & h4 { font-size: var(--text-xl); line-height: var(--leading-snug); }

    & p { margin-bottom: var(--space-4); }

    & a {
      color: var(--color-accent-600);
      text-decoration: underline;
      text-underline-offset: 0.15em;

      &:hover { color: var(--color-accent-500); }
    }

    & blockquote {
      border-left: 3px solid var(--color-accent-500);
      padding-left: var(--space-4);
      color: var(--color-muted-foreground);
      font-style: italic;
      margin-block: var(--space-4);
    }

    & code {
      font-family: var(--font-mono);
      font-size: 0.9em;
      background: var(--color-muted);
      padding: 0.15em 0.3em;
      border-radius: var(--radius-sm);
    }

    & pre {
      background: var(--color-primary-900);
      color: var(--color-neutral-100);
      padding: var(--space-4);
      border-radius: var(--radius-lg);
      overflow-x: auto;
      margin-block: var(--space-4);

      & code {
        background: none;
        padding: 0;
        color: inherit;
      }
    }

    & ul, & ol {
      padding-left: var(--space-5);
      margin-bottom: var(--space-4);
    }

    & li { margin-bottom: var(--space-2); }

    & img {
      border-radius: var(--radius-lg);
      margin-block: var(--space-5);
    }

    & hr {
      height: 1px;
      background: var(--color-border);
      border: none;
      margin-block: var(--space-6);
    }
  }
}