/* ==========================================================================
   UTILITIES
   Single-purpose helper classes. Use sparingly — prefer semantic classes.
   ========================================================================== */

/* ----------------------------------------------------------------------
   COLOR (text)
   ---------------------------------------------------------------------- */
.text-white       { color: var(--color-ink-0); }
.text-ink-0       { color: var(--color-ink-0); }
.text-ink-100     { color: var(--color-ink-100); }
.text-ink-200     { color: var(--color-ink-200); }
.text-ink-300     { color: var(--color-ink-300); }
.text-ink-400     { color: var(--color-ink-400); }
.text-ink-500     { color: var(--color-ink-500); }
.text-ink-600     { color: var(--color-ink-600); }
.text-ink-700     { color: var(--color-ink-700); }
.text-ink-800     { color: var(--color-ink-800); }
.text-ink-900     { color: var(--color-ink-900); }
.text-navy        { color: var(--color-navy-700); }
.text-navy-500    { color: var(--color-navy-500); }
.text-navy-700    { color: var(--color-navy-700); }
.text-navy-800    { color: var(--color-navy-800); }
.text-navy-900    { color: var(--color-navy-900); }
.text-red         { color: var(--color-red-700); }
.text-red-600     { color: var(--color-red-600); }
.text-red-700     { color: var(--color-red-700); }
.text-red-800     { color: var(--color-red-800); }
.text-gold        { color: var(--color-gold-500); }
.text-gold-600    { color: var(--color-gold-600); }
.text-gold-700    { color: var(--color-gold-700); }
.text-sage        { color: var(--color-sage-600); }
.text-success     { color: var(--color-success); }
.text-warning     { color: var(--color-warning); }
.text-danger      { color: var(--color-danger); }
.text-current     { color: currentColor; }
.text-inherit     { color: inherit; }

/* ----------------------------------------------------------------------
   BACKGROUND (utility)
   ---------------------------------------------------------------------- */
.bg-navy          { background-color: var(--color-navy-700); }
.bg-navy-500      { background-color: var(--color-navy-500); }
.bg-navy-700      { background-color: var(--color-navy-700); }
.bg-navy-800      { background-color: var(--color-navy-800); }
.bg-navy-900      { background-color: var(--color-navy-900); }
.bg-navy-950      { background-color: var(--color-navy-950); }
.bg-red           { background-color: var(--color-red-700); }
.bg-red-700       { background-color: var(--color-red-700); }
.bg-gold          { background-color: var(--color-gold-500); }
.bg-gold-100      { background-color: var(--color-gold-100); }
.bg-gold-500      { background-color: var(--color-gold-500); }
.bg-sage          { background-color: var(--color-sage-500); }
.bg-sage-50       { background-color: var(--color-sage-50); }
.bg-ink-0         { background-color: var(--color-ink-0); }
.bg-ink-50        { background-color: var(--color-ink-50); }
.bg-ink-100       { background-color: var(--color-ink-100); }

/* ----------------------------------------------------------------------
   POINTER & USER SELECT
   ---------------------------------------------------------------------- */
