@layer utilities {
  .row { display: flex; align-items: center; gap: var(--space-2); }
  .row-sm { display: flex; align-items: center; gap: var(--space-1); }
  .row-center { display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
  .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

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

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

  .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-6 { margin-bottom: var(--space-6); }
  .mb-8 { margin-bottom: var(--space-8); }
  .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-6 { margin-top: var(--space-6); }
  .mt-12 { margin-top: var(--space-12); }
  .ml-1 { margin-left: var(--space-1); }
  .ml-2 { margin-left: var(--space-2); }
  .ml-5 { margin-left: var(--space-5); }
  .mr-1 { margin-right: var(--space-1); }
  .mr-2 { margin-right: var(--space-2); }

  .px-2 { padding-inline: var(--space-2); }
  .py-1 { padding-block: var(--space-1); }
  .py-2 { padding-block: var(--space-2); }
  .py-3 { padding-block: var(--space-3); }
  .py-4 { padding-block: var(--space-4); }
  .py-8 { padding-block: var(--space-8); }
  .py-12 { padding-block: var(--space-12); }
  .pb-4 { padding-bottom: var(--space-4); }

  .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-2xl { font-size: var(--text-2xl); }
  .text-3xl { font-size: var(--text-3xl); }
  .text-4xl { font-size: var(--text-4xl); letter-spacing: -0.03em; line-height: 1.05; }

  .text-center { text-align: center; }
  .text-right { text-align: right; }
  .text-subtle { color: var(--muted); }
  .text-danger { color: var(--danger); }
  .text-success { color: var(--success); }
  .text-warning { color: var(--warning); }
  .text-content { max-width: var(--prose-max); }

  .font-normal { font-weight: 400; }
  .font-medium { font-weight: 500; }
  .font-semibold { font-weight: 600; }
  .font-bold { font-weight: 680; }

  .col-400, .col-500, .col-600, .col-700, .col-800 { width: 100%; margin-inline: auto; }
  .col-400 { max-width: 25rem; }
  .col-500 { max-width: 31rem; }
  .col-600 { max-width: 37rem; }
  .col-700 { max-width: 46rem; }
  .col-800 { max-width: 50rem; }

  .bg-subtle { background: var(--inset); }
  .border-b { border-bottom: 1px solid var(--border); }
  .rounded { border-radius: var(--r-2); }
  .pre-wrap { white-space: pre-wrap; }
  .hidden { display: none !important; }

  .icon-xs { width: 0.875rem; height: 0.875rem; }
  .icon-sm { width: 1rem; height: 1rem; }

  .num { font-variant-numeric: tabular-nums lining-nums; }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@layer utilities {
  .narrow-only {
    display: none;
  }

  @media (max-width: 700px) {
    .wide-only {
      display: none;
    }

    .narrow-only {
      display: inline;
    }
  }
}

@layer utilities {
  .is-found {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    animation: found-pulse 2.2s var(--ease);
  }

  @keyframes found-pulse {
    0%, 70% { background: var(--accent-soft); }
    100% { background: transparent; }
  }
}