@layer utilities {

  /* ── Spacing ──────────────────────────────────────────────── */
  .mt-xs  { margin-block-start: var(--space-xs); }
  .mt-sm  { margin-block-start: var(--space-sm); }
  .mt-md  { margin-block-start: var(--space-md); }
  .mt-lg  { margin-block-start: var(--space-lg); }
  .mt-xl  { margin-block-start: var(--space-xl); }
  .mt-2xl { margin-block-start: var(--space-2xl); }

  .mb-xs  { margin-block-end: var(--space-xs); }
  .mb-sm  { margin-block-end: var(--space-sm); }
  .mb-md  { margin-block-end: var(--space-md); }
  .mb-lg  { margin-block-end: var(--space-lg); }
  .mb-xl  { margin-block-end: var(--space-xl); }
  .mb-2xl { margin-block-end: var(--space-2xl); }

  .pt-xs  { padding-block-start: var(--space-xs); }
  .pt-sm  { padding-block-start: var(--space-sm); }
  .pt-md  { padding-block-start: var(--space-md); }
  .pt-lg  { padding-block-start: var(--space-lg); }

  .pb-xs  { padding-block-end: var(--space-xs); }
  .pb-sm  { padding-block-end: var(--space-sm); }
  .pb-md  { padding-block-end: var(--space-md); }
  .pb-lg  { padding-block-end: var(--space-lg); }

  /* ── Color ────────────────────────────────────────────────── */
  .color-primary { color: var(--color-primary); }
  .color-accent  { color: var(--color-accent); }
  .color-muted   { color: var(--color-muted); }
  .color-white   { color: var(--color-white); }
  .color-dark    { color: var(--color-dark); }

  .bg-primary  { background-color: var(--color-primary); }
  .bg-accent   { background-color: var(--color-accent); }
  .bg-dark     { background-color: var(--color-dark); }
  .bg-surface  { background-color: var(--color-surface); }
  .bg-surface-2 { background-color: var(--color-surface-2); }

  /* ── Typography ───────────────────────────────────────────── */
  .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); }
  .text-4xl  { font-size: var(--text-4xl); }

  .font-normal  { font-weight: 400; }
  .font-medium  { font-weight: 500; }
  .font-semi    { font-weight: 600; }
  .font-bold    { font-weight: 700; }

  .uppercase {
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .leading-tight  { line-height: 1.2; }
  .leading-normal { line-height: 1.65; }

  .no-underline { text-decoration: none; }

  .eyebrow {
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
  }

  /* ── Display ──────────────────────────────────────────────── */
  .d-none   { display: none; }
  .d-block  { display: block; }
  .d-flex   { display: flex; }
  .d-grid   { display: grid; }
  .d-inline { display: inline; }
  .d-inline-flex { display: inline-flex; }

  @media (width < 640px) {
    .hide-mobile { display: none !important; }
  }

  @media (width >= 640px) {
    .show-mobile { display: none !important; }
  }

  @media (width < 960px) {
    .hide-tablet { display: none !important; }
  }

  @media (width >= 960px) {
    .show-tablet { display: none !important; }
  }

  /* ── Borders ──────────────────────────────────────────────── */
  .rounded-sm   { border-radius: var(--radius-sm); }
  .rounded-md   { border-radius: var(--radius-md); }
  .rounded-lg   { border-radius: var(--radius-lg); }
  .rounded-full { border-radius: var(--radius-full); }

  .border-top {
    border-block-start: 1px solid var(--color-border);
    padding-block-start: var(--space-md);
  }

  .border-bottom {
    border-block-end: 1px solid var(--color-border);
    padding-block-end: var(--space-md);
  }

  /* ── Flex shortcuts ───────────────────────────────────────── */
  .flex-col    { flex-direction: column; }
  .flex-1      { flex: 1; }
  .flex-shrink-0 { flex-shrink: 0; }
  .items-start { align-items: flex-start; }
  .items-end   { align-items: flex-end; }
  .self-start  { align-self: flex-start; }
  .self-center { align-self: center; }
  .justify-end { justify-content: flex-end; }

  /* ── Width / Size ─────────────────────────────────────────── */
  .w-full  { inline-size: 100%; }
  .h-full  { block-size: 100%; }
  .max-w-prose { max-inline-size: 70ch; }
  .max-w-narrow { max-inline-size: var(--container-narrow); margin-inline: auto; }

  /* ── Overflow ─────────────────────────────────────────────── */
  .overflow-hidden { overflow: hidden; }
  .overflow-x-auto { overflow-x: auto; }

  /* ── Position ─────────────────────────────────────────────── */
  .relative { position: relative; }
  .absolute { position: absolute; }

  /* ── Opacity ──────────────────────────────────────────────── */
  .opacity-75 { opacity: 0.75; }
  .opacity-50 { opacity: 0.50; }

  /* ── Object fit ───────────────────────────────────────────── */
  .object-cover  { object-fit: cover; }
  .object-center { object-position: center; }

  /* ── Shadow ───────────────────────────────────────────────── */
  .shadow-sm { box-shadow: var(--shadow-sm); }
  .shadow-md { box-shadow: var(--shadow-md); }
  .shadow-lg { box-shadow: var(--shadow-lg); }

  /* ── Focus ring reset for interactive cards ───────────────── */
  .focus-card {
    outline: none;
  }
  .focus-card:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
  }

  /* ── Divider ──────────────────────────────────────────────── */
  .divider {
    border: none;
    border-block-start: 1px solid var(--color-border);
    margin-block: var(--space-lg);
  }

  /* ── Aspect ratios ────────────────────────────────────────── */
  .aspect-video  { aspect-ratio: 16 / 9; }
  .aspect-square { aspect-ratio: 1 / 1; }
  .aspect-photo  { aspect-ratio: 4 / 3; }

  /* ── Truncate ─────────────────────────────────────────────── */
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── Scroll behavior ──────────────────────────────────────── */
  .scroll-smooth { scroll-behavior: smooth; }
}