/**
 * Design Tokens - Juntos na Fé
 * Variáveis CSS universais para toda a aplicação
 * 
 * @author Sistema
 * @version 1.0
 * @date 19/12/2025
 */

:root {
    /* ========================================
       CORES PRIMÁRIAS
       ======================================== */
    
    --primary-50: #f0f0ff;
    --primary-100: #e5e5ff;
    --primary-200: #d1d1ff;
    --primary-300: #b3b3ff;
    --primary-400: #9999ff;
    --primary-500: #6C63FF;  /* COR PRINCIPAL */
    --primary-600: #5A52E0;
    --primary-700: #4840CC;
    --primary-800: #3630B3;
    --primary-900: #242099;

    /* ========================================
       CORES SECUNDÁRIAS
       ======================================== */
    
    --secondary-500: #4CAF50;  /* Verde */
    --accent-500: #FF6B6B;     /* Rosa/Vermelho */
    
    /* ========================================
       GRADIENTES
       ======================================== */
    
    --gradient-primary: linear-gradient(135deg, #6C63FF 0%, #8B7FFF 100%);
    --gradient-accent: linear-gradient(135deg, #FF6B9D 0%, #FF8E8E 100%);
    --gradient-accent-hover: linear-gradient(135deg, #FF5A87 0%, #FF7979 100%);

    /* ========================================
       CORES DE FUNDO (DARK MODE)
       ======================================== */
    
    --bg-primary: #1E1E2E;        /* Fundo principal */
    --bg-secondary: #2D2D44;      /* Superfície elevada */
    --bg-tertiary: #3D3D54;       /* Superfície mais elevada */
    --bg-card: rgba(45, 45, 68, 0.8);  /* Cards com transparência */
    --bg-overlay: rgba(30, 30, 46, 0.95);  /* Overlays/modals */

    /* ========================================
       CORES DE TEXTO
       ======================================== */
    
    --text-primary: #E2E2E2;      /* Texto principal (claro) */
    --text-secondary: #A0A0A0;    /* Texto secundário */
    --text-tertiary: #666666;     /* Texto auxiliar */
    --text-on-primary: #FFFFFF;   /* Texto sobre cor primária */
    
    /* ========================================
       BORDAS
       ======================================== */
    
    --border-primary: rgba(108, 99, 255, 0.2);
    --border-secondary: rgba(108, 99, 255, 0.1);
    --border-light: rgba(255, 255, 255, 0.1);
    
    /* ========================================
       SOMBRAS
       ======================================== */
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.25);
    --shadow-primary: 0 4px 12px rgba(108, 99, 255, 0.3);
    --shadow-primary-lg: 0 8px 24px rgba(108, 99, 255, 0.4);

    /* ========================================
       CORES DE ESTADO
       ======================================== */
    
    --success-bg: rgba(40, 167, 69, 0.1);
    --success-text: #28a745;
    --success-border: rgba(40, 167, 69, 0.2);
    
    --error-bg: rgba(220, 53, 69, 0.1);
    --error-text: #dc3545;
    --error-border: rgba(220, 53, 69, 0.2);
    
    --warning-bg: rgba(255, 193, 7, 0.1);
    --warning-text: #ffc107;
    --warning-border: rgba(255, 193, 7, 0.2);
    
    --info-bg: rgba(23, 162, 184, 0.1);
    --info-text: #17a2b8;
    --info-border: rgba(23, 162, 184, 0.2);

    /* ========================================
       TIPOGRAFIA
       ======================================== */
    
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 28px;
    --font-size-4xl: 32px;
    
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;

    /* ========================================
       ESPAÇAMENTOS
       ======================================== */
    
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --spacing-3xl: 32px;
    --spacing-4xl: 40px;
    --spacing-5xl: 48px;

    /* ========================================
       BORDER RADIUS
       ======================================== */
    
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* ========================================
       TRANSIÇÕES
       ======================================== */
    
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-bounce: 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    /* ========================================
       Z-INDEX
       ======================================== */
    
    --z-dropdown: 50;
    --z-sticky: 100;
    --z-fixed: 200;
    --z-modal-backdrop: 300;
    --z-modal: 400;
    --z-popover: 500;
    --z-tooltip: 600;

    /* ========================================
       BREAKPOINTS (para uso em JS)
       ======================================== */
    
    --breakpoint-sm: 480px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
}

/* ========================================
   CLASSES UTILITÁRIAS
   ======================================== */

/* Espaçamentos */
.m-0 { margin: 0; }
.m-1 { margin: var(--spacing-xs); }
.m-2 { margin: var(--spacing-sm); }
.m-3 { margin: var(--spacing-md); }
.m-4 { margin: var(--spacing-lg); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }

.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-xs); }
.p-2 { padding: var(--spacing-sm); }
.p-3 { padding: var(--spacing-md); }
.p-4 { padding: var(--spacing-lg); }

/* Textos */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-accent { color: var(--primary-500); }
.text-success { color: var(--success-text); }
.text-error { color: var(--error-text); }

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

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

/* Display */
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }

/* Flex */
.flex-column { flex-direction: column; }
.flex-row { flex-direction: row; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }

/* Cores de fundo */
.bg-primary { background: var(--bg-primary); }
.bg-secondary { background: var(--bg-secondary); }
.bg-card { background: var(--bg-card); }

/* Bordas */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.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-primary { box-shadow: var(--shadow-primary); }

/* Transições */
.transition-fast { transition: all var(--transition-fast); }
.transition-base { transition: all var(--transition-base); }
.transition-slow { transition: all var(--transition-slow); }

/* ========================================
   ANIMAÇÕES GLOBAIS
   ======================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUpModal {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes spin {
    to { 
        transform: rotate(360deg); 
    }
}