/**
 * Variáveis CSS - Design System iFood Parceiros
 * Path: /assets/css/variables.css
 * 
 * Este arquivo deve ser carregado antes de todos os outros CSS
 */

:root {
    /* Cores principais */
    --ifp-color-primary: #ea1d2c;
    --ifp-color-primary-dark: #EB0033;
    --ifp-color-primary-bordo: #890019;
    --ifp-color-secondary: #FFD500;
    --ifp-color-accent: #00754A;
    --ifp-mcolor-begeclaro: #FEF5F0; 
    
    /* Tons de cinza */
    --ifp-color-gray-50: #F9FAFB;
    --ifp-color-gray-100: #F3F4F6;
    --ifp-color-gray-200: #E5E7EB;
    --ifp-color-gray-300: #D1D5DB;
    --ifp-color-gray-400: #9CA3AF;
    --ifp-color-gray-500: #6B7280;
    --ifp-color-gray-600: #4B5563;
    --ifp-color-gray-700: #374151;
    --ifp-color-gray-800: #1F2937;
    --ifp-color-gray-900: #111827;
    
    /* Estados */
    --ifp-color-success: #10B981;
    --ifp-color-warning: #F59E0B;
    --ifp-color-error: #EF4444;
    --ifp-color-info: #3B82F6;
    
    /* Menu Navigation Colors */
    --ifp-menu-bg-mobile: #FEF5F0; /* Bege claro para overlay mobile */
    --ifp-menu-card-moment-bg: #FDF8F1; /* Background card momentos */
    --ifp-menu-text-active: #EA1D2C; /* Texto ativo nos menus */
    --ifp-menu-hover-bg: rgba(0, 0, 0, 0.05); /* Background hover itens */
    
    /* Tipografia */
    --ifp-font-primary: 'TipoiFoodVariable', sans-serif;
    --ifp-font-weight-light: 300;
    --ifp-font-weight-regular: 400;
    --ifp-font-weight-medium: 500;
    --ifp-font-weight-semibold: 600;
    --ifp-font-weight-bold: 700;
    --ifp-font-weight-black: 900;
    
    /* Espaçamentos */
    --ifp-spacing-xs: 0.25rem;   /* 4px */
    --ifp-spacing-sm: 0.5rem;    /* 8px */
    --ifp-spacing-md: 1rem;      /* 16px */
    --ifp-spacing-lg: 1.5rem;    /* 24px */
    --ifp-spacing-xl: 2rem;      /* 32px */
    --ifp-spacing-2xl: 2.5rem;   /* 40px */
    --ifp-spacing-3xl: 3rem;     /* 48px */
    
    /* Raios de borda */
    --ifp-radius-sm: 0.25rem;    /* 4px */
    --ifp-radius-md: 0.5rem;     /* 8px */
    --ifp-radius-lg: 0.75rem;    /* 12px */
    --ifp-radius-xl: 1rem;       /* 16px */
    --ifp-radius-full: 9999px;   /* Círculo */
    
    /* Sombras */
    --ifp-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --ifp-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --ifp-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --ifp-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
    
    /* Transições */
    --ifp-transition-fast: 0.15s ease-out;
    --ifp-transition-normal: 0.3s ease-out;
    --ifp-transition-slow: 0.5s ease-out;
    
    /* Z-index */
    --ifp-z-dropdown: 1000;
    --ifp-z-sticky: 1020;
    --ifp-z-fixed: 1030;
    --ifp-z-modal: 1040;
    --ifp-z-popover: 1050;
    --ifp-z-tooltip: 1060;
    --ifp-z-toast: 1070;
    
    /* Breakpoints (para referência em JS) */
    --ifp-bp-xs: 320px;
    --ifp-bp-sm: 576px;
    --ifp-bp-md: 768px;
    --ifp-bp-lg: 992px;
    --ifp-bp-xl: 1200px;
    --ifp-bp-xxl: 1400px;
}