.hero-gradient {
    background: linear-gradient(var(--bs-primary), var(--bs-secondary));
}

.hero-parallax {
    height: 600px;
    background: var(--bs-tertiary-bg);
}

/* Custom Utilities for PIV Digital */
.mw-350 {
    max-width: 350px;
}

.mh-300 {
    max-height: 300px;
}

.min-h-300 {
    min-height: 300px;
}

.w-250 {
    width: 250px;
}

.w-30 {
    width: 30px;
}

.w-150 {
    width: 150px;
}

/* Heading Font Override */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    font-family: var(--bs-heading-font-family);
}

/* Font Demos */
.font-heading-demo {
    font-family: var(--bs-heading-font-family) !important;
}

.font-body-demo {
    font-family: var(--bs-body-font-family) !important;
}

/* Ensure all headings inside body demo use the body font for representation */
.font-body-demo h1, .font-body-demo h2, .font-body-demo h3, 
.font-body-demo h4, .font-body-demo h5, .font-body-demo h6,
.font-body-demo .h1, .font-body-demo .h2, .font-body-demo .h3, 
.font-body-demo .h4, .font-body-demo .h5, .font-body-demo .h6 {
    font-family: inherit !important;
}

/* Gradient Demos */
.bg-gradient-demo-1 { background: linear-gradient(135deg, var(--bs-primary), var(--bs-secondary)); }
.bg-gradient-demo-2 { background: linear-gradient(135deg, var(--bs-primary), var(--bs-success)); }
.bg-gradient-demo-3 { background: linear-gradient(135deg, var(--bs-primary), var(--bs-info)); }
.bg-gradient-demo-4 { background: linear-gradient(135deg, var(--bs-primary), var(--bs-warning)); }
.bg-gradient-demo-5 { background: linear-gradient(135deg, var(--bs-primary), var(--bs-danger)); }
.bg-gradient-demo-6 { background: linear-gradient(135deg, var(--bs-secondary), var(--bs-success)); }
.bg-gradient-demo-7 { background: linear-gradient(135deg, var(--bs-secondary), var(--bs-info)); }
.bg-gradient-demo-8 { background: linear-gradient(135deg, var(--bs-secondary), var(--bs-warning)); }
.bg-gradient-demo-9 { background: linear-gradient(135deg, var(--bs-secondary), var(--bs-danger)); }
.bg-gradient-demo-10 { background: linear-gradient(135deg, var(--bs-success), var(--bs-info)); }
.bg-gradient-demo-11 { background: linear-gradient(135deg, var(--bs-warning), var(--bs-danger)); }
.bg-gradient-demo-12 { background: linear-gradient(135deg, var(--bs-dark), var(--bs-primary)); }

/* Button Color Inheritance Fixes (Bootstrap 5.2+ way) */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    color: var(--bs-primary-on);
}

.btn-secondary {
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-active-bg: var(--bs-secondary);
    --bs-btn-active-border-color: var(--bs-secondary);
    --bs-btn-disabled-bg: var(--bs-secondary);
    --bs-btn-disabled-border-color: var(--bs-secondary);
    color: var(--bs-secondary-on);
}

.btn-success {
    --bs-btn-bg: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-bg: var(--bs-success);
    --bs-btn-hover-border-color: var(--bs-success);
    --bs-btn-active-bg: var(--bs-success);
    --bs-btn-active-border-color: var(--bs-success);
    --bs-btn-disabled-bg: var(--bs-success);
    --bs-btn-disabled-border-color: var(--bs-success);
    color: var(--bs-success-on);
}

.btn-info {
    --bs-btn-bg: var(--bs-info);
    --bs-btn-border-color: var(--bs-info);
    --bs-btn-hover-bg: var(--bs-info);
    --bs-btn-hover-border-color: var(--bs-info);
    --bs-btn-active-bg: var(--bs-info);
    --bs-btn-active-border-color: var(--bs-info);
    --bs-btn-disabled-bg: var(--bs-info);
    --bs-btn-disabled-border-color: var(--bs-info);
    color: var(--bs-info-on);
}

