/* Variáveis CSS - Design System PREMIUM da Landing Page Amil */

:root {
  /* ==================== PALETA CINEMATOGRÁFICA ==================== */

  /* Roxo Amil Oficial - Tom profundo e confiável */
  --cor-primaria: #461BFF;        /* Roxo oficial Amil */
  --cor-primaria-escura: #2A0F99; /* Roxo escuro profundo */
  --cor-primaria-clara: #EFE8FF;  /* Roxo claro suave */
  --cor-primaria-vibrante: #5C2FFF; /* Roxo vibrante para acentos */

  /* Verde Saúde - Tom vibrante e energético */
  --cor-secundaria: #00C896;      /* Verde turquesa vibrante */
  --cor-secundaria-escura: #00A078; /* Verde profundo */
  --cor-secundaria-clara: #E6F9F4; /* Verde menta claro */

  /* Acentos Premium - Dourado e Coral */
  --cor-destaque: #FF6B57;        /* Coral vibrante - CTAs principais */
  --cor-destaque-escura: #E5533F; /* Coral escuro hover */
  --cor-destaque-clara: #FFE8E5;  /* Coral suave */
  --cor-dourado: #F4A261;         /* Dourado premium para badges */
  --cor-dourado-escuro: #E38B4E;  /* Dourado hover */

  /* Texto - Alta legibilidade com contraste premium */
  --cor-texto: #0A1930;           /* Quase preto azulado */
  --cor-texto-medio: #334E68;     /* Azul médio */
  --cor-texto-claro: #627D98;     /* Azul acinzentado */

  /* Backgrounds - Profundidade e camadas */
  --cor-fundo: #F8FAFC;           /* Off-white frio */
  --cor-fundo-secao: #EDF2F7;     /* Cinza azulado claro */
  --cor-fundo-card: #FFFFFF;      /* Branco puro */
  --cor-fundo-escuro: #1A0A3D;    /* Roxo noturno para seções dark */
  --cor-fundo-hero: #0F0527;      /* Hero background roxo escuro */

  /* Estados e Feedback */
  --cor-erro: #EF4444;            /* Vermelho vibrante */
  --cor-sucesso: #10B981;         /* Verde sucesso moderno */
  --cor-aviso: #F59E0B;           /* Âmbar */
  --cor-info: #3B82F6;            /* Azul informação */

  /* Bordas e Divisores */
  --cor-borda: #CBD5E1;           /* Bordas sutis */
  --cor-borda-clara: #E2E8F0;     /* Bordas muito claras */
  --cor-borda-escura: #94A3B8;    /* Bordas com mais presença */

  /* Overlays e Glassmorphism */
  --cor-overlay: rgba(15, 5, 39, 0.75);       /* Overlay roxo escuro premium */
  --cor-overlay-claro: rgba(255, 255, 255, 0.1); /* Overlay claro */
  --glass-fundo: rgba(255, 255, 255, 0.85);   /* Glassmorphism branco */
  --glass-fundo-escuro: rgba(26, 10, 61, 0.7); /* Glassmorphism roxo dark */
  --glass-borda: rgba(255, 255, 255, 0.2);    /* Borda glass */

  /* Tipografia */
  --fonte-principal: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                     'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;

  /* ==================== TIPOGRAFIA CINEMATOGRÁFICA ==================== */

  /* Tamanhos fluidos - Impacto visual premium */
  --tamanho-hero: clamp(2.5rem, 8vw + 1rem, 4.5rem);    /* 40px - 72px - HERO GIGANTE */
  --tamanho-h1: clamp(2rem, 6vw + 0.5rem, 3.5rem);      /* 32px - 56px */
  --tamanho-h2: clamp(1.75rem, 5vw, 2.75rem);           /* 28px - 44px */
  --tamanho-h3: clamp(1.35rem, 3.5vw, 2rem);            /* 22px - 32px */
  --tamanho-corpo: clamp(1rem, 2.5vw, 1.125rem);        /* 16px - 18px */
  --tamanho-corpo-grande: clamp(1.125rem, 3vw, 1.35rem); /* 18px - 22px */
  --tamanho-pequeno: clamp(0.875rem, 2vw, 1rem);        /* 14px - 16px */
  --tamanho-minimo: clamp(0.75rem, 1.5vw, 0.875rem);    /* 12px - 14px */

  /* Pesos de fonte - Mais contraste */
  --peso-light: 300;
  --peso-regular: 400;
  --peso-medio: 500;
  --peso-semibold: 600;
  --peso-bold: 700;
  --peso-extrabold: 800;

  /* Letter spacing refinado */
  --tracking-tight: -0.04em;   /* Títulos grandes */
  --tracking-normal: -0.01em;  /* Corpo de texto */
  --tracking-wide: 0.02em;     /* Labels e UI */
  --tracking-wider: 0.1em;     /* Badges premium */

  /* Line height */
  --leading-tight: 1.1;        /* Hero */
  --leading-snug: 1.3;         /* Títulos */
  --leading-normal: 1.6;       /* Corpo */
  --leading-relaxed: 1.8;      /* Texto longo */

  /* Espaçamentos - Mobile First */
  --espacamento-xs: 0.5rem;   /* 8px */
  --espacamento-sm: 1rem;     /* 16px */
  --espacamento-md: 1.5rem;   /* 24px */
  --espacamento-lg: 2rem;     /* 32px */
  --espacamento-xl: 3rem;     /* 48px */
  --espacamento-xxl: 4rem;    /* 64px */

  /* Bordas */
  --raio-borda-sm: 4px;
  --raio-borda-md: 8px;
  --raio-borda-lg: 12px;
  --raio-borda-xl: 16px;
  --raio-borda-full: 9999px;

  /* ==================== SOMBRAS CINEMATOGRÁFICAS ==================== */

  /* Sombras em camadas - Profundidade premium */
  --sombra-xs: 0 1px 3px rgba(10, 25, 48, 0.05);
  --sombra-sm: 0 2px 8px rgba(10, 25, 48, 0.08);
  --sombra-md: 0 8px 16px rgba(10, 25, 48, 0.12);
  --sombra-lg: 0 16px 32px rgba(10, 25, 48, 0.15);
  --sombra-xl: 0 24px 48px rgba(10, 25, 48, 0.18);
  --sombra-2xl: 0 32px 64px rgba(10, 25, 48, 0.22);
  --sombra-3xl: 0 40px 80px rgba(10, 25, 48, 0.28);

  /* Sombras dramáticas - Multi-layer */
  --sombra-dramatica:
    0 10px 25px rgba(10, 25, 48, 0.15),
    0 20px 50px rgba(10, 25, 48, 0.1),
    0 30px 80px rgba(10, 25, 48, 0.08);

  --sombra-float:
    0 15px 35px rgba(10, 25, 48, 0.12),
    0 5px 15px rgba(10, 25, 48, 0.08);

  /* Sombras coloridas premium - Glow effects */
  --sombra-primaria:
    0 12px 28px rgba(70, 27, 255, 0.25),
    0 4px 12px rgba(70, 27, 255, 0.15);

  --sombra-secundaria:
    0 12px 28px rgba(0, 200, 150, 0.25),
    0 4px 12px rgba(0, 200, 150, 0.15);

  --sombra-destaque:
    0 12px 28px rgba(255, 107, 87, 0.3),
    0 4px 12px rgba(255, 107, 87, 0.2);

  --sombra-dourado:
    0 12px 28px rgba(244, 162, 97, 0.3),
    0 4px 12px rgba(244, 162, 97, 0.18);

  /* Inner shadows para depth */
  --sombra-inset: inset 0 2px 8px rgba(10, 25, 48, 0.08);
  --sombra-inset-profunda: inset 0 4px 12px rgba(10, 25, 48, 0.12);

  /* Transições */
  --transicao-rapida: 150ms ease-in-out;
  --transicao-normal: 300ms ease-in-out;
  --transicao-lenta: 500ms ease-in-out;

  /* Z-index */
  --z-index-base: 1;
  --z-index-dropdown: 100;
  --z-index-sticky: 200;
  --z-index-fixed: 300;
  --z-index-modal: 400;
  --z-index-tooltip: 500;

  /* Container e breakpoints */
  --container-mobile: 100%;
  --container-tablet: 720px;
  --container-desktop: 1140px;
  --container-padding: var(--espacamento-sm);

  /* Tamanhos de botões e touch targets */
  --altura-botao: 48px;        /* Mínimo 44px para touch */
  --altura-input: 48px;
  --largura-maxima-form: 600px;

  /* Animações */
  --duracao-fade: 300ms;
  --duracao-slide: 400ms;
  --duracao-bounce: 600ms;

  /* ==================== GRADIENTES CINEMATOGRÁFICOS ==================== */

  /* Gradientes principais - Multi-point premium */
  --gradiente-primario: linear-gradient(
    135deg,
    #461BFF 0%,
    #5C2FFF 50%,
    #2A0F99 100%
  );

  --gradiente-secundario: linear-gradient(
    135deg,
    #00C896 0%,
    #10B981 50%,
    #00A078 100%
  );

  --gradiente-destaque: linear-gradient(
    135deg,
    #FF6B57 0%,
    #F4A261 50%,
    #E5533F 100%
  );

  /* Hero gradiente dramático - Dark to vibrant */
  --gradiente-hero: linear-gradient(
    135deg,
    #0F0527 0%,
    #1A0A3D 25%,
    #461BFF 75%,
    #5C2FFF 100%
  );

  --gradiente-hero-overlay: linear-gradient(
    135deg,
    rgba(15, 5, 39, 0.95) 0%,
    rgba(70, 27, 255, 0.85) 50%,
    rgba(92, 47, 255, 0.75) 100%
  );

  /* Gradientes mesh - Complexos e orgânicos */
  --gradiente-mesh: radial-gradient(
      at 27% 37%,
      rgba(70, 27, 255, 0.4) 0px,
      transparent 50%
    ),
    radial-gradient(
      at 97% 21%,
      rgba(0, 200, 150, 0.3) 0px,
      transparent 50%
    ),
    radial-gradient(
      at 52% 99%,
      rgba(255, 107, 87, 0.25) 0px,
      transparent 50%
    ),
    radial-gradient(
      at 10% 29%,
      rgba(244, 162, 97, 0.2) 0px,
      transparent 50%
    );

  /* Gradientes de texto - Para títulos premium */
  --gradiente-texto-hero: linear-gradient(
    135deg,
    #FFFFFF 0%,
    #E3F0F9 100%
  );

  --gradiente-texto-destaque: linear-gradient(
    135deg,
    #FF6B57 0%,
    #F4A261 100%
  );

  /* Gradientes suaves - Transições de seção */
  --gradiente-suave-top: linear-gradient(
    180deg,
    rgba(248, 250, 252, 0) 0%,
    #F8FAFC 100%
  );

  --gradiente-suave-bottom: linear-gradient(
    180deg,
    #F8FAFC 0%,
    rgba(248, 250, 252, 0) 100%
  );

  /* ==================== GLASSMORPHISM ==================== */

  /* Efeitos de vidro premium */
  --glass-blur: blur(24px);
  --glass-blur-intenso: blur(32px);
  --glass-saturate: saturate(180%);

  /* Backdrop filters completos */
  --glass-backdrop: blur(24px) saturate(180%);
  --glass-backdrop-intenso: blur(32px) saturate(200%) brightness(110%);

  /* Borders animados */
  --glass-border-gradient: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.1) 100%
  );
}

/* Breakpoints como variáveis CSS (para uso com container queries) */
@media (min-width: 768px) {
  :root {
    --container-padding: var(--espacamento-md);
  }
}

@media (min-width: 1024px) {
  :root {
    --container-padding: var(--espacamento-lg);
  }
}

/* Modo escuro (preparação futura - opcional) */
@media (prefers-color-scheme: dark) {
  :root {
    /* Manter cores originais - LP focada em conversão */
  }
}