/* ============================================
   BrokerTrust.ai — Brand Design System
   Colors derived from the shield logo
   ============================================ */

:root {
  /* Brand primaries */
  --bt-red: #D32F2F;
  --bt-blue: #4B9CD3;

  /* Red variants */
  --bt-red-light: rgba(211, 47, 47, 0.08);
  --bt-red-border: rgba(211, 47, 47, 0.35);
  --bt-red-hover: rgba(211, 47, 47, 0.14);
  --bt-red-glow: rgba(211, 47, 47, 0.25);
  --bt-red-dark: #B71C1C;

  /* Blue variants */
  --bt-blue-light: rgba(75, 156, 211, 0.08);
  --bt-blue-border: rgba(75, 156, 211, 0.35);
  --bt-blue-hover: rgba(75, 156, 211, 0.14);
  --bt-blue-glow: rgba(75, 156, 211, 0.25);

  /* Neutrals */
  --bt-text: #111;
  --bt-muted: #666;
  --bt-border: #e7e7e7;
  --bt-soft: #f7f7f7;
  --bt-card: #ffffff;

  /* Status */
  --bt-danger: #b00020;
  --bt-ok: #0b6b2a;

  /* Legacy aliases (so existing var(--blue) still works) */
  --blue: var(--bt-blue);
  --text: var(--bt-text);
  --muted: var(--bt-muted);
  --border: var(--bt-border);
  --soft: var(--bt-soft);
  --card: var(--bt-card);
  --danger: var(--bt-danger);
  --ok: var(--bt-ok);

  /* Seal/badge */
  --bt-primary: var(--bt-blue);
  --bt-navy: #0B1F3B;
  --bt-ice: #F4FAFF;
  --bt-white: #FFFFFF;
}

/* ---- Premium / Paid CTA (red accent) ---- */
.ctaPremium {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--bt-red-light);
  color: var(--bt-red);
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
  border: 1px solid var(--bt-red-border);
  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.ctaPremium:hover {
  background: var(--bt-red-hover);
  box-shadow: 0 4px 14px var(--bt-red-glow);
  transform: translateY(-1px);
}

.ctaPremium:active {
  transform: translateY(0);
}