/* ============================================================
   CRQ semantic color system
   Brand orange is preserved while interactive colors use a darker,
   accessible shade for readable text and button labels.
   ============================================================ */
:root {
  --brand-orange: #F37021;
  --primary: #C45112;
  --primary-dark: #9E3B08;
  --primary-gradient: linear-gradient(135deg, #C45112 0%, #F37021 100%);

  --secondary-bg: #FFF4EC;
  --light-bg: #F6F8FB;
  --surface: #FFFFFF;
  --surface-subtle: #F8FAFC;
  --border: #E2E8F0;

  --dark: #172033;
  --overlay: rgba(15, 23, 42, .56);
  --accent: #2563EB;
  --success: #047857;
  --warning: #A16207;
  --danger: #B91C1C;

  --text-main: #172033;
  --text-secondary: #526078;
  --text-muted: #6B778C;
  --text-white: #FFFFFF;

  /* Bootstrap and the visual overlay consume the same semantic tokens. */
  --bs-primary: var(--primary);
  --bs-primary-rgb: 196, 81, 18;
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-dark);

  --mui-primary: var(--primary);
  --mui-primary-dark: var(--primary-dark);
  --mui-primary-soft: rgba(196, 81, 18, .10);
  --mui-bg: var(--light-bg);
  --mui-surface: var(--surface);
  --mui-surface-subtle: var(--surface-subtle);
  --mui-border: var(--border);
  --mui-text: var(--text-main);
  --mui-text-secondary: var(--text-secondary);
}

.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--text-white);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--text-white);
}

.btn-primary:focus,
.btn-primary.focus {
  box-shadow: 0 0 0 .25rem rgba(196, 81, 18, .22);
}

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

.btn-outline-primary:hover,
.btn-outline-primary:active {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--text-white);
}

.bg-primary { background-color: var(--primary) !important; }
.text-primary { color: var(--primary) !important; }
.border-primary { border-color: var(--primary) !important; }
.bg-primary-gradient { background: var(--primary-gradient) !important; }
.bg-secondary-soft { background-color: var(--secondary-bg) !important; }
.text-accent { color: var(--accent) !important; }
.bg-accent { background-color: var(--accent) !important; }