:root {
  /* ==========================================================================
     PALETA DE CORES OFICIAIS — SQUADRON ZELADORIA
     ========================================================================== */
  --color-navy-darkest: #04080F;
  --color-navy-deep: #070E18;
  --color-navy-primary: #0D1B2A; /* Azul Marinho Oficial: RGB 13, 27, 42 */
  --color-navy-surface: #132438;
  --color-navy-card: #182C44;
  --color-navy-border: #1E3755;
  --color-navy-hover: #234062;

  /* Dourado Metálico Oficial: #D4AF37 / RGB 212, 175, 55 */
  --color-gold-light: #F7E39A;
  --color-gold-bright: #E5C358;
  --color-gold-primary: #D4AF37;
  --color-gold-dark: #A8841B;
  --color-gold-shadow: rgba(212, 175, 55, 0.28);
  --color-gold-glow: rgba(212, 175, 55, 0.45);

  /* Cinzas & Neutros Oficiais */
  --color-gray-light: #E6E6E6; /* Cinza Claro Oficial */
  --color-gray-silver: #C0C0C0;
  --color-gray-muted: #A3AEC0; /* clareado p/ contraste AA sobre navy */
  --color-white: #FFFFFF;
  --color-black: #020407;

  /* Status */
  --color-whatsapp: #25D366;
  --color-whatsapp-hover: #20BA59;
  --color-success: #10B981;
  --color-danger: #FF7A7A;

  /* ==========================================================================
     GRADIENTES LUXUOSOS
     ========================================================================== */
  --gradient-gold: linear-gradient(135deg, #F9E7A2 0%, #D4AF37 50%, #9F7A15 100%);
  --gradient-gold-text: linear-gradient(135deg, #FFFFFF 0%, #F5D77F 40%, #D4AF37 80%, #B88E1B 100%);
  --gradient-gold-hover: linear-gradient(135deg, #FFF0B8 0%, #E2BE45 50%, #AC881F 100%);
  --gradient-navy-hero: linear-gradient(180deg, rgba(4, 8, 15, 0.78) 0%, rgba(13, 27, 42, 0.92) 65%, #070E18 100%);
  --gradient-navy-radial: radial-gradient(circle at 50% 20%, rgba(24, 44, 68, 0.8) 0%, #070E18 85%);
  --gradient-navy-card: linear-gradient(145deg, rgba(19, 36, 56, 0.85) 0%, rgba(11, 22, 35, 0.95) 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);

  /* ==========================================================================
     SOMBRAS & ELEVAÇÕES
     ========================================================================== */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.65);
  --shadow-gold: 0 8px 30px rgba(212, 175, 55, 0.3);
  --shadow-gold-lg: 0 12px 45px rgba(212, 175, 55, 0.4);
  --shadow-inner-gold: inset 0 0 15px rgba(212, 175, 55, 0.15);

  /* ==========================================================================
     GLASSMORPHISM & BORDAS
     ========================================================================== */
  --glass-bg: rgba(13, 27, 42, 0.75);
  --glass-header: rgba(7, 14, 24, 0.9);
  --glass-border: 1px solid rgba(212, 175, 55, 0.22);
  --glass-border-subtle: 1px solid rgba(255, 255, 255, 0.08);
  --glass-blur: blur(18px);

  /* ==========================================================================
     TIPOGRAFIA — Montserrat (voz da marca) + Inter (leitura)
     ========================================================================== */
  --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-family: var(--font-body); /* compatibilidade com regras antigas */

  /* Escala tipográfica fluida */
  --fs-display: clamp(2.3rem, 1.5rem + 3.4vw, 4.25rem);
  --fs-h2: clamp(1.8rem, 1.3rem + 2.1vw, 2.9rem);
  --fs-h3: clamp(1.15rem, 1.03rem + 0.55vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 0.98rem + 0.34vw, 1.22rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;

  /* Entrelinha e tracking */
  --lh-tight: 1.05;
  --lh-heading: 1.14;
  --lh-body: 1.7;
  --tracking-display: -0.025em;
  --tracking-caps: 0.14em;

  /* Ritmo vertical */
  --space-section: clamp(72px, 8vw, 118px);
  --space-block: clamp(40px, 5vw, 60px);

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.55s cubic-bezier(0.16, 1, 0.3, 1);

  /* Foco acessível e métricas de layout */
  --focus-ring: 0 0 0 3px var(--color-navy-darkest), 0 0 0 6px var(--color-gold-primary);
  --header-height: 84px;
}
