/* ============================================================
   VARIÁVEIS CSS - ULTRAGAZ CEL DIOGO
   
   Este arquivo contém todas as variáveis de cores.
   Adaptado para o tema Ultragaz Cel Diogo.
   
   @author Roka Digital - https://rokadigital.com.br/contato/
   ============================================================ */

:root {
    /* ===== PALETA ULTRAGAZ - CORES OFICIAIS ===== */
    /* Azul: #243834 | Cyan: #FF8931 | Verde: #FF8931 | Cinza: #BBBCBC | Branco: #FFFFFF | Preto: #000000 */
    
    /* ===== CORES PRIMÁRIAS - ULTRAGAZ (Azul) ===== */
    --color-primary: #243834;
    --color-primary-50: #E9EBEA;
    --color-primary-100: #D3D7D6;
    --color-primary-200: #A7AFAD;
    --color-primary-300: #7B8785;
    --color-primary-400: #4F5F5C;
    --color-primary-500: #243834;
    --color-primary-600: #1E2F2C;
    --color-primary-700: #192724;
    --color-primary-800: #131E1C;
    --color-primary-900: #0E1614;
    
    --color-primary-rgb: 0, 15, 255;
    
    /* ===== CORES SECUNDÁRIAS - ULTRAGAZ (Cyan/Acento) ===== */
    --color-secondary: #FF8931;
    --color-secondary-50: #FFF3EA;
    --color-secondary-100: #FFE7D5;
    --color-secondary-200: #FFCFAC;
    --color-secondary-300: #FFB883;
    --color-secondary-400: #FFA05A;
    --color-secondary-500: #FF8931;
    --color-secondary-600: #D87429;
    --color-secondary-700: #B25F22;
    --color-secondary-800: #8C4B1A;
    --color-secondary-900: #663613;
    
    --color-secondary-rgb: 0, 255, 255;
    
    /* ===== CORES TERCIÁRIAS - ULTRAGAZ (Verde/Sucesso) ===== */
    --color-tertiary: #FF8931;
    --color-tertiary-50: #FFF3EA;
    --color-tertiary-100: #FFE7D5;
    --color-tertiary-200: #FFCFAC;
    --color-tertiary-300: #FFB883;
    --color-tertiary-400: #FFA05A;
    --color-tertiary-500: #FF8931;
    --color-tertiary-600: #D87429;
    --color-tertiary-700: #B25F22;
    --color-tertiary-800: #8C4B1A;
    --color-tertiary-900: #663613;
    
    /* ===== CORES DE TEXTO - ULTRAGAZ ===== */
    --color-text: #000000;
    --color-text-light: #BBBCBC;
    --color-text-muted: #BBBCBC;
    --color-text-dark: #000000;
    
    /* ===== CORES DE FUNDO - ULTRAGAZ ===== */
    --color-background: #FFFFFF;
    --color-background-alt: #FFFFFF;
    --color-background-dark: #BBBCBC;
    
    /* ===== CORES DE BORDA - ULTRAGAZ ===== */
    --color-border: #BBBCBC;
    --color-border-light: #FFFFFF;
    --color-border-dark: #000000;
    
    /* ===== CORES DE STATUS - ULTRAGAZ ===== */
    --color-success: #FF8931;
    --color-success-light: #FFF3EA;
    --color-warning: #FF8931;
    --color-warning-light: #FFF3EA;
    --color-error: #243834;
    --color-error-light: #E9EBEA;
    --color-info: #FF8931;
    --color-info-light: #FFF3EA;
    
    /* ===== CORES ESPECIAIS - ULTRAGAZ ===== */
    --color-whatsapp: #25D366;
    --color-whatsapp-dark: #1DA851;
    --color-phone: #243834;
    
    /* ===== GRADIENTES - ULTRAGAZ ===== */
    --gradient-primary: #243834;
    --gradient-secondary: #FF8931;
    --gradient-accent: #FF8931;
    
    /* ===== SOMBRAS ===== */
    --shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-strong: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-glow: 0 0 40px rgba(var(--color-primary-rgb), 0.3);
    
    /* ===== TIPOGRAFIA ===== */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    
    /* ===== ESPAÇAMENTO ===== */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    
    /* ===== BORDER RADIUS ===== */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
    
    /* ===== TRANSIÇÕES ===== */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
    --transition-bounce: 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* ===== Z-INDEX ===== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}