/**
 * Digital Center Lab - Variáveis CSS Globais
 * Todas as variáveis CSS do projeto centralizadas
 * Baseado na identidade visual: tema dark, azul marinho, moderno
 */

:root {
  /* =====================================
     CORES PRIMÁRIAS (Identidade Visual)
     ===================================== */
  --primary-color: #1B4F72;           /* Azul marinho - cor principal */
  --primary-dark: #154360;            /* Azul marinho escuro */
  --primary-light: #5DADE2;           /* Azul claro - complementar */
  --primary-lighter: #85C1E9;         /* Azul mais claro */
  
  /* =====================================
     CORES SECUNDÁRIAS E NEUTRAS
     ===================================== */
  --secondary-color: #2C3E50;         /* Cinza escuro para textos */
  --accent-color: #FF6B35;            /* Cor de destaque (alaranjado) */
  
  /* Cores neutras - tema dark */
  --white: #FFFFFF;
  --black: #000000;
  --gray-100: #F8F9FA;
  --gray-200: #E9ECEF;
  --gray-300: #DEE2E6;
  --gray-400: #CED4DA;
  --gray-500: #ADB5BD;
  --gray-600: #6C757D;
  --gray-700: #495057;
  --gray-800: #343A40;
  --gray-900: #212529;
  
  /* Dark theme backgrounds */
  --dark-bg-primary: #1A1A1A;         /* Background principal dark */
  --dark-bg-secondary: #2C2C2C;       /* Background secundário dark */
  --dark-bg-tertiary: #3A3A3A;        /* Background terciário dark */
  --dark-text-primary: #FFFFFF;       /* Texto principal dark */
  --dark-text-secondary: #BDC3C7;     /* Texto secundário dark */
  
  /* =====================================
     TIPOGRAFIA
     ===================================== */
  --font-primary: "Afacad Flux", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-secondary: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Fira Code', 'Courier New', monospace;
  
  /* Tamanhos de fonte */
  --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-size-6xl: 3.75rem;   /* 60px */
  
  /* Pesos de fonte */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* Altura de linha */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* =====================================
     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: 2.5rem;      /* 40px */
  --spacing-3xl: 3rem;        /* 48px */
  --spacing-4xl: 4rem;        /* 64px */
  --spacing-5xl: 5rem;        /* 80px */
  --spacing-6xl: 6rem;        /* 96px */
  
  /* Espaçamentos específicos para seções */
  --section-padding-y: var(--spacing-5xl);
  --section-padding-x: var(--spacing-md);
  --container-padding: var(--spacing-md);
  
  /* =====================================
     BORDAS E RAIOS
     ===================================== */
  --border-radius-none: 0;
  --border-radius-sm: 0.25rem;     /* 4px */
  --border-radius-md: 0.5rem;      /* 8px */
  --border-radius-lg: 1rem;        /* 16px */
  --border-radius-xl: 1.5rem;      /* 24px */
  --border-radius-2xl: 2rem;       /* 32px */
  --border-radius-3xl: 2.5rem;     /* 40px */
  --border-radius-full: 50%;
  
  /* Larguras de borda */
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 4px;
  
  /* =====================================
     SOMBRAS
     ===================================== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
  
  /* Sombras específicas para tema dark */
  --shadow-dark-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-dark-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-dark-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  --shadow-dark-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
  
  /* Sombras coloridas */
  --shadow-primary: 0 4px 14px rgba(27, 79, 114, 0.3);
  --shadow-accent: 0 4px 14px rgba(255, 107, 53, 0.3);
  
  /* =====================================
     TRANSIÇÕES E ANIMAÇÕES
     ===================================== */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;
  --transition-slower: 0.75s ease-in-out;
  
  /* Easing específicos */
  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* =====================================
     Z-INDEX
     ===================================== */
  --z-below: -1;
  --z-normal: 0;
  --z-tooltip: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-overlay: 700;
  --z-max: 999;
  
  /* =====================================
     BREAKPOINTS RESPONSIVOS
     ===================================== */
  --breakpoint-xs: 320px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;
  --breakpoint-3xl: 1600px;
  
  /* Larguras de container */
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-2xl: 1320px;
  --container-3xl: 1536px;
  
  /* =====================================
     VARIÁVEIS ESPECÍFICAS DO COMPONENTE
     ===================================== */
  
  /* Header */
  --header-height: 80px;
  --header-height-mobile: 70px;
  --header-bg: var(--dark-bg-primary);
  --header-shadow: var(--shadow-dark-md);
  
  /* Hero Section */
  --hero-min-height: 100vh;
  --hero-bg: linear-gradient(135deg, var(--dark-bg-primary) 0%, var(--dark-bg-secondary) 100%);
  --hero-overlay: linear-gradient(135deg, rgba(27, 79, 114, 0.8) 0%, rgba(44, 62, 80, 0.9) 100%);
  
  /* Buttons */
  --btn-padding-y: var(--spacing-sm);
  --btn-padding-x: var(--spacing-lg);
  --btn-border-radius: var(--border-radius-md);
  --btn-font-weight: var(--font-weight-semibold);
  --btn-transition: var(--transition-normal);
  
  /* Cards */
  --card-padding: var(--spacing-lg);
  --card-border-radius: var(--border-radius-lg);
  --card-bg: var(--dark-bg-secondary);
  --card-shadow: var(--shadow-dark-lg);
  
  /* Forms */
  --form-input-height: 48px;
  --form-input-padding: var(--spacing-sm) var(--spacing-md);
  --form-input-border-radius: var(--border-radius-md);
  --form-input-bg: var(--dark-bg-tertiary);
  --form-input-border: 1px solid var(--gray-600);
  --form-input-focus-border: none;
  
  /* =====================================
     GRADIENTES ESPECÍFICOS
     ===================================== */
  --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
  --gradient-dark: linear-gradient(135deg, var(--dark-bg-primary) 0%, var(--dark-bg-secondary) 100%);
  --gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, #FF8C35 100%);
  --gradient-hero: linear-gradient(135deg, rgba(26, 26, 26, 0.9) 0%, rgba(44, 44, 44, 0.8) 100%);
  
  /* =====================================
     VARIÁVEIS DE PERFORMANCE
     ===================================== */
  --gpu-acceleration: translateZ(0);
  --will-change-transform: transform;
  --will-change-opacity: opacity;
  --will-change-scroll: scroll-position;
}

/* =====================================
   MEDIA QUERIES PARA VARIÁVEIS RESPONSIVAS - APENAS CONTAINERS
   ===================================== */

/* Mobile pequeno */
@media (max-width: 575.98px) {
  :root {
    --container-padding: var(--spacing-sm);
    --hero-min-height: 70vh;
  }
}

/* Tablet */
@media (min-width: 768px) {
  :root {
    --container-padding: var(--spacing-lg);
  }
}

/* Desktop */
@media (min-width: 1200px) {
  :root {
    --container-padding: var(--spacing-xl);
  }
}