/*
 * Utilities - Spacing & Typography Tokens
 */

:root {
  /* Spacing tokens */
  --inline-space: 1rem;
  --inline-space-half: 0.5rem;
  --inline-space-double: 2rem;

  --block-space: 1rem;
  --block-space-half: 0.5rem;
  --block-space-double: 2rem;

  /* Responsive font sizes */
  --font-small-responsive: clamp(0.875rem, 0.8rem + 0.5vw, 1rem);
  --font-medium-responsive: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  --font-large-responsive: clamp(1.5rem, 1.2rem + 1vw, 2.5rem);
  --font-x-large-responsive: clamp(2rem, 1.5rem + 2vw, 4rem);
}

/* Display/layout utilities */
.flex { display: flex; }
.flex-inline { display: inline-flex; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.grid { display: grid; }

/* Flex item utilities */
.flex-item-grow { flex-grow: 1; }
.flex-item-no-shrink { flex-shrink: 0; }

/* Alignment utilities */
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

/* Containment */
.contain { container-type: inline-size; }