/* ============================================================
   VARIÁVEIS CSS - CUBOS GÁS
   
   Este arquivo contém todas as variáveis de cores.
   Adaptado para o tema Cubos Gás.
   
   @author Roka Digital - https://rokadigital.com.br/contato/
   ============================================================ */

:root {
    /* ===== PALETA CUBOS GÁS - CORES OFICIAIS ===== */
    /* Azul: #000FFF | Cyan: #00FFFF | Verde: #00FF00 | Cinza: #BBBCBC | Branco: #FFFFFF | Preto: #000000 */
    
    /* ===== CORES PRIMÁRIAS - CUBOS GÁS (Azul) ===== */
    --color-primary: #000FFF;
    --color-primary-50: #E6E8FF;
    --color-primary-100: #CCCDFF;
    --color-primary-200: #9999FF;
    --color-primary-300: #6666FF;
    --color-primary-400: #3333FF;
    --color-primary-500: #000FFF;
    --color-primary-600: #000CCC;
    --color-primary-700: #000999;
    --color-primary-800: #000666;
    --color-primary-900: #000333;
    
    --color-primary-rgb: 0, 15, 255;
    
    /* ===== CORES SECUNDÁRIAS - CUBOS GÁS (Cyan/Acento) ===== */
    --color-secondary: #00FFFF;
    --color-secondary-50: #E6FFFF;
    --color-secondary-100: #CCFFFF;
    --color-secondary-200: #99FFFF;
    --color-secondary-300: #66FFFF;
    --color-secondary-400: #33FFFF;
    --color-secondary-500: #00FFFF;
    --color-secondary-600: #00CCCC;
    --color-secondary-700: #009999;
    --color-secondary-800: #006666;
    --color-secondary-900: #003333;
    
    --color-secondary-rgb: 0, 255, 255;
    
    /* ===== CORES TERCIÁRIAS - CUBOS GÁS (Verde/Sucesso) ===== */
    --color-tertiary: #00FF00;
    --color-tertiary-50: #E6FFE6;
    --color-tertiary-100: #CCFFCC;
    --color-tertiary-200: #99FF99;
    --color-tertiary-300: #66FF66;
    --color-tertiary-400: #33FF33;
    --color-tertiary-500: #00FF00;
    --color-tertiary-600: #00CC00;
    --color-tertiary-700: #009900;
    --color-tertiary-800: #006600;
    --color-tertiary-900: #003300;
    
    /* ===== CORES DE TEXTO - CUBOS GÁS ===== */
    --color-text: #000000;
    --color-text-light: #BBBCBC;
    --color-text-muted: #BBBCBC;
    --color-text-dark: #000000;
    
    /* ===== CORES DE FUNDO - CUBOS GÁS ===== */
    --color-background: #FFFFFF;
    --color-background-alt: #FFFFFF;
    --color-background-dark: #BBBCBC;
    
    /* ===== CORES DE BORDA - CUBOS GÁS ===== */
    --color-border: #BBBCBC;
    --color-border-light: #FFFFFF;
    --color-border-dark: #000000;
    
    /* ===== CORES DE STATUS - CUBOS GÁS ===== */
    --color-success: #00FF00;
    --color-success-light: #E6FFE6;
    --color-warning: #00FFFF;
    --color-warning-light: #E6FFFF;
    --color-error: #000FFF;
    --color-error-light: #E6E8FF;
    --color-info: #00FFFF;
    --color-info-light: #E6FFFF;
    
    /* ===== CORES ESPECIAIS - CUBOS GÁS ===== */
    --color-whatsapp: #00FF00;
    --color-whatsapp-dark: #00CC00;
    --color-phone: #000FFF;
    
    /* ===== GRADIENTES - CUBOS GÁS ===== */
    --gradient-primary: linear-gradient(to right, #000FFF, #00FFFF);
    --gradient-secondary: linear-gradient(to right, #00FF00, #00FFFF);
    --gradient-accent: linear-gradient(to right, #00FF00, #00FFFF);
    
    /* ===== 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;
}