.cursor-pointer    { cursor: pointer; }
.cursor-default    { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-grab       { cursor: grab; }
.cursor-grabbing   { cursor: grabbing; }
.pointer-none      { pointer-events: none; }
.pointer-auto      { pointer-events: auto; }
.select-none       { user-select: none; -webkit-user-select: none; }
.select-text       { user-select: text; -webkit-user-select: text; }
.select-all        { user-select: all; -webkit-user-select: all; }

/* ----------------------------------------------------------------------
   FOCUS RING UTILITIES
   ---------------------------------------------------------------------- */
.focus-ring:focus-visible {
  outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
  outline-offset: 3px;
}
.focus-ring-inset:focus-visible {
  outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
  outline-offset: -3px;
}

/* ----------------------------------------------------------------------
   OPACITY
   ---------------------------------------------------------------------- */
.opacity-0   { opacity: 0; }
.opacity-10  { opacity: 0.1; }
.opacity-20  { opacity: 0.2; }
.opacity-30  { opacity: 0.3; }
.opacity-40  { opacity: 0.4; }
.opacity-50  { opacity: 0.5; }
.opacity-60  { opacity: 0.6; }
.opacity-70  { opacity: 0.7; }
.opacity-80  { opacity: 0.8; }
.opacity-90  { opacity: 0.9; }
.opacity-100 { opacity: 1; }

/* ----------------------------------------------------------------------
   FILTERS
   ---------------------------------------------------------------------- */
.blur-none { filter: blur(0); }
.blur-sm   { filter: blur(4px); }
.blur-md   { filter: blur(8px); }
.blur-lg   { filter: blur(16px); }
.blur-xl   { filter: blur(24px); }
.brightness-90  { filter: brightness(0.9); }
.brightness-110 { filter: brightness(1.1); }
.saturate-150   { filter: saturate(1.5); }
.grayscale      { filter: grayscale(1); }
.invert         { filter: invert(1); }

/* ----------------------------------------------------------------------
   TRANSFORMS
   ---------------------------------------------------------------------- */
.transform        { transform: translateZ(0); }
.translate-y-1    { transform: translateY(4px); }
.translate-y-2    { transform: translateY(8px); }
.-translate-y-1   { transform: translateY(-4px); }
.-translate-y-2   { transform: translateY(-8px); }
.translate-x-1    { transform: translateX(4px); }
.-translate-x-1   { transform: translateX(-4px); }
.scale-95         { transform: scale(0.95); }
.scale-100        { transform: scale(1); }
.scale-105        { transform: scale(1.05); }
.scale-110        { transform: scale(1.1); }
.rotate-90        { transform: rotate(90deg); }
.rotate-180       { transform: rotate(180deg); }
.-rotate-3        { transform: rotate(-3deg); }
.rotate-3         { transform: rotate(3deg); }

/* ----------------------------------------------------------------------
   OBJECT FIT / POSITION
   ---------------------------------------------------------------------- */
.object-cover     { object-fit: cover; }
.object-contain   { object-fit: contain; }
.object-fill      { object-fit: fill; }
.object-none      { object-fit: none; }
.object-top       { object-position: top; }
.object-bottom    { object-position: bottom; }
.object-center    { object-position: center; }
.object-left      { object-position: left; }
.object-right     { object-position: right; }

/* ----------------------------------------------------------------------
   ISOLATION (stacking context)
   ---------------------------------------------------------------------- */
.isolate          { isolation: isolate; }

/* ----------------------------------------------------------------------
   Z-INDEX
   ---------------------------------------------------------------------- */
.z-0        { z-index: 0; }
.z-10       { z-index: 10; }
.z-100      { z-index: var(--z-sticky); }
.z-banner   { z-index: var(--z-banner); }
.z-dropdown { z-index: var(--z-dropdown); }
.z-modal    { z-index: var(--z-modal); }
.z-toast    { z-index: var(--z-toast); }
.z-tooltip  { z-index: var(--z-tooltip); }
.z-max      { z-index: var(--z-max); }

/* ----------------------------------------------------------------------
   APPEARANCE / SCROLL
   ---------------------------------------------------------------------- */
.scroll-smooth { scroll-behavior: smooth; }
.scroll-auto   { scroll-behavior: auto; }
.scroll-snap-x { scroll-snap-type: x mandatory; overflow-x: auto; }
.scroll-snap-y { scroll-snap-type: y mandatory; overflow-y: auto; }
.snap-start    { scroll-snap-align: start; }
.snap-center   { scroll-snap-align: center; }
.snap-end      { scroll-snap-align: end; }

/* ----------------------------------------------------------------------
   ASPECT RATIOS (extra)
   ---------------------------------------------------------------------- */
.aspect-1 { aspect-ratio: 1; }
.aspect-43 { aspect-ratio: 4 / 3; }
.aspect-169 { aspect-ratio: 16 / 9; }
.aspect-219 { aspect-ratio: 21 / 9; }
.aspect-191-1 { aspect-ratio: 1.91 / 1; }
.aspect-34 { aspect-ratio: 3 / 4; }

/* ----------------------------------------------------------------------
   WIDTH / HEIGHT presets
   ---------------------------------------------------------------------- */
.w-min      { inline-size: min-content; }
.w-max      { inline-size: max-content; }
.w-fit      { inline-size: fit-content; }
.w-half     { inline-size: 50%; }
.w-third    { inline-size: 33.333%; }
.w-2-thirds { inline-size: 66.666%; }
.w-quarter  { inline-size: 25%; }
.w-3-quarters { inline-size: 75%; }

.h-min      { block-size: min-content; }
.h-max      { block-size: max-content; }
.h-fit      { block-size: fit-content; }

.max-w-none { max-inline-size: none; }
.max-w-3xl  { max-inline-size: 48rem; }
.max-w-4xl  { max-inline-size: 56rem; }
.max-w-5xl  { max-inline-size: 64rem; }
.max-w-6xl  { max-inline-size: 72rem; }
.max-w-7xl  { max-inline-size: 80rem; }

/* ----------------------------------------------------------------------
   GAP CHILDREN
   ---------------------------------------------------------------------- */
.children-stack > * + * { margin-block-start: var(--space-4); }
.children-stack-lg > * + * { margin-block-start: var(--space-6); }
.children-stack-sm > * + * { margin-block-start: var(--space-2); }

/* ----------------------------------------------------------------------
   FLOW (similar concept to children-stack, but uses the lobotomized owl)
   ---------------------------------------------------------------------- */
.flow * + * {
  margin-block-start: var(--flow-space, 1em);
}

.flow-tight * + * {
  --flow-space: 0.5em;
}

.flow-loose * + * {
  --flow-space: 1.5em;
}

/* ----------------------------------------------------------------------
   CLAMP UTILITIES (truncate at N lines)
   ---------------------------------------------------------------------- */
.line-clamp-1,
.line-clamp-2,
.line-clamp-3,
.line-clamp-4,
.line-clamp-5,
.line-clamp-6 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.line-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.line-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.line-clamp-4 { -webkit-line-clamp: 4; line-clamp: 4; }
.line-clamp-5 { -webkit-line-clamp: 5; line-clamp: 5; }
.line-clamp-6 { -webkit-line-clamp: 6; line-clamp: 6; }

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

/* ----------------------------------------------------------------------
   VISIBILITY
   ---------------------------------------------------------------------- */
.visible      { visibility: visible; }
.invisible    { visibility: hidden; }

/* ----------------------------------------------------------------------
   PRINT
   ---------------------------------------------------------------------- */
.print-only { display: none; }
@media print {
  .print-only { display: block; }
  .no-print { display: none !important; }
}

/* ----------------------------------------------------------------------
   PRESENTATIONAL DECORATIONS
   ---------------------------------------------------------------------- */
.divider-vertical {
  inline-size: 1px;
  block-size: 1.5rem;
  background: currentColor;
  opacity: 0.3;
}

.divider-vertical-lg {
  inline-size: 1px;
  block-size: 2.5rem;
  background: currentColor;
  opacity: 0.3;
}

.dot {
  display: inline-block;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

.dot--lg { inline-size: 0.75rem; block-size: 0.75rem; }
.dot--gold { background: var(--color-gold-500); }
.dot--red { background: var(--color-red-700); }
.dot--sage { background: var(--color-sage-500); }

/* ----------------------------------------------------------------------
   GRADIENT BACKDROPS
   ---------------------------------------------------------------------- */

.gradient-navy {
  background: linear-gradient(135deg, var(--color-navy-700), var(--color-navy-900));
}

.gradient-navy-red {
  background: linear-gradient(135deg, var(--color-navy-700), var(--color-red-700));
}

.gradient-gold {
  background: linear-gradient(135deg, var(--color-gold-400), var(--color-gold-600));
}

.gradient-desert {
  background: linear-gradient(135deg, var(--color-gold-300), var(--color-red-500));
}

.gradient-night-sky {
  background:
    radial-gradient(at 30% 20%, rgba(245, 200, 80, 0.18), transparent 50%),
    radial-gradient(at 70% 80%, rgba(207, 45, 45, 0.18), transparent 50%),
    linear-gradient(180deg, var(--color-navy-800), var(--color-navy-950));
}

/* ----------------------------------------------------------------------
   FOCUS-WITHIN STATES
   ---------------------------------------------------------------------- */
.fw-ring:focus-within {
  box-shadow: 0 0 0 3px rgba(53, 106, 180, 0.35);
  border-radius: var(--radius-md);
}

/* ----------------------------------------------------------------------
   GROUP HOVER (helper)
   ---------------------------------------------------------------------- */
.group { /* marker class for JS-augmented hover delegation */ }

/* ----------------------------------------------------------------------
   MOTION SAFE / REDUCE
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .motion-safe-fade-in {
    animation: fade-in var(--motion-slow) var(--ease-out) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-reduce-still * {
    animation: none !important;
    transition: none !important;
  }
}

/* ----------------------------------------------------------------------
   DEBUG (toggle via .debug on <html>)
   ---------------------------------------------------------------------- */
html.debug * { outline: 1px dashed rgba(255, 0, 100, 0.2); }
html.debug .container { outline-color: rgba(0, 100, 255, 0.25); }
html.debug section { outline-color: rgba(0, 180, 0, 0.25); }