:root {
  /* --- Rootscards Brand (Dark + Masculine) --- */
  --rc-primary: #0B1F2A;      /* Deep navy */
  --rc-secondary: #C6A15B;    /* Muted gold accent */
  --rc-success: #2E7D32;
  --rc-info: #1E88E5;
  --rc-warning: #F59E0B;
  --rc-warning-rgb: 245, 158, 11;
  --rc-danger: #B91C1C;
  --rc-dark: #08131A;         /* Near-black navy */
  --rc-light: #E9EEF2;        /* Cool light surface */

  /* Derived */
  --rc-primary-hover: #0E2A39;

  /* --- Neutral Scale (cool/purple tinted) --- */
  --rc-gray-100: #F5F5F7;
  --rc-gray-200: #E9E9EB;
  --rc-gray-300: #D6D6DA;
  --rc-gray-400: #B4B4BB;
  --rc-gray-500: #92929C;
  --rc-gray-600: #70707B;
  --rc-gray-700: #51515E;
  --rc-gray-800: #33333F;
  --rc-gray-900: #1A1A23;

  /* --- Typography --- */
  --rc-text-body: var(--rc-gray-800);
  --rc-text-muted: var(--rc-gray-600);
  --rc-text-heading: var(--rc-dark);

  /* --- Forms --- */
  --rc-input-bg: #FFFFFF;
  --rc-input-border: var(--rc-gray-300);
  --rc-input-border-hover: var(--rc-gray-500);
  --rc-input-border-focus: var(--rc-primary);
  --rc-input-placeholder: var(--rc-gray-400);
  --rc-focus-ring: rgba(11, 31, 42, 0.20);

  /* --- Bootstrap Theme Variable Overrides (v5) --- */
  --bs-primary: var(--rc-primary);
  --bs-secondary: var(--rc-secondary);
  --bs-success: var(--rc-success);
  --bs-info: var(--rc-info);
  --bs-warning: var(--rc-warning);
  --bs-danger: var(--rc-danger);
  --bs-dark: var(--rc-dark);
  --bs-light: var(--rc-light);

  --bs-body-color: var(--rc-text-body);
  --bs-body-bg: #FFFFFF;

  --bs-link-color: var(--rc-primary);
  --bs-link-hover-color: var(--rc-secondary);

  /* Bootstrap utility classes like .link-primary/.text-primary often depend on RGB vars.
     Define them so they don't fall back to Bootstrap blue. */
  --bs-primary-rgb: 11, 31, 42;
  --bs-info-rgb: 11, 31, 42;
  --bs-link-color-rgb: 11, 31, 42;
}

/* Global defaults (safe fallbacks when Bootstrap variables aren't applied) */
body {
  color: var(--rc-text-body);
  background-color: #FFFFFF;
}

a {
  color: var(--rc-primary);
}

a:hover {
  color: var(--rc-secondary);
}

/* --- Tag UI (pills used across screens) --- */
.badgeb,
.badgec,
.badged {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6em 1.5em;
  font-size: 12px;
  font-weight: 600;
  border-radius: 9999px;
  color: #000000 !important;
  text-decoration: none !important;
}

.badgeb {
  background-color: rgb(236, 236, 236);
}

.badgec {
  background-color: rgb(243, 243, 243);
}

.badged {
  background-color: #F4F6F9;
}

/* Checked-in: orange text on very light orange */
.badged.badged--checkedin {
  background-color: rgba(var(--rc-warning-rgb), 0.08) !important;
  color: #000000 !important;
}

.badgec:visited,
.badgec:hover,
.badgec:focus,
.badgec:active {
  color: #000000 !important;
  text-decoration: none !important;
}

.rc-checkin-btn,
.rc-checkin-btn:visited,
.rc-checkin-btn:hover,
.rc-checkin-btn:focus,
.rc-checkin-btn:active {
  color: #000000 !important;
  text-decoration: none !important;
}

/* ---- Global: remove blue text color ----
   Some pages use Bootstrap utility classes (e.g. .link-primary) which can force blue.
   These overrides ensure links and "info" text follow the brand palette instead.
*/
.link-primary,
.link-primary:visited {
  color: var(--rc-primary) !important;
}

.link-primary:hover,
.link-primary:focus,
.link-primary:active {
  color: var(--rc-secondary) !important;
}

.link-info,
.link-info:visited,
.link-info:hover,
.link-info:focus,
.link-info:active,
.text-info {
  color: var(--rc-primary) !important;
}

/* Bootstrap-like utility alignment (works even on mixed Bootstrap versions) */
.text-primary {
  color: var(--rc-primary) !important;
}

.text-muted {
  color: var(--rc-text-muted) !important;
}

.bg-primary {
  background-color: var(--rc-primary) !important;
}

.btn-primary {
  background-color: var(--rc-primary) !important;
  border-color: var(--rc-primary) !important;
  color: #FFFFFF !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--rc-primary-hover, var(--rc-primary)) !important;
  border-color: var(--rc-primary-hover, var(--rc-primary)) !important;
  color: #FFFFFF !important;
}

.btn-outline-primary {
  color: var(--rc-primary) !important;
  border-color: var(--rc-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--rc-primary) !important;
  border-color: var(--rc-primary) !important;
  color: #FFFFFF !important;
}

/* Text helpers requested */
.text-heading {
  color: var(--rc-text-heading) !important;
}

/* Inputs & Forms */
.form-control,
.form-select,
textarea.form-control {
  background-color: var(--rc-input-bg);
  border-color: var(--rc-input-border);
}

.form-control::placeholder,
textarea.form-control::placeholder {
  color: var(--rc-input-placeholder);
}

.form-control:hover,
.form-select:hover,
textarea.form-control:hover {
  border-color: var(--rc-input-border-hover);
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
  border-color: var(--rc-input-border-focus);
  box-shadow: 0 0 0 0.2rem var(--rc-focus-ring);
}

/* Subtle badge styles (optional utility classes) */
.badge-subtle-primary {
  background: var(--rc-light);
  color: var(--rc-primary);
}

/* Avatars: ensure true circles globally */
.avatar-circle,
.avatar.avatar-circle {
  border-radius: 9999px !important;
  overflow: hidden;
}

.avatar-circle img,
.avatar.avatar-circle img {
  border-radius: inherit;
}

.badge-subtle-success {
  background: #F1F8E9;
  color: var(--rc-secondary);
}

.badge-subtle-warning {
  background: #FFF3E0;
  color: #E65100;
}

.badge-subtle-danger {
  background: #FFEBEE;
  color: #C62828;
}