@layer utilities {
  .ffr-italic { font-style: italic; }

  .ffr-mt-0 { margin-top: 0; }
  .ffr-mt-1 { margin-top: var(--ffr-space-1); }
  .ffr-mt-2 { margin-top: var(--ffr-space-2); }
  .ffr-mt-3 { margin-top: var(--ffr-space-3); }
  .ffr-mt-4 { margin-top: var(--ffr-space-4); }
  .ffr-mt-6 { margin-top: var(--ffr-space-6); }
  .ffr-mt-8 { margin-top: var(--ffr-space-8); }
  
  .ffr-mb-0 { margin-bottom: 0; }
  .ffr-mb-1 { margin-bottom: var(--ffr-space-1); }
  .ffr-mb-2 { margin-bottom: var(--ffr-space-2); }
  .ffr-mb-3 { margin-bottom: var(--ffr-space-3); }
  .ffr-mb-4 { margin-bottom: var(--ffr-space-4); }
  .ffr-mb-6 { margin-bottom: var(--ffr-space-6); }
  .ffr-mb-8 { margin-bottom: var(--ffr-space-8); }


  /* visibility helpers */
  .ffr-skip-link { opacity: 0; }
  .ffr-mobile-only { display: none; }
  
  /* Generic image size helpers driven by tokens */
  .ffr-img-sm {
    max-width: var(--ffr-size-img-sm);
    width: 100%;
    height: auto;
  }

  .ffr-img-md {
    max-width: var(--ffr-size-img-md);
    width: 100%;
    height: auto;
  }

  .ffr-img-lg {
    max-width: var(--ffr-size-img-lg);
    width: 100%;
    height: auto;
  }
  
  /* Alignment helpers for flex containers */
  .ffr-justify-left {
    justify-content: flex-start;
    text-align: left;
  }

  .ffr-justify-center {
    justify-content: center;
    text-align: center;
  }

  .ffr-justify-right {
    justify-content: flex-end;
    text-align: right;
  }

  @media (max-width: 768px) {
    .ffr-mobile-only { display: inline; }
    .ffr-desktop-only { display: none; }
  }
}