/**
 * ============================================
 * BRODER.ONE - UTILITY CLASSES
 * Classes utilitárias para uso rápido
 * ============================================
 */

/* ========================================
   SPACING UTILITIES
   ======================================== */

/* Margin */
.m-0 { margin: 0; }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }

/* Margin Top */
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }

/* Margin Bottom */
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

/* Padding */
.p-0 { padding: 0; }
.p-2 { padding: var(--space-2); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

/* ========================================
   TEXT UTILITIES
   ======================================== */

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

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-cyan { color: var(--broder-cyan); }
.text-purple { color: var(--broder-purple); }

.text-xs { font-size: var(--font-xs); }
.text-sm { font-size: var(--font-sm); }
.text-base { font-size: var(--font-base); }
.text-lg { font-size: var(--font-lg); }
.text-xl { font-size: var(--font-xl); }
.text-2xl { font-size: var(--font-2xl); }
.text-3xl { font-size: var(--font-3xl); }
.text-4xl { font-size: var(--font-4xl); }

.font-light { font-weight: var(--font-light); }
.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 UTILITIES
   ======================================== */

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

/* ========================================
   FLEXBOX UTILITIES
   ======================================== */

.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* ========================================
   WIDTH & HEIGHT UTILITIES
   ======================================== */

.w-full { width: 100%; }
.w-auto { width: auto; }
.h-full { height: 100%; }
.h-auto { height: auto; }

.max-w-sm { max-width: 640px; }
.max-w-md { max-width: 768px; }
.max-w-lg { max-width: 1024px; }
.max-w-xl { max-width: 1280px; }
.max-w-full { max-width: 100%; }

/* ========================================
   POSITION UTILITIES
   ======================================== */

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

/* ========================================
   BACKGROUND UTILITIES
   ======================================== */

.bg-dark { background-color: var(--bg-dark); }
.bg-dark-light { background-color: var(--bg-dark-light); }
.bg-transparent { background-color: transparent; }

.bg-gradient {
    background: var(--gradient-primary);
}

.bg-gradient-overlay {
    background: var(--gradient-bg-overlay);
}

/* ========================================
   BORDER UTILITIES
   ======================================== */

.border { border: 1px solid var(--border-light); }
.border-0 { border: none; }
.border-subtle { border: 1px solid var(--border-subtle); }

.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius-base); }
.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); }

/* ========================================
   SHADOW UTILITIES
   ======================================== */

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-base); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-none { box-shadow: none; }

.shadow-cyan { box-shadow: var(--shadow-cyan); }
.shadow-purple { box-shadow: var(--shadow-purple); }

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

.opacity-0 { opacity: var(--opacity-0); }
.opacity-10 { opacity: var(--opacity-10); }
.opacity-20 { opacity: var(--opacity-20); }
.opacity-30 { opacity: var(--opacity-30); }
.opacity-50 { opacity: var(--opacity-50); }
.opacity-70 { opacity: var(--opacity-70); }
.opacity-100 { opacity: var(--opacity-100); }

/* ========================================
   TRANSITION UTILITIES
   ======================================== */

.transition { transition: all var(--transition-base); }
.transition-fast { transition: all var(--transition-fast); }
.transition-slow { transition: all var(--transition-slow); }

/* ========================================
   TRANSFORM UTILITIES
   ======================================== */

.translate-y-0 { transform: translateY(0); }
.translate-y-1 { transform: translateY(var(--space-1)); }
.translate-y-2 { transform: translateY(var(--space-2)); }
.-translate-y-2 { transform: translateY(calc(-1 * var(--space-2))); }
.-translate-y-4 { transform: translateY(calc(-1 * var(--space-4))); }

.scale-100 { transform: scale(1); }
.scale-105 { transform: scale(1.05); }
.scale-110 { transform: scale(1.1); }

.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:scale-110:hover { transform: scale(1.1); }
.hover\:-translate-y-2:hover { transform: translateY(calc(-1 * var(--space-2))); }

/* ========================================
   CURSOR UTILITIES
   ======================================== */

.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }

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

.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }

/* ========================================
   Z-INDEX UTILITIES
   ======================================== */

.z-0 { z-index: 0; }
.z-10 { z-index: var(--z-dropdown); }
.z-20 { z-index: 20; }
.z-50 { z-index: var(--z-fixed); }
.z-100 { z-index: var(--z-sticky); }

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */

/* Mobile First */
@media (min-width: 640px) {
    .sm\:hidden { display: none; }
    .sm\:block { display: block; }
    .sm\:flex { display: flex; }
    .sm\:text-lg { font-size: var(--font-lg); }
}

@media (min-width: 768px) {
    .md\:hidden { display: none; }
    .md\:block { display: block; }
    .md\:flex { display: flex; }
    .md\:text-xl { font-size: var(--font-xl); }
    .md\:text-2xl { font-size: var(--font-2xl); }
}

@media (min-width: 1024px) {
    .lg\:hidden { display: none; }
    .lg\:block { display: block; }
    .lg\:flex { display: flex; }
    .lg\:text-2xl { font-size: var(--font-2xl); }
    .lg\:text-3xl { font-size: var(--font-3xl); }
}

/* ========================================
   HOVER UTILITIES
   ======================================== */

.hover\:text-cyan:hover { color: var(--broder-cyan); }
.hover\:text-purple:hover { color: var(--broder-purple); }
.hover\:opacity-80:hover { opacity: var(--opacity-80); }
.hover\:shadow-lg:hover { box-shadow: var(--shadow-lg); }

/* ========================================
   GLASSMORPHISM UTILITY
   ======================================== */

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

/* ========================================
   ANIMATION UTILITIES
   ======================================== */

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.animate-bounce {
    animation: bounce 1s infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

/* ========================================
   ACCESSIBILITY UTILITIES
   ======================================== */

.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;
}

/* Focus visible para acessibilidade */
.focus-visible:focus-visible {
    outline: 2px solid var(--broder-cyan);
    outline-offset: 2px;
}

/* ========================================
   PRINT UTILITIES
   ======================================== */

@media print {
    .print\:hidden { display: none; }
}

/* ========================================
   NOTAS DE USO
   ======================================== */

/*
 * COMO USAR AS UTILITIES:
 * 
 * HTML:
 *   <div class="flex items-center gap-4 p-4">
 *   <p class="text-lg font-semibold text-cyan">
 *   <button class="btn btn-primary hover:scale-105">
 * 
 * COMBINAR CLASSES:
 *   <div class="card p-6 mb-4 hover:-translate-y-2">
 * 
 * RESPONSIVO:
 *   <div class="hidden md:block lg:flex">
 * 
 * EXEMPLO DE PROMPT PARA IA:
 * "Adicione margem superior de 8 e centralize o texto"
 * → A IA adiciona: class="mt-8 text-center"
 */