.btn-warning {
    --bs-btn-bg: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-bg: var(--bs-warning);
    --bs-btn-hover-border-color: var(--bs-warning);
    --bs-btn-active-bg: var(--bs-warning);
    --bs-btn-active-border-color: var(--bs-warning);
    --bs-btn-disabled-bg: var(--bs-warning);
    --bs-btn-disabled-border-color: var(--bs-warning);
    color: var(--bs-warning-on);
}

.btn-danger {
    --bs-btn-bg: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-bg: var(--bs-danger);
    --bs-btn-hover-border-color: var(--bs-danger);
    --bs-btn-active-bg: var(--bs-danger);
    --bs-btn-active-border-color: var(--bs-danger);
    --bs-btn-disabled-bg: var(--bs-danger);
    --bs-btn-disabled-border-color: var(--bs-danger);
    color: var(--bs-danger-on);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-primary-on);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-active-color: var(--bs-primary-on);
}

.btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-hover-color: var(--bs-secondary-on);
    --bs-btn-active-bg: var(--bs-secondary);
    --bs-btn-active-border-color: var(--bs-secondary);
    --bs-btn-active-color: var(--bs-secondary-on);
}

.btn-outline-success {
    --bs-btn-color: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-bg: var(--bs-success);
    --bs-btn-hover-border-color: var(--bs-success);
    --bs-btn-hover-color: var(--bs-success-on);
    --bs-btn-active-bg: var(--bs-success);
    --bs-btn-active-border-color: var(--bs-success);
    --bs-btn-active-color: var(--bs-success-on);
}

.btn-outline-info {
    --bs-btn-color: var(--bs-info);
    --bs-btn-border-color: var(--bs-info);
    --bs-btn-hover-bg: var(--bs-info);
    --bs-btn-hover-border-color: var(--bs-info);
    --bs-btn-hover-color: var(--bs-info-on);
    --bs-btn-active-bg: var(--bs-info);
    --bs-btn-active-border-color: var(--bs-info);
    --bs-btn-active-color: var(--bs-info-on);
}

.btn-outline-warning {
    --bs-btn-color: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-bg: var(--bs-warning);
    --bs-btn-hover-border-color: var(--bs-warning);
    --bs-btn-hover-color: var(--bs-warning-on);
    --bs-btn-active-bg: var(--bs-warning);
    --bs-btn-active-border-color: var(--bs-warning);
    --bs-btn-active-color: var(--bs-warning-on);
}

.btn-outline-danger {
    --bs-btn-color: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-bg: var(--bs-danger);
    --bs-btn-hover-border-color: var(--bs-danger);
    --bs-btn-hover-color: var(--bs-danger-on);
    --bs-btn-active-bg: var(--bs-danger);
    --bs-btn-active-border-color: var(--bs-danger);
    --bs-btn-active-color: var(--bs-danger-on);
}

/* Badges preenchidos usam o on-color da cor base (text-bg-* também) */
.badge.bg-primary, .text-bg-primary { color: var(--bs-primary-on) !important; }
.badge.bg-secondary, .text-bg-secondary { color: var(--bs-secondary-on) !important; }
.badge.bg-success, .text-bg-success { color: var(--bs-success-on) !important; }
.badge.bg-info, .text-bg-info { color: var(--bs-info-on) !important; }
.badge.bg-warning, .text-bg-warning { color: var(--bs-warning-on) !important; }
.badge.bg-danger, .text-bg-danger { color: var(--bs-danger-on) !important; }
.badge.bg-dark, .text-bg-dark { color: var(--bs-dark-on) !important; }
.badge.bg-light, .text-bg-light { color: var(--bs-light-on) !important; }

/* Hero sobre bg-primary: texto e botões usam o on-color (funciona p/ primary clara ou escura) */
.hero-text { color: var(--bs-primary-on) !important; }
.hero-btn {
    background-color: var(--bs-primary-on) !important;
    color: var(--bs-primary) !important;
    border: 1px solid var(--bs-primary-on) !important;
}
.hero-btn:hover, .hero-btn:focus {
    background-color: var(--bs-primary) !important;
    color: var(--bs-primary-on) !important;
    border-color: var(--bs-primary-on) !important;
}
.hero-btn-outline {
    color: var(--bs-primary-on) !important;
    border-color: var(--bs-primary-on) !important;
}
.hero-btn-outline:hover, .hero-btn-outline:focus {
    background-color: var(--bs-primary-on) !important;
    color: var(--bs-primary) !important;
}

