:root {
    /* Cores Principais */
    --primary-color: #7c3aed;
    --primary-hover: #6d28d9;
    
    /* Cores de Background */
    --bg-dark: #16112b; /* 191330 */
    --bg-light: #fafafa;
    --bg-input-dark: rgba(0, 0, 0, 0.25);
    --bg-hover: rgba(255, 255, 255, 0.15);
    --bg-modal: rgba(255, 255, 255, 0.05);
    --bg-card: rgba(0, 0, 0, 0.1);
    --bg-box-alysis: rgba(0, 0, 0, 0.15);
    --bg-tooltip: rgba(0, 0, 0, 0.5);
    
    /* Cores de Texto */
    --text-dark: #fafafa;
    --text-light: #191330;
    --text-muted: #333333;
    --text-secondary: rgba(255, 255, 255, 0.8);
    --text-tertiary: rgba(255, 255, 255, 0.7);
    
    /* Cores de Status */
    --error-color: #ef4444;
    --success-color: #28a745;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    
    /* Cores de Emoções */
    --emotion-positive-bg: #131e14;
    --emotion-negative-bg: #1f0d0d;
    --emotion-positive-text: #4CAF50;
    --emotion-negative-text: #c02323;
    --emotion-unknown-bg: #101010;
    --emotion-positive-border: #4CAF50;
    --emotion-negative-border: #c02323;
    --emotion-unknown-border: #666;
    
    /* Cores de Overlay/Shadow */
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-strong: rgba(0, 0, 0, 0.3);
    --overlay-color: rgba(255, 255, 255, 0.05);
    
    /* Cores de Status do Components */
    --success-border: #10B981;
    --error-border: #EF4444;
    --warning-border: #F59E0B;
    --info-border: #3B82F6;
    --border-color: rgba(255, 255, 255, 0.1);
    
    /* Cores de Modal */
    --modal-overlay: rgba(0, 0, 0, 0.8);
    --modal-shadow: rgba(0, 0, 0, 0.5);
    --modal-unknown: #666;
    
    /* Cores de Transcrição */
    --transcription-bg: rgba(255, 255, 255, 0.03);
    --transcription-hover: rgba(255, 255, 255, 0.05);
    
    /* Cores de Áudio */
    --audio-entry-border: rgba(255, 255, 255, 0.1);
    --text-entry-border: rgba(255, 255, 255, 0.1);
    --audio-bg: rgba(255, 255, 255, 0.05);
    --audio-progress-bg: rgba(255, 255, 255, 0.1);
    
    /* Cores de Análise */
    --analysis-bg: rgba(255, 255, 255 0.2);
    --analysis-border: #7c4dff;
    --stress-gradient: linear-gradient(90deg, #4CAF50, #FFC107, #FF5722);
    
    /* Cores de Ações */
    --action-edit: #4CAF50;
    --action-reanalyze: #2196F3;
    --action-delete: #FF5722;
    
    /* Animações */
    --animate-duration: 0.5s;
    --bezier-transition: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Breakpoints */
    --breakpoint-xs: 360px;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    
    /* Adicione estas variáveis ao :root existente */
    --header-actions-width: 100%;
    --header-actions-max-width: 500px;
}
*{
    scrollbar-color: var(--primary-color) var(--bg-dark);
    scrollbar-width: thin;
}
/* Media Queries */
@media (max-width: 1200px) {
    :root {
        --animate-duration: 0.3s;
        --sidebar-width: 240px;
    }
}

@media (max-width: 992px) {
    :root {
        --sidebar-width: 220px;
        --form-max-width: 400px;
        --modal-width: 90%;
        --card-padding: 20px;
    }
}

/* 
@media (max-width: 576px) {
    :root {
        --container-padding: 10px;
        --card-padding: 15px;
        --modal-width: 100%;
        --font-size-base: 13px;
        --font-size-h1: 1.5em;
        --font-size-h2: 1.3em;
        --input-padding: 12px;
        --button-padding: 8px 12px;
        --gap-base: 10px;
    }
}

@media (max-width: 360px) {
    :root {
        --container-padding: 8px;
        --card-padding: 10px;
        --input-padding: 10px;
        --logo-max-width: 180px;
        --font-size-base: 12px;
        --font-size-h1: 1.3em;
        --font-size-h2: 1.2em;
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    :root {
        --container-padding: 10px;
        --sidebar-height: 100%;
        --modal-height: 90vh;
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    :root {
        --shadow-blur: 10px;
        --border-width: 0.5px;
    }
} */

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: var(--bg-dark);
        --text-color: var(--text-dark);
        --border-color: rgba(255, 255, 255, 0.1);
    }
}

/* Light Mode */
@media (prefers-color-scheme: light) {
    :root {
        --bg-color: var(--bg-light);
        --text-color: var(--text-light);
        --border-color: rgba(0, 0, 0, 0.1);
    }
}