/* ==========================================
   MENSURA - Variables Fix
   Variáveis CSS faltantes e padronizações
   Data: 05/02/2026
   ========================================== */

:root {
    /* Variáveis de Spacing Faltantes */
    --space-xs: var(--space-2);      /* 8px - alias */
    --space-sm: var(--space-4);      /* 16px - alias */
    --space-md: var(--space-6);      /* 24px - alias */
    --space-lg: var(--space-10);     /* 40px - alias */
    --space-xl: var(--space-12);     /* 48px - alias */
    --space-2xl: var(--space-16);    /* 64px - alias */
    --space-3xl: var(--space-20);    /* 80px - alias */
    --space-4xl: var(--space-24);    /* 96px - alias */
    
    /* Variáveis de Background Faltantes */
    --bg: var(--bg-primary);         /* alias para compatibilidade */
    --bg-surface: var(--cloud);      /* superfície elevada */
    --bg-elevated: var(--white);     /* cards e elementos elevados */
    
    /* Variáveis de Texto Faltantes */
    --text-body: var(--text-base);   /* alias para texto corpo */
    --text-small: var(--text-sm);    /* alias para texto pequeno */
    --text-large: var(--text-lg);    /* alias para texto grande */
    --text-medium: var(--steel);     /* alias para cor de texto médio */
    
    /* Variáveis de Cores Faltantes */
    --surface: var(--white);         /* alias para superfície */
    --primary: var(--accent-primary); /* alias para cor primária */
    --primary-hover: var(--accent-hover); /* alias para hover */
    --muted: var(--text-muted);      /* alias para texto muted */
    --text-light: var(--silver);     /* texto mais claro */
    --text-lighter: var(--pearl);    /* texto ainda mais claro */
    
    /* Variáveis de Border Radius Faltantes */
    --radius: var(--radius-default); /* alias padrão */
    --radius-xs: 1px;                /* extra pequeno */
    
    /* Variáveis de Z-Index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* Variáveis de Container Faltantes */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: var(--container-max);
    --container-2xl: var(--container-wide);
    
    /* Opacidade Padronizada */
    --opacity-disabled: 0.5;
    --opacity-subtle: 0.8;
    --opacity-hover: 0.9;
    
    /* Overlay Padrões */
    --overlay-light: rgba(255, 255, 255, 0.03);
    --overlay-medium: rgba(255, 255, 255, 0.05);
    --overlay-strong: rgba(255, 255, 255, 0.1);
    
    --overlay-dark-light: rgba(0, 0, 0, 0.03);
    --overlay-dark-medium: rgba(0, 0, 0, 0.05);
    --overlay-dark-strong: rgba(0, 0, 0, 0.1);
    
    /* Gold Overlays (para backgrounds sutis) */
    --gold-overlay-subtle: rgba(184, 149, 106, 0.03);
    --gold-overlay-light: rgba(184, 149, 106, 0.05);
    --gold-overlay-medium: rgba(184, 149, 106, 0.1);
    --gold-overlay-strong: rgba(184, 149, 106, 0.15);
    
    /* Border Colors Padronizadas */
    --border-subtle: var(--cloud);
    --border-medium: var(--smoke);
    --border-strong: var(--pearl);
    --border-accent: var(--accent-primary);
    --border-accent-hover: var(--accent-hover);
    
    /* Focus States */
    --focus-ring: 0 0 0 3px rgba(184, 149, 106, 0.1);
    --focus-ring-error: 0 0 0 3px rgba(220, 38, 38, 0.1);
    --focus-ring-success: 0 0 0 3px rgba(34, 197, 94, 0.1);
    
    /* Transition Presets */
    --transition-colors: color var(--transition-base), 
                         background-color var(--transition-base), 
                         border-color var(--transition-base);
    
    --transition-transform: transform var(--transition-base);
    
    --transition-all: all var(--transition-base);
    
    /* Breakpoints (para referência em media queries) */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}

/* ==========================================
   UTILITY CLASSES ADICIONAIS
   ========================================== */

/* Texto com opacidade */
.text-opacity-90 { opacity: 0.9; }
.text-opacity-80 { opacity: 0.8; }
.text-opacity-70 { opacity: 0.7; }
.text-opacity-60 { opacity: 0.6; }
.text-opacity-50 { opacity: 0.5; }

/* Backgrounds com overlay dourado */
.bg-gold-subtle { background-color: var(--gold-overlay-subtle); }
.bg-gold-light { background-color: var(--gold-overlay-light); }
.bg-gold-medium { background-color: var(--gold-overlay-medium); }

/* Borders douradas */
.border-gold { border-color: var(--accent-primary); }
.border-gold-light { border-color: var(--gold); opacity: 0.5; }

/* Transitions utilities */
.transition-colors { transition: var(--transition-colors); }
.transition-transform { transition: var(--transition-transform); }
.transition-all { transition: var(--transition-all); }

/* Hover lift effect */
.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Focus states padronizados */
.focus-ring:focus {
    outline: none;
    box-shadow: var(--focus-ring);
}

.focus-ring-error:focus {
    outline: none;
    box-shadow: var(--focus-ring-error);
}

/* Container utilities */
.container-narrow {
    max-width: var(--container-narrow);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.container-wide {
    max-width: var(--container-wide);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}