/* =============================================
   variables.css — Design tokens globais
   ============================================= */

:root {
  /* Cores */
  --color-primary:    #002266;
  --color-mid:        #0044BB;
  --color-accent:     #0099FF;
  --color-surface:    #001844;
  --color-text:       #FFFFFF;
  --color-text-muted: rgba(255, 255, 255, .6);
  --color-whatsapp:   #25D366;

  /* Tipografia */
  --font-display:     'Montserrat', sans-serif;
  --fw-black:         900;
  --fw-bold:          700;
  --fw-regular:       400;

  /* Bordas */
  --radius-card:      16px;
  --radius-btn:       50px;

  /* Sombras */
  --shadow-card:      0 8px 32px rgba(0, 0, 0, .35);
  --shadow-glow:      0 0 24px rgba(0, 153, 255, .3);

  /* Transições */
  --transition-base:  250ms ease;
  --transition-slow:  500ms cubic-bezier(.16, 1, .3, 1);

  /* Z-index */
  --z-navbar:         100;
  --z-dialog:         200;

  /* Espaçamento de seções (atualizado nos breakpoints em base.css) */
  --section-pad-v:    4rem;
  --section-pad-h:    1.25rem;
  --container-max:    1200px;

  /* Breakpoints (referência documental — usar em @media diretamente) */
  --bp-md:            768px;
  --bp-lg:            1024px;
}