/**
 * Variáveis CSS – DirectaLog
 * Cores, fonte e espaçamentos. Carregar antes do style.css.
 */
:root {
  /* Cores principais */
  --color-primary: #ff8c00;
  --color-secondary: #302e83;
  --color-secondary-dark: #333280;
  /* Texto e fundos */
  --color-text: #434345;
  --color-text-muted: #58585a;
  --color-text-list: #59595b;
  --color-text-dark: #2f2f30;
  --color-bg-light: #f6f6ffd6;
  --color-white: #fff;
  --color-black: #000;
  /* Fonte (Montserrat via <link> no header) */
  --font-primary: 'Montserrat', sans-serif;
  
  /* Escala de font-size (baseado em rem) */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-13: 0.8125rem;    /* 13px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-17: 1.0625rem;    /* 17px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-19: 1.1875rem;    /* 19px */
  --font-size-xl: 1.25rem;      /* 20px */
  --font-size-27: 1.6875rem;    /* 27px */
  --font-size-2xl: 1.5rem;      /* 24px */
  --font-size-3xl: 1.875rem;   /* 30px */
  --font-size-32: 2rem;         /* 32px */
  --font-size-4xl: 2.25rem;     /* 36px */
  --font-size-40: 2.5rem;       /* 40px */
  --font-size-5xl: 3rem;        /* 48px */
  --font-size-6xl: 3.75rem;     /* 60px */
  
  /* Line-height */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;
  
  /* Font-weight */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* Cores de texto adicionais */
  --color-text-white: #ffffff;
  --color-text-light: #dedede;
  --color-text-gray-light: #d6d6d6;
  --color-text-gray-medium: #8f97a7;
  /* NOTA: --color-text-dark já definido acima (linha 14) como #2f2f30 */
  
  /* Transparências */
  --color-white-50: rgba(255, 255, 255, 0.5);
  --color-white-78: rgba(255, 255, 255, 0.78);
  
  /* Cores específicas (botões, mapas, backgrounds) */
  --color-blue: #2761d8;           /* Azul para botões e mapas */
  --color-green: #2ecc71;         /* Verde para botões */
  --color-bg-gray-light: #f8f9fa; /* Cinza claro para backgrounds */
  --color-bg-gray: #f1f1f1;       /* Cinza para backgrounds */
  --color-bg-blue-dark: #092767;   /* Azul escuro para backgrounds */
  --color-text-blue-dark: #0c1832; /* Azul muito escuro para texto */
  --color-bg-gray-very-light: #f5f7f9; /* Cinza muito claro para backgrounds */
  --color-border-gray: #e5e5e5;    /* Cinza para borders */
  --color-text-gray-light-2: #ccc; /* Cinza claro para texto */
  --color-text-gray-medium-2: #797979; /* Cinza médio para texto */
  --color-white-35: rgba(255, 255, 255, 0.35); /* Branco 35% opacidade */
  --color-white-70: rgba(255, 255, 255, 0.7);  /* Branco 70% opacidade */
  
  /* Espaçamentos */
  --space-section: 100px;
  --space-section-sm: 80px;
  --space-section-xs: 50px;
  --space-section-mobile: 60px;
  --space-title: 70px;
  --space-block: 30px;
  --space-inline: 15px;
  /* Transição padrão */
  --transition: 0.4s ease;
  
  /* ========== BREAKPOINTS PADRONIZADOS ========== */
  /* Sistema unificado de breakpoints baseado no Bootstrap 5 */
  /* Usar com @media (max-width: var(--breakpoint-md)) */
  --breakpoint-xs: 480px;      /* Mobile pequeno */
  --breakpoint-sm: 576px;      /* Mobile (Bootstrap sm) */
  --breakpoint-md: 768px;      /* Tablet (Bootstrap md) - PRINCIPAL */
  --breakpoint-lg: 992px;      /* Desktop pequeno (Bootstrap lg) */
  --breakpoint-xl: 1200px;     /* Desktop (Bootstrap xl) */
  --breakpoint-xxl: 1400px;    /* Desktop grande (Bootstrap xxl) */
  
  /* Breakpoints customizados (evitar usar, preferir os acima) */
  --breakpoint-mobile: 768px;  /* Alias para md - mobile geral */
  --breakpoint-tablet: 991px;  /* Tablet (legado - usar lg quando possível) */
  --breakpoint-desktop: 1199px; /* Desktop médio (legado - usar xl quando possível) */
  
  /* ========== TIPOGRAFIA MOBILE ========== */
  /* Escala reduzida para telas pequenas (aplicar via media query) */
  --font-size-mobile-xs: 0.6875rem;    /* 11px */
  --font-size-mobile-sm: 0.8125rem;    /* 13px */
  --font-size-mobile-base: 0.875rem;   /* 14px */
  --font-size-mobile-lg: 1rem;         /* 16px */
  --font-size-mobile-xl: 1.125rem;     /* 18px */
  --font-size-mobile-2xl: 1.25rem;     /* 20px */
  --font-size-mobile-3xl: 1.5rem;      /* 24px */
  --font-size-mobile-4xl: 1.75rem;     /* 28px */
  --font-size-mobile-5xl: 2rem;        /* 32px */
  --font-size-mobile-6xl: 2.5rem;      /* 40px */

  /* ========== TAMANHOS PADRÃO DE ÍCONES ========== */
  /* Sistema unificado de tamanhos para garantir consistência */
  --icon-size-xs: 24px;      /* Ícones pequenos (listas, bullets) */
  --icon-size-sm: 32px;      /* Ícones pequenos-médios */
  --icon-size-md: 32px;      /* Ícones médios (PADRÃO GERAL - seções) */
  --icon-size-lg: 12px;      /* Ícones grandes (diferenciais, destaques) - reduzido para 12px */
  --icon-size-xl: 80px;      /* Ícones extra grandes (hero, banners) */
  --icon-size-xxl: 96px;     /* Ícones muito grandes (seções especiais) */
}