/* variables.css - Design Tokens */
:root {
  /* Brand Colors */
  --color-primary: #F28A00; /* Laranja vibrante */
  --color-secondary: #8B2458; /* Vinho / Roxo institucional */
  --color-accent: #F5A623; /* Laranja claro */
  
  /* Neutral Colors */
  --color-white: #FFFFFF;
  --color-neutral-light: #F3F3F3; /* Fundos claros de respiro */
  --color-neutral-dark: #1F2430; /* Textos principais dark mode e contrastes */
  --color-text-muted: #6B7280; /* Textos de apoio */
  
  /* Additional Functional Colors */
  --color-success: #16A34A; /* Para retornos positivos */
  --color-error: #DC2626; /* Para validações */
  --color-whatsapp: #25D366; /* Botão oficial Wpp */
  
  /* Typography */
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Montserrat', sans-serif;
  
  /* Shadows */
  --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-card: 0 12px 24px rgba(31, 36, 48, 0.06);
  --shadow-glow: 0 8px 16px rgba(242, 138, 0, 0.25);
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  --gradient-brand: linear-gradient(135deg, var(--color-secondary), #591637);
  --gradient-overlay: linear-gradient(180deg, rgba(31, 36, 48, 0) 0%, rgba(31, 36, 48, 0.8) 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
  
  /* Transitions */
  --transition-fast: 0.2s ease-in-out;
  --transition-base: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;
  
  /* Z-index */
  --z-negative: -1;
  --z-base: 1;
  --z-header: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}