/**
 * ============================================
 * DSCamargo Design System - CSS Variables
 * ============================================
 * 
 * Este arquivo contém todas as variáveis CSS do Design System.
 * Importe este arquivo antes de qualquer outro CSS customizado.
 * 
 * Uso: @import url('design-system/variables.css');
 * Ou:  <link rel="stylesheet" href="design-system/variables.css">
 * 
 * Documentação completa em: /design-system/
 */

/* ============================================
   ============================================ */
/* No external font import needed - using system fonts */

:root {
  /* ============================================
     COLORS - Primary Blue (Marca)
     ============================================ */
  --primary-900: #1a3a52;
  --primary-800: #283E51;
  --primary-700: #3a5a73;
  --primary-600: #4B79A1;  /* COR PRINCIPAL */
  --primary-500: #5d8bb3;
  --primary-400: #7fa3c4;
  --primary-300: #a1bbd5;
  --primary-200: #c3d3e6;
  --primary-100: #e5ebf2;
  --primary-50: #f0f4f8;

  /* ============================================
     COLORS - Innovation Cyan
     ============================================ */
  --cyan-700: #0e7490;
  --cyan-600: #0891b2;
  --cyan-500: #06b6d4;  /* DESTAQUE INOVAÇÃO */
  --cyan-400: #22d3ee;
  --cyan-300: #67e8f9;
  --cyan-100: #cffafe;

  /* ============================================
     COLORS - Human Violet
     ============================================ */
  --violet-700: #6d28d9;
  --violet-600: #7c3aed;
  --violet-500: #8b5cf6;  /* DESTAQUE HUMANIDADE */
  --violet-400: #a78bfa;
  --violet-300: #c4b5fd;
  --violet-100: #ede9fe;

  /* ============================================
     COLORS - Neutrals
     ============================================ */
  --gray-900: #111827;
  --gray-800: #1f2937;
  --gray-700: #374151;
  --gray-600: #4b5563;
  --gray-500: #6b7280;
  --gray-400: #9ca3af;
  --gray-300: #d1d5db;
  --gray-200: #e5e7eb;
  --gray-100: #f3f4f6;
  --gray-50: #f9fafb;
  --white: #ffffff;

  /* ============================================
     COLORS - Semantic
     ============================================ */
  --success: #10b981;
  --success-light: #d1fae5;
  --info: #06b6d4;
  --info-light: #cffafe;
  --warning: #f59e0b;  /* Usar com moderação */
  --error: #ef4444;    /* Apenas erros críticos */

  /* ============================================
     GRADIENTS
     ============================================ */
  --gradient-primary: linear-gradient(135deg, #4B79A1 0%, #283E51 100%);
  --gradient-innovation: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
  --gradient-subtle: linear-gradient(180deg, #f0f4f8 0%, #ffffff 100%);

  /* ============================================
     TYPOGRAPHY - System Font Stack
     Works on all operating systems without external downloads
     ============================================ */
  --font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* Font Sizes */
  --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: 2rem;      /* 32px */
  --font-size-4xl: 2.75rem;   /* 44px */
  --font-size-5xl: 3.5rem;    /* 56px */

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

  /* Letter Spacing */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;

  /* ============================================
     SPACING
     ============================================ */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* ============================================
     BORDER RADIUS
     ============================================ */
  --radius-none: 0;
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px - PADRÃO */
  --radius-xl: 1rem;      /* 16px */
  --radius-2xl: 1.5rem;   /* 24px */
  --radius-full: 9999px;

  /* ============================================
     SHADOWS
     ============================================ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 30px rgba(75, 121, 161, 0.3);
  --shadow-glow-cyan: 0 0 30px rgba(6, 182, 212, 0.3);
  --shadow-glow-violet: 0 0 30px rgba(139, 92, 246, 0.3);

  /* ============================================
     Z-INDEX
     ============================================ */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-toast: 700;

  /* ============================================
     TRANSITIONS
     ============================================ */
  --ease-default: ease;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 800ms;
  --duration-slowest: 1000ms;

  /* ============================================
     CONTAINER
     ============================================ */
  --container-padding: var(--space-4);
  --section-padding: var(--space-20);
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (min-width: 768px) {
  :root {
    --container-padding: var(--space-6);
  }
}

/* ============================================
   BASE STYLES
   ============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
  color: var(--gray-800);
  background-color: var(--gray-50);
  margin: 0;
  padding: 0;
}

/* ============================================
   TYPOGRAPHY BASE
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--gray-900);
  margin: 0 0 var(--space-4);
}

h1 { font-size: var(--font-size-5xl); }
h2 { font-size: var(--font-size-4xl); }
h3 { font-size: var(--font-size-3xl); }
h4 { font-size: var(--font-size-2xl); }
h5 { font-size: var(--font-size-xl); }
h6 { font-size: var(--font-size-lg); }

p {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--primary-600);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--primary-700);
}

code, pre {
  font-family: var(--font-family-mono);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.text-primary { color: var(--primary-600); }
.text-cyan { color: var(--cyan-500); }
.text-violet { color: var(--violet-500); }
.text-muted { color: var(--gray-500); }
.text-white { color: var(--white); }

.bg-primary { background-color: var(--primary-600); }
.bg-gradient-primary { background: var(--gradient-primary); }
.bg-gradient-innovation { background: var(--gradient-innovation); }

.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* ============================================
   GSAP ANIMATION CLASSES
   ============================================ */
.gsap-fade-up,
.gsap-fade-left,
.gsap-fade-right,
.gsap-scale {
  opacity: 1; /* Fallback if GSAP doesn't load */
}

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.9; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes glow-pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

@keyframes blink-caret {
  0%, 100% { border-color: transparent; }
  50% { border-color: currentColor; }
}

.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-float { animation: float 4s ease-in-out infinite; }
.animate-glow { animation: glow-pulse 3s ease-in-out infinite; }