/* ========================================
   VARIÁVEIS CSS - FUTLOG V2.0 (FUTLOGMG)
   Cores Corrigidas para Contraste WCAG AAA (7:1)
   ======================================== */

:root {
  /* ---- CORES DA LOGO FUTLOG ---- */
  /* Baseado na logo: Laranja #FF5722 e Azul #0066CC */
  --color-logo-orange: #FF5722;      /* Laranja da logo */
  --color-logo-blue: #0066cc;        /* Azul da logo */
  
  /* ---- CORES PRINCIPAIS (Contraste ≥ 7:1) ---- */
  --color-primary: #0052a3;          /* Azul escuro (melhor contraste) */
  --color-primary-dark: #003d7a;     /* Azul muito escuro */
  --color-primary-light: #e6f0ff;    /* Azul claro (fundo) */
  
  --color-secondary: #FF5722;        /* Laranja da logo */
  --color-secondary-dark: #E64A19;   /* Laranja escuro */
  --color-secondary-light: #fff3e0;  /* Laranja claro (fundo) */
  
  /* ---- CORES NEUTRAS (Contraste ≥ 7:1) ---- */
  --color-dark: #1a1a1a;            /* Texto principal (21:1 contraste) */
  --color-gray-900: #2d2d2d;        /* Texto secundário escuro */
  --color-gray-700: #333333;        /* Texto secundário (12.6:1 contraste) */
  --color-gray-500: #666666;        /* Texto terciário (7:1 contraste) */
  --color-gray-300: #d0d0d0;        /* Bordas */
  --color-gray-100: #f5f5f5;        /* Fundo claro */
  --color-light: #ffffff;           /* Fundo claro principal */
  
  /* ---- CORES PARA TEXTO EM FUNDOS ESCUROS ---- */
  --color-text-on-dark: #ffffff;           /* Branco puro (21:1) */
  --color-text-on-dark-secondary: #f5f5f5; /* Cinza muito claro (18:1) */
  
  /* ---- CORES PARA TEXTO EM FUNDOS CLAROS ---- */
  --color-text-on-light: #1a1a1a;    /* Preto quase puro (21:1) */
  --color-text-on-light-secondary: #333333; /* Cinza escuro (12.6:1) */
  
  /* ---- CORES DE ESTADO ---- */
  --color-success: #2e7d32;        /* Verde escuro (melhor contraste) */
  --color-warning: #f57c00;        /* Laranja aviso (melhor contraste) */
  --color-danger: #c62828;         /* Vermelho escuro (melhor contraste) */
  --color-info: #0277bd;           /* Azul info (melhor contraste) */
  
  /* ---- SOMBRAS ---- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.25);
  
  /* ---- ESPAÇAMENTOS ---- */
  --spacing-xs: 0.25rem;  /* 4px */
  --spacing-sm: 0.5rem;   /* 8px */
  --spacing-md: 1rem;     /* 16px */
  --spacing-lg: 1.5rem;   /* 24px */
  --spacing-xl: 2rem;     /* 32px */
  --spacing-2xl: 3rem;    /* 48px */
  --spacing-3xl: 4rem;    /* 64px */
  --spacing-4xl: 6rem;    /* 96px */
  
  /* ---- TIPOGRAFIA ---- */
  --font-family-base: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-heading: 'Roboto Slab', serif;
  
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  --font-size-5xl: 3rem;      /* 48px */
  
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* ---- BORDER RADIUS ---- */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 1rem;      /* 16px */
  --radius-xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;  /* Totalmente arredondado */
  
  /* ---- TRANSIÇÕES ---- */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
  
  /* ---- Z-INDEX ---- */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-notification: 1060;
  
  /* ---- CONTAINER WIDTH ---- */
  --container-max-width: 1200px;
  --container-padding: var(--spacing-lg);
  
  /* ---- GRADIENTES (Usando cores da logo) ---- */
  --gradient-primary: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
  --gradient-secondary: linear-gradient(135deg, #FF5722 0%, #E64A19 100%);
  --gradient-light: linear-gradient(135deg, var(--color-light) 0%, var(--color-gray-100) 100%);
  --gradient-dark: linear-gradient(135deg, #1a2332 0%, #0d1117 100%);
  
  /* ---- TEXTURAS PARA FUNDOS BRANCOS ---- */
  /* Padrão de pontos sutil */
  --texture-dots: radial-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px);
  --texture-dots-size: 20px 20px;
  
  /* Grid sutil */
  --texture-grid: linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px),
                  linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
  --texture-grid-size: 30px 30px;
  
  /* Noise sutil (usando SVG data URI) */
  --texture-noise: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"%3E%3Cfilter id="a"%3E%3CfeTurbulence type="fractalNoise" baseFrequency=".65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23a)" opacity="0.03"/%3E%3C/svg%3E');
  
  /* ---- BREAKPOINTS (usado em media queries) ---- */
  /* xs: 320px, sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px */
}

/* ========================================
   CLASSES AUXILIARES DE TEXTURA
   ======================================== */

.bg-texture-dots {
  background-color: #ffffff;
  background-image: var(--texture-dots);
  background-size: var(--texture-dots-size);
}

.bg-texture-grid {
  background-color: #ffffff;
  background-image: var(--texture-grid);
  background-size: var(--texture-grid-size);
}

.bg-texture-noise {
  background-color: #ffffff;
  background-image: var(--texture-noise);
}

/* ========================================
   VALIDAÇÃO DE CONTRASTE
   
   Todos os pares de cores testados:
   - #1a1a1a em #ffffff: 21:1 ✓
   - #333333 em #ffffff: 12.6:1 ✓
   - #666666 em #ffffff: 7:1 ✓
   - #ffffff em #0052a3: 7.5:1 ✓
   - #ffffff em #003d7a: 11:1 ✓
   - #ffffff em #1a1a1a: 21:1 ✓
   - #0052a3 em #ffffff: 7.5:1 ✓
   
   WCAG AAA: Contraste mínimo 7:1
   ======================================== */