:root {
  --brand-900: #0a5ea8;   /* deep navy-ish blue */
  --brand-700: #117cd6;   /* primary blue */
  --brand-500: #1ea7ff;   /* accent (lightsky-like) */
  --brand-300: #88d1ff;   /* pale */
  --brand-50:  #eef8ff;

  --brand-gradient: linear-gradient(135deg, var(--brand-900), var(--brand-700) 50%, var(--brand-500));
}

.bg-gradient-brand { background: var(--brand-gradient); }
.text-brand-accent { color: var(--brand-300); }

.btn-brand {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-700);
  --bs-btn-border-color: var(--brand-700);
  --bs-btn-hover-bg: var(--brand-900);
  --bs-btn-hover-border-color: var(--brand-900);
}

.hero {
  background: radial-gradient(1200px 600px at -10% -30%, var(--brand-300) 0%, transparent 40%) ,
              var(--brand-gradient);
  color: #fff;
}

.card-soft {
  border: 0;
  box-shadow: 0 8px 24px rgba(2, 26, 58, .08);
  border-radius: 1rem;
}

pre.code {
  background:#0b1020;
  color:#e6edf3;
  padding:1rem;
  border-radius:.75rem;
  overflow:auto;
  margin-top: .25rem;
  margin-bottom:1rem;  /* ensure spacing before/after buttons */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  line-height:1.4;
}


/* tables */
.table thead th { white-space: nowrap; }
.badge-soft { background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-300); }

/* improve small screens spacing */
@media (max-width: 576px) {
  .navbar .btn { padding: .25rem .5rem; }
  .copy-row { flex-direction: column; align-items: flex-start !important; gap: .5rem; }
}

/* Slightly darker app background */
body.bg-body-tertiary {
    background-color: #e5e7eb !important;  /* Tailwind-ish gray-200 */
}

/* Give cards a stronger edge + softer, deeper shadow */
.card.shadow-sm {
    border-radius: 0.75rem; /* optional, for nicer corners */
    border: 1px solid rgba(148, 163, 184, 0.6); /* slate-400 */
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10); /* subtle but visible */
    background-color: #ffffff;
}