/* ==========================================================================
   Alternivite Design System — Utilities
   Text, font, display, sizing, overflow, positioning, opacity, visibility
   ========================================================================== */

/* ==========================================================================
   TEXT ALIGNMENT
   ========================================================================== */

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

/* ==========================================================================
   TEXT COLORS
   ========================================================================== */

.text-primary  { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-brand    { color: var(--text-brand); }
.text-success  { color: var(--text-success); }
.text-warning  { color: var(--text-warning); }
.text-error    { color: var(--text-error); }
.text-inverse  { color: var(--text-inverse); }

/* ==========================================================================
   FONT SIZE UTILITIES
   ========================================================================== */

.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); }
.text-5xl { font-size: var(--text-5xl); }

/* ==========================================================================
   FONT WEIGHT UTILITIES
   ========================================================================== */

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

/* ==========================================================================
   DISPLAY
   ========================================================================== */

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

/* ==========================================================================
   SIZING
   ========================================================================== */

.w-full     { width: 100%; }
.max-w-full { max-width: 100%; }

/* ==========================================================================
   OVERFLOW
   ========================================================================== */

.overflow-hidden { overflow: hidden; }

/* ==========================================================================
   POSITIONING
   ========================================================================== */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

/* ==========================================================================
   OPACITY
   ========================================================================== */

.opacity-0   { opacity: 0; }
.opacity-50  { opacity: 0.5; }
.opacity-100 { opacity: 1; }

/* ==========================================================================
   POINTER EVENTS
   ========================================================================== */

.pointer-events-none { pointer-events: none; }

/* ==========================================================================
   SCREEN READER ONLY
   Visually hidden but accessible to assistive technology
   ========================================================================== */

.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border-width: 0;
}

/* ==========================================================================
   SKIP LINK — Accessibility
   Hidden until focused via keyboard
   ========================================================================== */

.skip-link {
   position: absolute;
   top: -100%;
   left: var(--space-4);
   z-index: var(--z-max);
   padding: var(--space-3) var(--space-6);
   background-color: var(--bg-brand);
   color: var(--text-inverse);
   font-weight: var(--font-semibold);
   border-radius: 0 0 var(--radius-lg) var(--radius-lg);
   transition: top var(--duration-normal) var(--ease-out);
}

.skip-link:focus {
   top: 0;
}