/**
 * Borboleta Travel - Design Tokens & Variables
 * Paleta de cores extraída da identidade visual oficial
 */

:root {
  /* ==========================================================================
     Paleta de Cores Oficial (Logo Borboleta Travel Perú)
     ========================================================================== */
  --bt-color-terracotta: #D95B28; /* Laranja Terracota / Borboleta */
  --bt-color-amber:      #E29D38; /* Âmbar Dourado / Travel */
  --bt-color-sage:       #4E7166; /* Verde Sálvia Montanha / Perú */
  --bt-color-teal:       #183E40; /* Azul Petróleo Escuro / Montanhas */
  --bt-color-charcoal:   #1E201E; /* Grafite Carvão / Fundo escuro do logo */
  --bt-color-cream:      #FAF8F5; /* Branco Creme / Fundo suave */
  --bt-color-white:      #FFFFFF; /* Branco puro */

  /* Tons Neutros */
  --bt-color-gray-50:    #F9FAFB;
  --bt-color-gray-100:   #F3F4F6;
  --bt-color-gray-200:   #E5E7EB;
  --bt-color-gray-300:   #D1D5DB;
  --bt-color-gray-400:   #9CA3AF;
  --bt-color-gray-500:   #6B7280;
  --bt-color-gray-600:   #4B5563;
  --bt-color-gray-700:   #374151;
  --bt-color-gray-800:   #1F2937;
  --bt-color-gray-900:   #111827;

  /* Tonalidades Pastel Corporativas (Paleta Suavizada Borboleta) */
  --bt-pastel-terracotta:      #E27A4B; /* Terracota Suave / Pastel */
  --bt-pastel-terracotta-soft: #EA8F66; /* Terracota Pêssego Claro */
  --bt-pastel-amber:           #E8AC55; /* Âmbar Dourado Pastel */
  --bt-pastel-amber-soft:      #F0C27B; /* Âmbar Claro */
  --bt-pastel-sage:            #668F82; /* Sálvia Pastel */
  --bt-pastel-sage-soft:       #80A89C; /* Sálvia Claro */
  --bt-pastel-teal:            #244D50; /* Azul Petróleo Suave */

  /* Aplicação Semântica */
  --bt-primary:          var(--bt-color-terracotta);
  --bt-primary-hover:    var(--bt-pastel-terracotta-soft);
  --bt-secondary:        var(--bt-color-amber);
  --bt-secondary-hover:  var(--bt-pastel-amber-soft);
  --bt-accent:           var(--bt-pastel-sage);
  --bt-accent-dark:      var(--bt-color-teal);
  
  --bt-bg-body:          var(--bt-color-cream);
  --bt-bg-surface:       var(--bt-color-white);
  --bt-text-main:        var(--bt-color-charcoal);
  --bt-text-muted:       var(--bt-color-gray-600);
  --bt-text-heading:     var(--bt-color-teal);
  --bt-border-color:     var(--bt-color-gray-200);

  /* Fundo Verde Floresta do Header (Cor exata da referência do cliente) */
  --bt-header-bg:             #153A32;
  --bt-header-bg-gradient:    linear-gradient(180deg, #173E36 0%, #12342D 100%);
  --bt-header-badge-bg:       #0E2721;
  --bt-header-border:         rgba(255, 255, 255, 0.09);
  --bt-header-scrolled:       rgba(18, 48, 41, 0.98);

  /* ==========================================================================
     Tipografia (Playfair Display para marcas/títulos & Plus Jakarta Sans para UI)
     ========================================================================== */
  --bt-font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --bt-font-sans:  "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  --bt-font-family-body:    var(--bt-font-sans);
  --bt-font-family-heading: var(--bt-font-serif);
  --bt-font-family-ui:      var(--bt-font-sans);

  --bt-fs-xs:   0.75rem;   /* 12px */
  --bt-fs-sm:   0.875rem;  /* 14px */
  --bt-fs-base: 1rem;      /* 16px */
  --bt-fs-md:   1.125rem;  /* 18px */
  --bt-fs-lg:   1.25rem;   /* 20px */
  --bt-fs-xl:   1.5rem;    /* 24px */
  --bt-fs-2xl:  1.875rem;  /* 30px */
  --bt-fs-3xl:  2.25rem;   /* 36px */
  --bt-fs-4xl:  3.25rem;   /* 52px */
  --bt-fs-hero: clamp(2.25rem, 5vw + 1rem, 3.75rem);

  --bt-line-height-tight: 1.15;
  --bt-line-height-base:  1.6;
  --bt-line-height-loose: 1.8;

  /* ==========================================================================
     Espaçamentos & Layout
     ========================================================================== */
  --bt-space-1:  0.25rem;   /*  4px */
  --bt-space-2:  0.5rem;    /*  8px */
  --bt-space-3:  0.75rem;   /* 12px */
  --bt-space-4:  1rem;      /* 16px */
  --bt-space-5:  1.25rem;   /* 20px */
  --bt-space-6:  1.5rem;    /* 24px */
  --bt-space-7:  1.75rem;   /* 28px */
  --bt-space-8:  2rem;      /* 32px */
  --bt-space-10: 2.5rem;    /* 40px */
  --bt-space-12: 3rem;      /* 48px */
  --bt-space-14: 3.5rem;    /* 56px */
  --bt-space-16: 4rem;      /* 64px */
  --bt-space-20: 5rem;      /* 80px */
  --bt-space-24: 6rem;      /* 96px */

  --bt-container-max: 1240px;
  --bt-container-padding: var(--bt-space-6);

  /* Header & Hero Tokens (Compacto verticalmente) */
  --bt-header-height: 84px;
  --bt-hero-min-height: 88vh;

  /* ==========================================================================
     Sombras, Raios e Transições
     ========================================================================== */
  --bt-radius-sm: 6px;
  --bt-radius-md: 12px;
  --bt-radius-lg: 20px;
  --bt-radius-xl: 28px;
  --bt-radius-full: 9999px;

  --bt-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
  --bt-shadow-md: 0 8px 16px -2px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --bt-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --bt-shadow-float: 0 20px 40px -15px rgba(24, 62, 64, 0.15), 0 0 25px rgba(0, 0, 0, 0.06);

  --bt-transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --bt-transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}