/* Design System Utilities */
.tracking-wider-piv { letter-spacing: 0.1em; }
.icon-demo-box span { font-size: 0.6rem; }

/* Theme Visibility */
/* Default (Light Mode) */
.d-theme-dark {
    display: none !important;
}

/* Dark Mode */
:root[data-bs-theme="dark"] .d-theme-light {
    display: none !important;
}

:root[data-bs-theme="dark"] .d-theme-dark {
    display: inline-block !important;
}

/* Masonry Layout */
.masonry-grid {
    column-count: 1;
    column-gap: 1.5rem;
    width: 100%;
}

@media (min-width: 768px) {
    .masonry-grid {
        column-count: 2;
    }
}

.masonry-item {
    display: inline-block;
    width: 100%;
    margin-bottom: 1.5rem;
    break-inside: avoid;
}

/* ==========================================================================
   55 Finance — EXCEÇÃO À REGRA
   Primary é o amarelo 55 (#DEFF4A), claríssimo. Serve como fundo (com
   on-color escuro), mas NÃO como tinta (texto/ícone/outline) sobre fundos
   claros. Nestas superfícies (tema claro) a "tinta" da marca é o grafite
   profundo (secondary). No tema escuro o amarelo lê bem e é mantido.
   ========================================================================== */

/* Outline primary: borda+texto grafite no repouso; hover mantém fundo
   amarelo com texto escuro (on-color) */
[data-bs-theme="light"] .btn-outline-primary {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-hover-color: var(--bs-primary-on);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-secondary);
    --bs-btn-active-color: var(--bs-primary-on);
}

/* Texto e ícones com .text-primary em superfícies claras → grafite */
[data-bs-theme="light"] .text-primary {
    color: var(--bs-secondary) !important;
}

/* Link ativo no menu (tema claro) → grafite */
[data-bs-theme="light"] .nav-link-active {
    color: var(--bs-secondary) !important;
}

/* ==========================================================================
   Botões — ajustes de tema (design system)
   1) Sólido secundário no DARK: invertido — fundo branco, texto grafite.
      (grafite sobre superfície escura desaparece)
   2) Contorno secundário no DARK: borda+texto brancos, senão some no escuro.
   3) Contorno success/warning no LIGHT: GOLD/55 são claros demais p/ branco
      → borda+texto escuros (on-color) para garantir leitura.
   ========================================================================== */

/* 1) Sólido secundário no dark → fundo branco + texto grafite */
[data-bs-theme="dark"] .btn-secondary {
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: #ffffff;
    --bs-btn-hover-bg: color-mix(in srgb, #ffffff, #000 8%);
    --bs-btn-hover-border-color: #ffffff;
    --bs-btn-active-bg: color-mix(in srgb, #ffffff, #000 12%);
    --bs-btn-active-border-color: #ffffff;
    --bs-btn-disabled-bg: #ffffff;
    --bs-btn-disabled-border-color: #ffffff;
    color: var(--bs-secondary) !important;
}

/* 2) Contorno secundário no dark → borda+texto brancos */
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: #ffffff;
    --bs-btn-border-color: #ffffff;
    --bs-btn-hover-bg: #ffffff;
    --bs-btn-hover-border-color: #ffffff;
    --bs-btn-hover-color: var(--bs-secondary);
    --bs-btn-active-bg: #ffffff;
    --bs-btn-active-border-color: #ffffff;
    --bs-btn-active-color: var(--bs-secondary);
}

/* 3) Contorno success/warning no light → borda+texto escuros (on-color) */
[data-bs-theme="light"] .btn-outline-success,
[data-bs-theme="light"] .btn-outline-warning {
    --bs-btn-color: var(--bs-success-on);
    --bs-btn-border-color: var(--bs-success-on);
    --bs-btn-hover-bg: var(--bs-success);
    --bs-btn-hover-border-color: var(--bs-success);
    --bs-btn-hover-color: var(--bs-success-on);
    --bs-btn-active-bg: var(--bs-success);
    --bs-btn-active-border-color: var(--bs-success);
    --bs-btn-active-color: var(--bs-success-on);
}