/* ============================================
   INTERFALA - VARIÁVEIS DE IDENTIDADE VISUAL
   ============================================
   
   Identidade visual oficial da Interfala
   Atualizado com paleta de cores e tipografia definidas
   
   ============================================ */

:root {
  /* ========== CORES PRINCIPAIS ========== */
  
  /* Cor primária - Roxo principal da marca */
  --color-primary: #7130f0;
  --color-primary-light: #ae62ff;
  --color-primary-dark: #100a3c;
  --color-primary-rgb: 113, 48, 240;
  
  /* Cor secundária - Roxo escuro */
  --color-secondary: #4d387d;
  --color-secondary-light: #7130f0;
  --color-secondary-dark: #100a3c;
  --color-secondary-rgb: 77, 56, 125;
  
  /* Cor de destaque/accent - Ciano vibrante */
  --color-accent: #00ffd2;
  --color-accent-light: #5cffe3;
  --color-accent-dark: #00ccaa;
  --color-accent-rgb: 0, 255, 210;
  
  /* Cores auxiliares da paleta */
  --color-pink: #dd8cf5;
  --color-pink-light: #d666ff;
  --color-lilac: #ae62ff;
  --color-lavender: #f9f7fe;
  
  /* ========== CORES DE TEXTO ========== */
  --color-text-primary: #100a3c;
  --color-text-secondary: #4d387d;
  --color-text-muted: #8b7eb3;
  --color-text-inverse: #ffffff;
  
  /* ========== CORES DE FUNDO ========== */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f9f7fe;
  --color-bg-tertiary: #f0ecf9;
  --color-bg-dark: #100a3c;
  --color-bg-dark-secondary: #1a1252;
  
  /* ========== CORES DE ESTADO ========== */
  --color-success: #00ffd2;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #7130f0;
  
  /* ========== CORES DOS CANAIS ========== */
  --color-whatsapp: #25D366;
  --color-instagram: #E4405F;
  --color-messenger: #0084FF;
  --color-telegram: #0088cc;
  --color-email: #EA4335;
  --color-sms: #7130f0;
  
  /* ========== GRADIENTES ========== */
  --gradient-primary: linear-gradient(135deg, #7130f0 0%, #ae62ff 50%, #dd8cf5 100%);
  --gradient-primary-simple: linear-gradient(135deg, #7130f0 0%, #ae62ff 100%);
  --gradient-primary-reverse: linear-gradient(135deg, #dd8cf5 0%, #ae62ff 50%, #7130f0 100%);
  --gradient-dark: linear-gradient(135deg, #100a3c 0%, #1a1252 100%);
  --gradient-hero: linear-gradient(180deg, #f9f7fe 0%, #ffffff 100%);
  --gradient-accent: linear-gradient(135deg, #00ffd2 0%, #00ccaa 100%);
  --gradient-mesh: radial-gradient(at 40% 20%, rgba(113, 48, 240, 0.1) 0px, transparent 50%),
                   radial-gradient(at 80% 0%, rgba(174, 98, 255, 0.1) 0px, transparent 50%),
                   radial-gradient(at 0% 50%, rgba(221, 140, 245, 0.08) 0px, transparent 50%);
  
  /* ========== TIPOGRAFIA ========== */
  
  /* Fonte principal - Gilroy para tudo */
  --font-display: 'Gilroy', 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Gilroy', 'DM Sans', sans-serif;
  
  /* Tamanhos de fonte */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  --font-size-7xl: 4.5rem;
  
  /* Pesos de fonte */
  --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.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  
  /* ========== ESPAÇAMENTOS ========== */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --spacing-4xl: 6rem;
  --spacing-5xl: 8rem;
  
  /* ========== BORDAS E RAIOS ========== */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;
  
  --border-width: 1px;
  --border-color: #e8e3f3;
  --border-color-light: #f0ecf9;
  
  /* ========== SOMBRAS ========== */
  --shadow-sm: 0 1px 2px 0 rgba(16, 10, 60, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(16, 10, 60, 0.1), 0 2px 4px -2px rgba(16, 10, 60, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(16, 10, 60, 0.1), 0 4px 6px -4px rgba(16, 10, 60, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(16, 10, 60, 0.1), 0 8px 10px -6px rgba(16, 10, 60, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(16, 10, 60, 0.25);
  --shadow-glow: 0 0 40px rgba(113, 48, 240, 0.3);
  --shadow-glow-lg: 0 0 60px rgba(113, 48, 240, 0.4);
  --shadow-glow-accent: 0 0 40px rgba(0, 255, 210, 0.3);
  
  /* ========== TRANSIÇÕES ========== */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
  --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* ========== Z-INDEX ========== */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-tooltip: 600;
  
  /* ========== CONTAINER ========== */
  --container-max-width: 1280px;
  --container-padding: 1.5rem;
  
  /* ========== HEADER ========== */
  --header-height: 80px;
}

/* ========== MODO ESCURO (opcional) ========== */
[data-theme="dark"] {
  --color-text-primary: #f9f7fe;
  --color-text-secondary: #c4b8e0;
  --color-text-muted: #8b7eb3;
  
  --color-bg-primary: #100a3c;
  --color-bg-secondary: #1a1252;
  --color-bg-tertiary: #2a1f6b;
  
  --border-color: #2a1f6b;
  --border-color-light: #1a1252;
}