/**
 * Variáveis CSS - Design System C.Vale
 * 
 * ESPECIFICIDADE: Nível 0 - Apenas custom properties
 * PRIORIDADE: Carregamento #1 (primeira importação)
 */

:root {
    /* ===== CORES ===== */
    /* Cores principais baseadas na identidade C.Vale */
    --primary-color: #8B4513;
    --primary-light: #A0522D;
    --primary-dark: #654321;
    --secondary-color: #FF9800;
    --secondary-light: #FFB74D;
    --accent-color: #1E3A8A;
    --accent-light: #3B82F6;
    --accent-dark: #1E40AF;

    /* Cores C.Vale específicas */
    --cvale-blue-primary: #1e4a8c;
    --cvale-blue-light: #2b5aa0;
    --cvale-blue-dark: #164080;
    --cvale-blue-gradient: linear-gradient(135deg, #1e4a8c 0%, #2b5aa0 50%, #1e4a8c 100%);

    /* Cores neutras */
    --white: #FFFFFF;
    --branco: #FFFFFF; /* Alias em português para --white */
    --light-gray: #F8F9FA;
    --gray: #6C757D;
    --dark-gray: #343A40;
    --black: #000000;

    /* Cores de status */
    --success: #28A745;
    --warning: #FFC107;
    --error: #DC3545;
    --info: #17A2B8;

    /* Cores de status alternativas */
    --success-color: #28A745;
    --warning-color: #FFC107;
    --error-color: #DC3545;
    --info-color: #17A2B8;

    /* ===== TIPOGRAFIA ===== */
    --font-primary: 'BrandingSF', Arial, sans-serif;
    --font-secondary: 'Branding', serif;
    --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --font-size-xs: 0.75rem; /* 12px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-base: 1rem; /* 16px */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-xl: 1.25rem; /* 20px */
    --font-size-2xl: 1.5rem; /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem; /* 36px */
    --font-size-5xl: 3rem; /* 48px */

    /* ===== ESPAÇAMENTOS ===== */
    --spacing-xs: 0.25rem; /* 4px */
    --spacing-sm: 0.5rem; /* 8px */
    --spacing-md: 1rem; /* 16px */
    --spacing-lg: 1.5rem; /* 24px */
    --spacing-xl: 2rem; /* 32px */
    --spacing-xxl: 2.5rem; /* 38 px */
    --spacing-2xl: 3rem; /* 48px */
    --spacing-3xl: 4rem; /* 64px */

    /* ===== BREAKPOINTS (para JS) ===== */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;

    /* ===== BORDAS ===== */
    --border-radius: 8px;
    --border-radius-sm: 0.375rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 0.75rem;
    --border-radius-xl: 1rem;

    /* ===== SOMBRAS ===== */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);

    /* ===== TRANSIÇÕES ===== */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* ===== Z-INDEX LAYERS ===== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;
}