/* assets/css/utilities.css
 * @layer utilities — single-purpose utility classes
 * ════════════════════════════════════════════════════════════════════
 *
 * Naming convention: semantic where possible, functional where not.
 * All values reference tokens — zero magic numbers.
 * Logical properties (inline/block) used throughout for i18n support.
 *
 * Token sources: §4 --text-*, --weight-*, §5 --space-*, §14 --shadow-*
 * ════════════════════════════════════════════════════════════════════ */


@layer utilities {

  /* ════════════════════════════════════════════════════════════════════
     Typography — size
     ════════════════════════════════════════════════════════════════════ */

  .text-xs  { font-size: var(--text-xs); }
  .text-s   { font-size: var(--text-s); }
  .text-m   { font-size: var(--text-m); }
  .text-l   { font-size: var(--text-l); }
  .text-xl  { font-size: var(--text-xl); }


  /* ════════════════════════════════════════════════════════════════════
     Typography — color
     ════════════════════════════════════════════════════════════════════ */

  .text-muted   { color: var(--text-muted); }
  .text-subtle  { color: var(--text-subtle); }
  .text-primary { color: var(--text-accent); }
  .text-success { color: var(--feedback-success); }
  .text-error   { color: var(--feedback-error); }


  /* ════════════════════════════════════════════════════════════════════
     Font weight
     ════════════════════════════════════════════════════════════════════ */

  .font-regular  { font-weight: var(--weight-regular); }
  .font-medium   { font-weight: var(--weight-medium); }
  .font-semibold { font-weight: var(--weight-semibold); }
  .font-bold     { font-weight: var(--weight-bold); }


  /* ════════════════════════════════════════════════════════════════════
     Text alignment
     ════════════════════════════════════════════════════════════════════ */

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


  /* ════════════════════════════════════════════════════════════════════
     Display
     ════════════════════════════════════════════════════════════════════ */

  .flex         { display: flex; }
  .inline-flex  { display: inline-flex; }
  .block        { display: block; }
  .inline-block { display: inline-block; }
  .hidden       { display: none; }


  /* ════════════════════════════════════════════════════════════════════
     Flex helpers
     ════════════════════════════════════════════════════════════════════ */

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


  /* ════════════════════════════════════════════════════════════════════
     Gap
     ════════════════════════════════════════════════════════════════════ */

  .gap-2xs { gap: var(--space-2xs); }
  .gap-xs  { gap: var(--space-xs); }
  .gap-s   { gap: var(--space-s); }
  .gap-m   { gap: var(--space-m); }
  .gap-l   { gap: var(--space-l); }
  .gap-xl  { gap: var(--space-xl); }
  .gap-2xl { gap: var(--space-2xl); }


  /* ════════════════════════════════════════════════════════════════════
     Margin — block-start (top)
     ════════════════════════════════════════════════════════════════════ */

  .mt-2xs { margin-block-start: var(--space-2xs); }
  .mt-xs  { margin-block-start: var(--space-xs); }
  .mt-s   { margin-block-start: var(--space-s); }
  .mt-m   { margin-block-start: var(--space-m); }
  .mt-l   { margin-block-start: var(--space-l); }
  .mt-xl  { margin-block-start: var(--space-xl); }
  .mt-2xl { margin-block-start: var(--space-2xl); }


  /* ════════════════════════════════════════════════════════════════════
     Margin — block-end (bottom)
     ════════════════════════════════════════════════════════════════════ */

  .mb-2xs { margin-block-end: var(--space-2xs); }
  .mb-xs  { margin-block-end: var(--space-xs); }
  .mb-s   { margin-block-end: var(--space-s); }
  .mb-m   { margin-block-end: var(--space-m); }
  .mb-l   { margin-block-end: var(--space-l); }
  .mb-xl  { margin-block-end: var(--space-xl); }
  .mb-2xl { margin-block-end: var(--space-2xl); }


  /* ════════════════════════════════════════════════════════════════════
     Padding — block-start (top)
     ════════════════════════════════════════════════════════════════════ */

  .pt-2xs { padding-block-start: var(--space-2xs); }
  .pt-xs  { padding-block-start: var(--space-xs); }
  .pt-s   { padding-block-start: var(--space-s); }
  .pt-m   { padding-block-start: var(--space-m); }
  .pt-l   { padding-block-start: var(--space-l); }
  .pt-xl  { padding-block-start: var(--space-xl); }
  .pt-2xl { padding-block-start: var(--space-2xl); }


  /* ════════════════════════════════════════════════════════════════════
     Padding — block-end (bottom)
     ════════════════════════════════════════════════════════════════════ */

  .pb-2xs { padding-block-end: var(--space-2xs); }
  .pb-xs  { padding-block-end: var(--space-xs); }
  .pb-s   { padding-block-end: var(--space-s); }
  .pb-m   { padding-block-end: var(--space-m); }
  .pb-l   { padding-block-end: var(--space-l); }
  .pb-xl  { padding-block-end: var(--space-xl); }
  .pb-2xl { padding-block-end: var(--space-2xl); }


  /* ════════════════════════════════════════════════════════════════════
     Accessibility
     ════════════════════════════════════════════════════════════════════ */

  /* Screen-reader only — visually hidden but in accessibility tree */
  .sr-only,
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }


  /* ════════════════════════════════════════════════════════════════════
     Text truncation
     ════════════════════════════════════════════════════════════════════ */

  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }


  /* ════════════════════════════════════════════════════════════════════
     Border radius
     ════════════════════════════════════════════════════════════════════ */

  .rounded { border-radius: var(--radius-m); }


  /* ════════════════════════════════════════════════════════════════════
     Shadows
     ════════════════════════════════════════════════════════════════════ */

  .shadow-s { box-shadow: var(--shadow-s); }
  .shadow-m { box-shadow: var(--shadow-m); }
  .shadow-l { box-shadow: var(--shadow-l); }


  /* ════════════════════════════════════════════════════════════════════
     Width
     ════════════════════════════════════════════════════════════════════ */

  .w-full { inline-size: 100%; }
  .w-auto { inline-size: auto; }


  /* ════════════════════════════════════════════════════════════════════
     Icon component
     ════════════════════════════════════════════════════════════════════ */

  .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .icon svg {
    width: 100%;
    height: 100%;
  }

  .icon--s  { width: 1rem;    height: 1rem; }
  .icon--m  { width: 1.5rem;  height: 1.5rem; }
  .icon--l  { width: 2rem;    height: 2rem; }


  /* ════════════════════════════════════════════════════════════════════
     Scroll reveal — JS adds .is-visible via IntersectionObserver
     ════════════════════════════════════════════════════════════════════ */

  .reveal {
    opacity: 0;
    transform: translateY(1.75rem);
    transition:
      opacity var(--duration-slow, 0.7s) cubic-bezier(0.16, 1, 0.3, 1),
      transform var(--duration-slow, 0.7s) cubic-bezier(0.16, 1, 0.3, 1);
  }

  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .reveal-delay-1 { transition-delay: 0.08s; }
  .reveal-delay-2 { transition-delay: 0.16s; }
  .reveal-delay-3 { transition-delay: 0.24s; }
  .reveal-delay-4 { transition-delay: 0.32s; }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

}