:root {
  /* Paleta baseada na imagem */
  --primary: #5483bf;       /* Azul médio (balão) */
  --secondary: #c1cce2;     /* Azul claro */
  --info: #eaf7f8;          /* Azul muito claro (quase branco) */
  --warning: #e5af62;       /* Amarelo/dourado (cesta) */
  --dark: #020101;          /* Preto/quase preto */
  --light: #f8f9fa;         /* Cinza bem claro para fundos */
}

/* Sobrescrevendo as cores padrão do Bootstrap 4 */
.bg-primary { background-color: var(--primary) !important; }
.bg-secondary { background-color: var(--secondary) !important; }
.bg-info { background-color: var(--info) !important; }
.bg-warning { background-color: var(--warning) !important; }
.bg-dark { background-color: var(--dark) !important; }
.bg-light { background-color: var(--light) !important; }

.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-info { color: var(--info) !important; }
.text-warning { color: var(--warning) !important; }
.text-dark { color: var(--dark) !important; }
.text-light { color: var(--light) !important; }

.btn-primary { background-color: var(--primary) !important; border-color: var(--primary) !important; }
.btn-secondary { background-color: var(--secondary) !important; border-color: var(--secondary) !important; }
.btn-info { background-color: var(--info) !important; border-color: var(--info) !important; color: var(--dark) !important; }
.btn-warning { background-color: var(--warning) !important; border-color: var(--warning) !important; }
.btn-dark { background-color: var(--dark) !important; border-color: var(--dark) !important; }
.btn-light { background-color: var(--light) !important; border-color: var(--light) !important; color: var(--dark) !important; }

.navbar {
            background-color: var(--primary) !important;
        }
.nav-link, .navbar-brand {
    color: #fff !important;
}