/* =================================================================
   NEXRUMO - CSS VARIABLES
   Design System: Cores, Tipografia, Espaçamentos
   ================================================================= */

:root {
  /* ============================================
     CORES PRINCIPAIS NEXRUMO
     ============================================ */
  
  /* Cor Primária - Turquesa NexRumo */
  --primary: #0f7987;
  --primary-dark: #0a5c68;
  --primary-light: #14a3b8;
  --primary-ultra-light: #e6f5f7;
  
  /* Cores de Suporte */
  --success: #00D4AA;
  --warning: #FFB800;
  --accent: #FF6B00;
  --error: #DC2626;
  
  /* Neutros */
  --text-primary: #1A1A1A;
  --text-secondary: #666666;
  --text-muted: #999999;
  --bg-light: #F5F7FA;
  --bg-white: #FFFFFF;
  --border: #E5E7EB;
  --border-light: #F3F4F6;
  
  /* Gradientes */
  --gradient-primary: linear-gradient(135deg, #0f7987 0%, #14a3b8 100%);
  --gradient-cta: linear-gradient(135deg, #FF6B00 0%, #FF8533 100%);
  --gradient-hero: linear-gradient(135deg, rgba(15,121,135,0.05) 0%, rgba(255,255,255,1) 100%);
  --gradient-dark: linear-gradient(135deg, #0a5c68 0%, #0f7987 100%);
  
  /* Sombras */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-primary: 0 4px 14px rgba(15, 121, 135, 0.3);
  --shadow-accent: 0 4px 14px rgba(255, 107, 0, 0.3);
  
  /* ============================================
     TIPOGRAFIA
     ============================================ */
  
  /* Famílias de Fonte */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Tamanhos de Fonte - Desktop */
  --font-h1: 52px;
  --font-h2: 40px;
  --font-h3: 28px;
  --font-h4: 20px;
  --font-body: 18px;
  --font-small: 14px;
  --font-tiny: 12px;
  
  /* Line Heights */
  --lh-h1: 60px;
  --lh-h2: 48px;
  --lh-h3: 36px;
  --lh-h4: 28px;
  --lh-body: 28px;
  --lh-small: 22px;
  --lh-tiny: 18px;
  
  /* Font Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  
  /* ============================================
     ESPAÇAMENTOS
     ============================================ */
  
  /* Base: 8px */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-15: 120px;
  --space-20: 160px;
  
  /* ============================================
     LAYOUT
     ============================================ */
  
  /* Container */
  --container-max: 1200px;
  --container-padding: 80px;
  --container-padding-mobile: 24px;
  
  /* Seções */
  --section-spacing: 120px;
  --section-spacing-mobile: 80px;
  
  /* Header */
  --header-height: 80px;
  --header-height-mobile: 64px;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* ============================================
     TRANSIÇÕES
     ============================================ */
  
  --transition-fast: 150ms ease-in-out;
  --transition-base: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;
  
  /* ============================================
     Z-INDEX
     ============================================ */
  
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Mobile: < 768px */
@media (max-width: 767px) {
  :root {
    /* Tamanhos de Fonte - Mobile */
    --font-h1: 36px;
    --font-h2: 28px;
    --font-h3: 22px;
    --font-h4: 18px;
    --font-body: 16px;
    --font-small: 14px;
    
    /* Line Heights - Mobile */
    --lh-h1: 42px;
    --lh-h2: 34px;
    --lh-h3: 28px;
    --lh-h4: 26px;
    --lh-body: 26px;
    
    /* Espaçamentos - Mobile */
    --section-spacing: 80px;
  }
}

/* Tablet: 768px - 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    --font-h1: 44px;
    --font-h2: 36px;
    --font-h3: 24px;
    
    --lh-h1: 52px;
    --lh-h2: 42px;
    --lh-h3: 32px;
  }
}

/* ============================================
   DARK MODE SUPPORT (Futuro)
   ============================================ */

@media (prefers-color-scheme: dark) {
  /* Preparado para implementação futura de dark mode */
  :root {
    /* --bg-white: #1A1A1A; */
    /* --text-primary: #FFFFFF; */
  }
}