/* PrepApex color bridge for the original BCG practice app; exercise content and behavior stay intact. */
:root {
  --brand: #054a4a;
  --brand-2: #095470;
  --brand-3: #1aa2d9;
  --brand-4: #decda2;
  --primary: var(--brand);
  --primary-foreground: #fff;
  --ring: var(--brand-2);
  --background: #fff;
  --foreground: #102f31;
  --card: #fff;
  --card-foreground: #102f31;
  --border: #d0dcda;
  --muted: #f3f6f5;
  --muted-foreground: #53696a;
  --accent: #e8f2f3;
  --accent-foreground: #102f31;
}

/* Keep the chatbot's existing controls, but use the PrepApex palette rather than the old neon experiment. */
.bg-primary { background-color: var(--brand) !important; }
.text-primary { color: var(--brand) !important; }
.border-primary { border-color: var(--brand) !important; }
.text-primary-foreground { color: var(--primary-foreground) !important; }
.hover\:bg-primary\/90:hover { background-color: var(--brand-2) !important; }
.bg-primary\/10 { background-color: #e3eff0 !important; }
.bg-emerald-500, .bg-emerald-400, .bg-emerald-600 { background-color: #3b8579 !important; }
.bg-emerald-50 { background-color: #e9f3f0 !important; }
.text-emerald-700, .text-emerald-800 { color: #17675e !important; }
.text-emerald-600, .text-emerald-500 { color: #246f66 !important; }
.border-emerald-200, .border-emerald-300 { border-color: #b8d4cd !important; }

html, body { background: #fff; color: #102f31; }
img[alt="PrepApex mark"] { display: block; width: 40px !important; height: 40px !important; max-width: 40px !important; max-height: 40px !important; object-fit: contain !important; }
a { text-underline-offset: 3px; }
:focus-visible { outline: 3px solid #1aa2d9; outline-offset: 2px; }
::selection { background: rgba(26, 162, 217, .22); color: #102f31; }