/* ============================================
   VARIÁVEIS CSS - GRUPOS ONLINE TURISMO
   Padrão: BEM + Design System
   Tema: Vibrante & Contraste
   ============================================ */

:root {
  /* ===== CORES PRIMÁRIAS ===== */
  --color-blue-900: #1e4a7c;
  --color-blue-700: #1a73e8;
  --color-blue-500: #4285f4;
  --color-blue-300: #7baaf7;
  --color-blue-100: #d6e8f8;

  --color-orange-900: #e65100;
  --color-orange-700: #f57c00;
  --color-orange-500: #ffb74d;
  --color-orange-300: #ffe4c4;
  --color-orange-100: #fff8f0;

  /* ===== CORES NEUTRAS ===== */
  --color-white: #fefefe;
  --color-black: #0e0e0e;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;

  /* ===== CORES SEMÂNTICAS ===== */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-whatsapp: #25d366;
  --color-whatsapp-dark: #20ba5a;

  /* ===== TIPOGRAFIA ===== */
  --font-family-display: "Playfair Display", Georgia, serif;
  --font-family-body: "Lato", system-ui, sans-serif;

  /* Tamanhos de fonte */
  --text-size-xs: 0.75rem; /* 12px */
  --text-size-sm: 0.875rem; /* 14px */
  --text-size-base: 1rem; /* 16px */
  --text-size-lg: 1.125rem; /* 18px */
  --text-size-xl: 1.25rem; /* 20px */
  --text-size-2xl: 1.5rem; /* 24px */
  --text-size-3xl: clamp(1.875rem, 5vw, 2.25rem);
  --text-size-4xl: clamp(2.25rem, 6vw, 3rem);
  --text-size-5xl: clamp(2.5rem, 8vw, 4.5rem);

  /* Pesos de fonte */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ===== ESPAÇAMENTO ===== */
  --spacing-xs: 0.25rem; /* 4px */
  --spacing-sm: 0.5rem; /* 8px */
  --spacing-md: 1rem; /* 16px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2rem; /* 32px */
  --spacing-3rem: 3rem; /* 48px */
  --spacing-4rem: 4rem; /* 64px */
  --spacing-6rem: 6rem; /* 96px */

  /* ===== BORDER E RADIUS ===== */
  --radius-sm: 0.375rem; /* 6px */
  --radius-base: 0.75rem; /* 12px */
  --radius-lg: 1rem; /* 16px */
  --radius-full: 9999px;

  /* ===== SOMBRAS ===== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 4px 20px -4px hsla(210, 40%, 15%, 0.1);
  --shadow-elevated: 0 20px 60px -15px hsla(210, 40%, 15%, 0.15);
  --shadow-warm: 0 10px 40px -10px hsla(30, 100%, 50%, 0.25);

  --shadow-elevated:
    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 0 40px rgba(245, 124, 0, 0.15);

  /* ===== GRADIENTES ===== */
  --gradient-orange: linear-gradient(
    135deg,
    #e65100 0%,
    #f57c00 50%,
    #ffb74d 100%
  );
  --gradient-blue: linear-gradient(
    135deg,
    #1a73e8 0%,
    #4285f4 50%,
    #7baaf7 100%
  );
  --gradient-hero: linear-gradient(
    180deg,
    hsla(217, 80%, 50%, 0.08) 0%,
    hsla(30, 100%, 55%, 0.05) 50%,
    var(--card-bg) 100%
  );

  /* ===== OVERLAYS ===== */
  --overlay-light: rgba(250, 250, 251, 0.3);
  --overlay-mid: rgba(250, 250, 251, 0.5);
  --overlay-dark: rgba(0, 0, 0, 0.4);
  --overlay-darker: rgba(0, 0, 0, 0.5);
  --overlay-darkness: rgba(0, 0, 0, 0.6);
  --overlay-background: rgba(250, 250, 251, 0.95);

  /* ===== TRANSIÇÕES ===== */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s ease;

  /* ===== LAYOUT ===== */
  --container-padding: 1rem;
  --navbar-height: 80px;

  /* ===== DELAYS DE ANIMAÇÃO ===== */
  --delay-1: 0.1s;
  --delay-2: 0.2s;
  --delay-3: 0.3s;
  --delay-4: 0.4s;
  --delay-5: 0.5s;
  --delay-6: 0.6s;

  /* ===== ALIASES E COMPATIBILIDADE ===== */
  --radius: var(
    --radius-base
  ); /* Alias para compatibilidade com código existente */
  --card: var(--color-gray-50); /* Cor de fundo para cards */
  --card-fact-bg: rgba(26, 115, 232, 0.06); /* Fundo azul suave para facts */
  --gallery-card-fg: var(
    --color-gray-200
  ); /* Cor de texto para gallery cards */
  --blue-300: var(
    --color-orange-500
  ); /* Dourado/Laranja - mantém compatibilidade */

  /* Cores alternativas do __variables.css */
  --secondary: var(--color-gray-100); /* Coral claro */
  --secondary-foreground: var(--color-orange-900); /* Coral escuro */
  --tertiary: var(--color-orange-700); /* Laranja */
  --tertiary-light: var(--color-orange-500); /* Laranja claro */
  --tertiary-dark: var(--color-orange-900); /* Laranja escuro */

  /* Fundos de seção: paleta (usar cores 100-level ao invés de off-white) */
  --section-bg-hero: linear-gradient(
    180deg,
    var(--color-blue-100) 0%,
    var(--card-bg) 100%
  );
  --section-bg-history: var(--color-blue-100);
  --section-bg-trips: var(--color-orange-300);
  --section-bg-benefits: var(--color-blue-100);
  --section-bg-services: var(--color-orange-300);
  --section-bg-testimonials: var(--color-blue-100);
  --section-bg-contact: var(--color-orange-300);

  --section-bg-gallery: var(--color-blue-100);
  --section-bg-photos: var(--color-blue-100);

  --section-bg-subtle-cool: #f0f6fd;
  --section-bg-subtle-warm: #fff8f2;
  --section-bg-subtle-neutral: #fafafa; /* áreas neutras */
  --text-muted: rgba(14, 14, 14, 0.6);
  --text-on-dark-muted: rgba(255, 255, 255, 0.85);
  --card-text-color: var(--color-blue-900);
  --card-bg: var(--section-bg-subtle-neutral);
}