/* ============================================
   NAVEGUE BÚZIOS — Design Tokens
   Single source of truth for identidade visual
   ============================================ */

:root {
  /* --- Cores Principais --- */
  --color-navy: #0B1D3A;
  --color-ocean: #1B5E8A;
  --color-sea: #2A8FBF;
  --color-sky: #E8F4FA;
  
  /* --- Neutros --- */
  --color-white: #FFFFFF;
  --color-offwhite: #F7F9FB;
  --color-graphite: #2D2D2D;
  --color-neutral: #6B7B8D;
  --color-neutral-light: #94A3B3;
  --color-border: #E1E8EF;
  
  /* --- CTA (verde oceano — remete ao WhatsApp) --- */
  --color-cta: #0E7A5B;
  --color-cta-hover: #0C6A4E;
  --color-cta-light: rgba(14, 122, 91, 0.1);
  
  /* --- Avaliações / Social Proof --- */
  --color-star: #FBBF24;
  --color-star-bg: rgba(251, 191, 36, 0.1);
  --color-badge-popular: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
  
  /* --- Tipografia --- */
  --font-primary: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* --- Tamanhos de Fonte --- */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.77rem + 0.2vw, 0.875rem);
  --text-base: clamp(0.9375rem, 0.88rem + 0.3vw, 1.0625rem);
  --text-lg: clamp(1.0625rem, 0.97rem + 0.45vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
  --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.75rem);
  --text-4xl: clamp(2.25rem, 1.7rem + 2.75vw, 3.5rem);
  --text-5xl: clamp(2.75rem, 2rem + 3.75vw, 4.5rem);
  
  /* --- Line Heights --- */
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;
  
  /* --- Letter Spacing --- */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;
  --tracking-widest: 0.2em;
  
  /* --- Espaçamento (sistema de 8px) --- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-8: 3rem;      /* 48px */
  --space-10: 4rem;     /* 64px */
  --space-12: 5rem;     /* 80px */
  --space-14: 6rem;     /* 96px */
  --space-16: 7.5rem;   /* 120px */
  
  /* --- Container --- */
  --container-max: 1200px;
  --container-padding: var(--space-5);
  
  /* --- Bordas --- */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;
  
  /* --- Sombras --- */
  --shadow-sm: 0 1px 3px rgba(11, 29, 58, 0.06);
  --shadow-md: 0 4px 12px rgba(11, 29, 58, 0.08);
  --shadow-lg: 0 8px 30px rgba(11, 29, 58, 0.1);
  --shadow-xl: 0 16px 50px rgba(11, 29, 58, 0.12);
  
  /* --- Transições --- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-smooth: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* --- Z-index --- */
  --z-header: 1000;
  --z-overlay: 900;
  --z-mobile-menu: 950;
  
  /* --- Header --- */
  --header-height: 6.5rem;
}

@media (min-width: 768px) {
  :root {
    --container-padding: var(--space-6);
    --header-height: 8rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --container-padding: var(--space-8);
  }
}