/* ─────────────────────────────────────────
   AGENCY OS — UTILITY CLASSES
   Classes funcionais de uso global
   ───────────────────────────────────────── */

/* ── DISPLAY ── */
.block  { display: block;  }
.inline { display: inline; }
.hidden { display: none;   }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── POSICIONAMENTO ── */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky;   }
.fixed    { position: fixed;    }

.inset-0  { inset: 0; }
.top-0    { top: 0;   }
.bottom-0 { bottom: 0; }

/* ── OVERFLOW ── */
.overflow-hidden { overflow: hidden;    }
.overflow-auto   { overflow: auto;      }
.clip            { overflow: clip;      }

/* ── TEXTO ── */
.text-center { text-align: center; }
.text-left   { text-align: left;   }
.text-right  { text-align: right;  }

.text-balance  { text-wrap: balance; }
.text-pretty   { text-wrap: pretty;  }

.text-uppercase { text-transform: uppercase; }
.text-caps      { text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: var(--text-xs); }
.text-nowrap    { white-space: nowrap; }

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

/* ── CORES DE TEXTO ── */
.text-brand     { color: var(--color-brand);           }
.text-primary   { color: var(--color-text);            }
.text-secondary { color: var(--color-text-secondary);  }
.text-tertiary  { color: var(--color-text-tertiary);   }
.text-inverse   { color: var(--color-text-inverse);    }
.text-muted     { color: var(--color-text-tertiary);   }

/* ── BACKGROUNDS ── */
.bg-base      { background-color: var(--color-bg);           }
.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-tertiary  { background-color: var(--color-bg-tertiary);  }
.bg-inverse   { background-color: var(--color-bg-inverse);   }
.bg-brand     { background-color: var(--color-brand);        }
.bg-brand-subtle { background-color: var(--color-brand-subtle); }

/* ── GLASSMORPHISM ── */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}

.glass--md {
  background: var(--glass-bg-md);
  backdrop-filter: var(--glass-blur-lg);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  border: 1px solid var(--glass-border);
}

/* ── BORDAS ── */
.border      { border: 1px solid var(--color-border);       }
.border-top  { border-top: 1px solid var(--color-border);   }
.border-subtle { border: 1px solid var(--color-border-subtle); }

.rounded-sm   { border-radius: var(--radius-sm);   }
.rounded-md   { border-radius: var(--radius-md);   }
.rounded-lg   { border-radius: var(--radius-lg);   }
.rounded-xl   { border-radius: var(--radius-xl);   }
.rounded-2xl  { border-radius: var(--radius-2xl);  }
.rounded-full { border-radius: var(--radius-full); }

/* ── SOMBRAS ── */
.shadow-sm    { box-shadow: var(--shadow-sm);       }
.shadow-md    { box-shadow: var(--shadow-md);       }
.shadow-lg    { box-shadow: var(--shadow-lg);       }
.shadow-brand { box-shadow: var(--shadow-brand-md); }

/* ── LARGURA ── */
.w-full  { width: 100%;  }
.w-auto  { width: auto;  }
.h-full  { height: 100%; }
.h-screen { height: 100vh; min-height: 100dvh; }

/* ── OPACIDADE ── */
.opacity-0   { opacity: 0;    }
.opacity-50  { opacity: 0.5;  }
.opacity-75  { opacity: 0.75; }
.opacity-100 { opacity: 1;    }

/* ── POINTER ── */
.pointer-none { pointer-events: none; }

/* ── ANIMAÇÃO BASE (para GSAP) ── */
.will-fade      { opacity: 0; }
.will-slide-up  { opacity: 0; transform: translateY(40px); }
.will-slide-in  { opacity: 0; transform: translateX(-40px); }
.will-scale     { opacity: 0; transform: scale(0.92); }

/* ── GRADIENTE DE TEXTO ── */
.gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── SEPARADOR ── */
.divider {
  width: 100%;
  height: 1px;
  background: var(--color-border);
}

/* ── ASPECT RATIOS ── */
.aspect-square   { aspect-ratio: 1 / 1;   }
.aspect-video    { aspect-ratio: 16 / 9;  }
.aspect-portrait { aspect-ratio: 3 / 4;   }
.aspect-wide     { aspect-ratio: 21 / 9;  }

/* ── OBJETO FIT ── */
.object-cover   { object-fit: cover;   }
.object-contain { object-fit: contain; }
.object-center  { object-position: center; }