/* design-tokens.css - Variáveis CSS extraídas do site base ctmaosdadas.com.br */

/* Paleta de Cores - Baseada no logotipo da clínica */
:root {
  /* Cor primária - extraída do logotipo (azul médico/profissional) */
  --cor-primaria: #1E3A8A;
  
  /* Cor secundária - complementar do logo (verde saúde/esperança) */
  --cor-secundaria: #059669;
  
  /* Cor terciária - acento do logo (azul claro) */
  --cor-terciaria: #3B82F6;
  
  /* Texto principal - baseado no contraste do logo */
  --cor-texto-principal: #1F2937;
  
  /* Texto muted - textos secundários, rodapé, labels */
  --cor-texto-muted: #6B7280;
  
  /* Fundo principal da página */
  --cor-fundo: #FFFFFF;
  
  /* Superfície - cards, seções destacadas */
  --cor-superficie: #F9FAFB;
  
  /* Bordas - inputs, cards, divisores */
  --cor-borda: #E5E7EB;
  
  /* Sombra - cards, botões, elementos elevados */
  --cor-sombra: rgba(30, 58, 138, 0.1);
  
  /* Cores específicas do logo para elementos especiais */
  --cor-logo-primaria: #1E3A8A;
  --cor-logo-secundaria: #059669;
  --cor-logo-destaque: #3B82F6;
}

/* Tipografia - Baseada no estilo do site */
:root {
  /* Família tipográfica principal - texto dos parágrafos */
  --font-family-principal: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  
  /* Peso normal - texto dos parágrafos */
  --font-weight-normal: 400;
  
  /* Peso médio - subtítulos */
  --font-weight-medium: 500;
  
  /* Peso bold - títulos principais */
  --font-weight-bold: 700;
  
  /* Tamanho base - texto dos parágrafos */
  --font-size-base: 16px;
  
  /* Tamanho pequeno - textos secundários */
  --font-size-sm: 14px;
  
  /* Tamanho grande - subtítulos */
  --font-size-lg: 20px;
  
  /* Tamanho extra grande - títulos principais */
  --font-size-xl: 32px;
  
  /* Tamanho hero - título principal do hero */
  --font-size-hero: 48px;
}

/* Raio de Borda - Baseado nos elementos do site */
:root {
  /* Raio padrão - botões, cards, inputs */
  --raio-borda: 8px;
  
  /* Raio pequeno - elementos menores */
  --raio-borda-sm: 4px;
  
  /* Raio grande - elementos destacados */
  --raio-borda-lg: 12px;
}

/* Sombras - Baseadas nos elementos elevados do site */
:root {
  /* Sombra padrão - cards, botões */
  --sombra-padrao: 0 2px 8px var(--cor-sombra);
  
  /* Sombra suave - elementos sutis */
  --sombra-suave: 0 1px 3px var(--cor-sombra);
  
  /* Sombra forte - elementos destacados */
  --sombra-forte: 0 4px 16px var(--cor-sombra);
}

/* Espaçamentos - Baseados na escala do site */
:root {
  /* Espaçamento extra pequeno */
  --espacamento-xs: 4px;
  
  /* Espaçamento pequeno - padding interno dos cards */
  --espacamento-sm: 8px;
  
  /* Espaçamento médio - margem entre elementos */
  --espacamento-md: 16px;
  
  /* Espaçamento grande - margem entre seções */
  --espacamento-lg: 24px;
  
  /* Espaçamento extra grande - padding do container principal */
  --espacamento-xl: 32px;
  
  /* Espaçamento hero - espaçamento das seções principais */
  --espacamento-hero: 48px;
}

/* Breakpoints para responsividade */
:root {
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
}

/* Transições - Para interações suaves */
:root {
  --transicao-padrao: all 0.3s ease;
  --transicao-rapida: all 0.2s ease;
}