/**
 * Variáveis CSS - Cloud Gaming Compare
 * Definições de cores, tamanhos e configurações globais
 * Baseado na estrutura da Central de Ajuda Cloud
 */

:root {
    /* === CORES PRINCIPAIS === */
    --cg-primary-dark: #08203C;
    --cg-primary-light: #0a2a4a;
    --cg-accent-green: #B5F711;
    --cg-white: #ffffff;
    --cg-gray-light: #f9fafb;
    --cg-gray-medium: #6b7280;
    --cg-gray-dark: #1f2937;
    
    /* === CORES DE ESTADO === */
    --cg-success: #10b981;
    --cg-error: #ef4444;
    --cg-warning: #f59e0b;
    --cg-info: #3b82f6;
    --cg-disabled: #ccc;
    --cg-disabled-text: #666;
    
    /* === CORES DE BOTÕES === */
    --cg-btn-primary: var(--cg-primary-light);
    --cg-btn-primary-hover: var(--cg-accent-green);
    --cg-btn-primary-text: var(--cg-white);
    --cg-btn-primary-hover-text: var(--cg-primary-dark);
    --cg-btn-disabled: var(--cg-disabled);
    --cg-btn-disabled-text: var(--cg-disabled-text);
    
    /* === TAMANHOS === */
    --cg-border-radius: 12px;
    --cg-border-radius-small: 6px;
    --cg-border-radius-large: 20px;
    --cg-border-radius-round: 50%;
    --cg-container-max-width: 1330px;
    
    /* === ESPAÇAMENTOS === */
    --cg-spacing-xs: 0.25rem;    /* 4px */
    --cg-spacing-sm: 0.5rem;     /* 8px */
    --cg-spacing-md: 1rem;       /* 16px */
    --cg-spacing-lg: 1.5rem;     /* 24px */
    --cg-spacing-xl: 2rem;       /* 32px */
    --cg-spacing-xxl: 3rem;      /* 48px */
    
    /* === FONTES === */
    --cg-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --cg-font-size-xs: 0.75rem;   /* 12px */
    --cg-font-size-sm: 0.875rem;  /* 14px */
    --cg-font-size-base: 1rem;    /* 16px */
    --cg-font-size-lg: 1.125rem;  /* 18px */
    --cg-font-size-xl: 1.25rem;   /* 20px */
    --cg-font-size-2xl: 1.5rem;   /* 24px */
    --cg-font-size-3xl: 1.875rem; /* 30px */
    --cg-font-weight-normal: 400;
    --cg-font-weight-medium: 500;
    --cg-font-weight-semibold: 600;
    --cg-font-weight-bold: 700;
    
    /* === ÍCONES E IMAGENS === */
    --cg-icon-size-sm: 32px;
    --cg-icon-size-md: 56px;
    --cg-icon-size-lg: 64px;
    --cg-icon-border: 3px solid var(--cg-white);
    --cg-icon-padding: 2px;
    
    /* === SOMBRAS === */
    --cg-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --cg-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --cg-shadow-lg: 0 8px 25px rgba(8, 32, 60, 0.15);
    --cg-shadow-icon: 
        0 6px 20px rgba(0, 0, 0, 0.12), 
        0 2px 8px rgba(0, 0, 0, 0.08);
    --cg-shadow-icon-hover:
        0 8px 24px rgba(0, 0, 0, 0.15), 
        0 3px 12px rgba(0, 0, 0, 0.1);
    
    /* === TRANSIÇÕES === */
    --cg-transition-fast: 0.2s ease;
    --cg-transition-normal: 0.3s ease;
    --cg-transition-slow: 0.5s ease;
    --cg-transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* === Z-INDEX === */
    --cg-z-dropdown: 1000;
    --cg-z-modal: 10000;
    --cg-z-tooltip: 10001;
    
    /* === BORDAS === */
    --cg-border-color: #e5e7eb;
    --cg-border-width: 1px;
    --cg-border: var(--cg-border-width) solid var(--cg-border-color);
}