/* =========================
   ÁGAPE — Design Tokens
   Bootstrap 5 + CSS Vars
   (sem Sass)
   ========================= */

/* 1) Tokens base (marca) */
:root{
  /* Brand */
  --agape-red:        #E11B22;
  --agape-navy:       #1E2A78;
  --agape-sky:        #5FA9DD;

  /* Neutros */
  --agape-white:      #FFFFFF;
  --agape-black:      #000000;
  --agape-gray-50:    #F8FAFC;
  --agape-gray-100:   #F1F5F9;
  --agape-gray-200:   #E5E7EB;
  --agape-gray-600:   #475569;
  --agape-gray-900:   #0F172A;

  /* Semânticos (decisão de produto) */
  --brand-primary:    var(--agape-red);
  --brand-secondary:  var(--agape-navy);
  --brand-accent:     var(--agape-sky);

  --surface:          var(--agape-white);
  --surface-2:        var(--agape-gray-50);
  --border:           var(--agape-gray-200);
  --text:             var(--agape-gray-900);
  --text-muted:       var(--agape-gray-600);

  --radius-lg:        16px;
  --shadow-soft:      0 10px 30px rgba(15, 23, 42, 0.10);
}

/* 2) Bootstrap Theme Vars (Light) */
:root, [data-bs-theme="light"]{
  --bs-primary:                 var(--brand-primary);
  --bs-secondary:               var(--brand-secondary);
  --bs-info:                    var(--brand-accent);

  --bs-body-bg:                 var(--surface);
  --bs-body-color:              var(--text);
  --bs-border-color:            var(--border);
  --bs-secondary-color:         var(--text-muted);

  --bs-link-color:              var(--brand-secondary);
  --bs-link-hover-color:        color-mix(in srgb, var(--brand-secondary) 75%, #000);

  --bs-border-radius-lg:        var(--radius-lg);
  --bs-box-shadow:              var(--shadow-soft);

  /* Inputs */
  --bs-input-bg:                var(--surface);
  --bs-input-border-color:      var(--border);
  --bs-input-focus-border-color: color-mix(in srgb, var(--brand-accent) 65%, #fff);
  --bs-focus-ring-color:        color-mix(in srgb, var(--brand-accent) 35%, transparent);
}

/* 3) Bootstrap Theme Vars (Dark) */
[data-bs-theme="dark"]{
  /* Unifica com o petróleo do site.css */
  --bs-body-bg:                 #061018; /* era #0B1020 */
  --bs-body-color:              #EAF0FF;
  --bs-border-color:            rgba(255,255,255,0.12);
  --bs-secondary-color:         rgba(234,240,255,0.70);

  /* Importante: bg-dark do Bootstrap estava “fora do universo” */
  --bs-dark:                    #061018;
  --bs-dark-rgb:                6, 16, 24;

  --bs-primary:                 var(--agape-red);
  --bs-secondary:               #2A3AA6;
  --bs-info:                    #7CC0F0;

  --bs-link-color:              var(--bs-info);
  --bs-link-hover-color:        color-mix(in srgb, var(--bs-info) 75%, #fff);

  --bs-input-bg:                rgba(255,255,255,0.04);
  --bs-input-border-color:      rgba(255,255,255,0.14);
  --bs-focus-ring-color:        color-mix(in srgb, var(--bs-info) 30%, transparent);

  --shadow-soft:                0 12px 40px rgba(0,0,0,0.45);
  --bs-box-shadow:              var(--shadow-soft);
}

/* 4) Componentes “premium” usando Bootstrap */
.btn-primary{
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 88%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 88%, #000);
  --bs-btn-focus-shadow-rgb: 95,169,221; /* sky no foco */
}

.btn-outline-secondary{
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-border-color: color-mix(in srgb, var(--bs-secondary) 70%, #fff);
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-hover-color: #fff;
}

.card{
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--bs-box-shadow);
  border-color: var(--bs-border-color);
}

.navbar{
  /* deixa elegante sem brigar com o logo */
  backdrop-filter: blur(10px);
}

/* 5) Utilitários (classes rápidas) */
.bg-surface{ background: var(--surface) !important; }
.bg-surface-2{ background: var(--surface-2) !important; }
.text-muted-2{ color: var(--text-muted) !important; }
.border-soft{ border-color: var(--border) !important; }

.text-agape-red{ color: var(--agape-red) !important; }
.text-agape-navy{ color: var(--agape-navy) !important; }
.text-agape-sky{ color: var(--agape-sky) !important; }

.bg-agape-red{ background: var(--agape-red) !important; }
.bg-agape-navy{ background: var(--agape-navy) !important; }
.bg-agape-sky{ background: var(--agape-sky) !important; }