/* ============================================
   VARIABLES CSS - FerramentasMax
   Design tokens and CSS custom properties
   ============================================ */

/* === GOOGLE FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');

/* === CSS VARIABLES === */
:root {
  /* Colors */
  --white: #FFFFFF;
  --yellow: #FFC107;
  --yellow-dark: #FFB800;
  --yellow-light: #FFF9E6;
  --text-dark: #2c3e50;
  --text-medium: #34495e;
  --text-light: #7f8c8d;
  --gray-light: #f8f9fa;
  --gray-medium: #e9ecef;
  --gray-dark: #dee2e6;
  --black-overlay: rgba(0, 0, 0, 0.5);
  --black-overlay-light: rgba(0, 0, 0, 0.3);

  /* WhatsApp Colors */
  --whatsapp-green: #25D366;
  --whatsapp-green-dark: #20BA5A;
  --whatsapp-teal: #128C7E;

  /* Typography */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-xxl: 6rem;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Container */
  --container-max: 1200px;
  --container-padding: 2rem;
}