/* ============================================================
   VARIÁVEIS CSS — PALETA ULTRAGAZ
   Única paleta aceita neste projeto.

   🔵 Azul:   #000FFF
   🟦 Cian:   #00FFFF
   🟩 Verde:  #00FF00
   ⚪ Branco: #FFFFFF
   ⚫ Preto:  #000000
   ⚙️ Cinza:  #BBBCBC

   @author Roka Digital - https://rokadigital.com.br/contato/
   ============================================================ */

:root {
    /* ===== AZUL ULTRAGAZ (Cor Primária) ===== */
    --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;

    /* ===== CIAN ULTRAGAZ (Cor Secundária / Destaque) ===== */
    --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;

    /* ===== VERDE ULTRAGAZ (Ação / WhatsApp / 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 ESPECIAIS ===== */
    --color-whatsapp:      #00FF00;
    --color-whatsapp-dark: #00CC00;
    --color-phone:         #000FFF;
    --color-accent:        #00FFFF;

    /* ===== TEXTO (Preto e Cinza) ===== */
    --color-text:       #000000;
    --color-text-dark:  #000000;
    --color-text-light: #374151;
    --color-text-muted: #BBBCBC;

    /* ===== FUNDO ===== */
    --color-background:      #FFFFFF;
    --color-background-alt:  #F0F1FF;
    --color-background-dark: #E6E8FF;

    /* ===== BORDAS ===== */
    --color-border:       #CCCDFF;
    --color-border-light: #E6E8FF;
    --color-border-dark:  #9999FF;

    /* ===== STATUS ===== */
    --color-success:       #00FF00;
    --color-success-light: #E6FFE6;
    --color-warning:       #00FFFF;
    --color-warning-light: #E6FFFF;
    --color-error:         #ef4444;
    --color-error-light:   #fee2e2;
    --color-info:          #000FFF;
    --color-info-light:    #E6E8FF;

    /* ===== GRADIENTES ULTRAGAZ ===== */
    --gradient-primary:    linear-gradient(90deg, #000FFF, #00FFFF);
    --gradient-secondary:  linear-gradient(90deg, #00FF00, #00FFFF);
    --gradient-blue-cyan:  linear-gradient(90deg, #000FFF, #00FFFF);
    --gradient-green-cyan: linear-gradient(90deg, #00FF00, #00FFFF);
    --gradient-hero:       linear-gradient(135deg, rgba(0,15,255,0.92) 0%, rgba(0,12,204,0.88) 50%, rgba(0,153,153,0.85) 100%);

    /* ===== 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(0, 15, 255, 0.3);
    --shadow-glow-cyan:  0 0 20px rgba(0, 255, 255, 0.3);
    --shadow-glow-green: 0 0 20px rgba(0, 255, 0, 0.3);

    /* ===== TIPOGRAFIA ===== */
    --font-family:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display:  'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

    /* ===== 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;
}