:root{
  /* Tokens comunes */
  --brand: #c2185b;
  --brand-ink: #fff;
  --ink: #222;
  --paper: #fff;
  --muted: #6c757d;
  --surface: #ffffff;
  --surface-border: #e9ecef;
  --focus-ring: rgba(194,24,91,.25);
  /* Bridge para que cualquier CSS que use --bs-primary tome el color del tema */
  --bs-primary: var(--brand);
  --bs-primary-contrast: var(--brand-ink);
}

/* Reset/ajustes */
html, body { height: 100%; }
body { background: var(--paper); color: var(--ink); }

/* Navbar genérica (color vendrá del tema) */
.app-navbar{
  background: var(--brand);
}
.app-navbar .navbar-brand,
.app-navbar .nav-link,
.app-navbar .navbar-toggler{
  color: var(--brand-ink) !important;
}
.navbar-toggler{ border-color: rgba(255,255,255,.35); }
.navbar-toggler-icon{ filter: invert(1) grayscale(100%) brightness(200%); }

/* Tarjetas y enfoque UI */
.card {
  border: 1px solid var(--surface-border);
  background: var(--surface);
}
.form-control:focus, .form-select:focus, textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem var(--focus-ring);
}

/* Botón principal de marca */
.btn-brand{
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: color-mix(in srgb, var(--brand) 85%, #000 15%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--brand) 85%, #000 15%);
}