/* ==========================================================================
   LAYER 1: :ROOT TOKENS & GLOBAL ACCESSIBILITY STATES
   Safe, semantic foundations for the entire web application layout context.
   ========================================================================== */
:root {
  /* Global Canvas Framework */
  --bg-app-main: #f2f8ff;            /* Central Light Blue main backdrop */
  --bg-card-surface: #ffffff;        /* Pure White card surfaces */
  --border-neutral-subtle: rgba(0, 74, 119, 0.08);

  /* Typography & High-Contrast Gray Scale */
  --text-dark-primary: #1e293b;      /* High-contrast charcoal text for body copy */
  --text-gray-muted: #595959;        /* 4.5:1 WCAG compliant gray text replacement */

  /* Theme Core Design Tokens */
  --theme-purple-dark: #671f78;      /* Primary Actions, Headers, Custom Brand Buttons */
  --theme-purple-light: #c0a2c7;     /* Purple Tint backdrops / Danger backgrounds */
  
  --theme-green-dark: #006835;       /* Success Content text and boundaries */
  --theme-green-light: #bbd7c9;      /* Success backdrop containers */
  
  --theme-orange-dark: #a85b10;      /* Warning Content text and boundaries */
  --theme-orange-light: #f8f1ea;     /* Warning alert layouts */
  
  --theme-blue-dark: #004a77;        /* Informational Content / Secondary actions */
  --theme-blue-light: #9cb8ca;       /* Info container states */

  /* Structural Rules */
  --border-radius-base: 10px;
  --shadow-card-subtle: 0 4px 12px rgba(15, 23, 42, 0.04);
}

/* Base Document Overrides */
html, body {
  background-color: var(--bg-app-main) !important;
  color: var(--text-dark-primary) !important;
}

/* Global Text and Placeholder Contrast Fixes */
small, .text-muted, .time-stamp, .text-gray-300, .text-gray-400 {
  color: var(--text-gray-muted) !important;
}
[contenteditable="true"]:empty:not(:focus):before,
.form-content-editable[contenteditable="true"]:empty:not(:focus):before {
  color: var(--text-gray-muted) !important;
}

/* Global Focus Ring Safety System */
.form-control:focus, .custom-select:focus, .page-link:focus {
  border-color: var(--theme-purple-dark) !important;
  box-shadow: 0 0 0 0.2rem rgba(103, 31, 120, 0.22) !important;
}


/* ==========================================================================
   LAYER 2: EXPLICIT COMPONENT REFACTOR & DEVTOOLS WINNERS
   Direct overrides targeting known, specific elements to prevent regressions.
   ========================================================================== */

/* The DevTools High-Specificity Target ( book-preparation-for-class.css ) */
.teaching-card-purple .teaching-card-bestfor,
.teaching-card .teaching-card-bestfor {
  color: var(--theme-purple-dark) !important;
}

/* Generic Layout Standard Cards Conversion to White */
.card, .card-container {
  background: var(--bg-card-surface) !important;
  background-color: var(--bg-card-surface) !important;
  background-image: none !important;
  border: 1px solid var(--border-neutral-subtle) !important;
  border-radius: var(--border-radius-base) !important;
  box-shadow: var(--shadow-card-subtle) !important;
}
.card-header {
  border-bottom: 1px solid var(--border-neutral-subtle) !important;
  background: var(--bg-card-surface) !important;
}

/* Explicit Onboarding & Login Views Layout Targets */
.onboarding-auth-shell {
  background-size: cover;
  background-image: url('../img/svg/BackgroundLogin.svg');
  background-color: var(--bg-app-main);
  background-repeat: no-repeat;
  background-position: initial;
}
.auth-card-view {
  min-width: 400px;
  max-width: 460px;
  padding: 2.5rem !important;
  margin-top: 10vh;
}
.auth-card-logo {
  height: 140px;
  margin: -20px auto 1rem auto;
  display: block;
}
.btn-passport-submit {
  width: 100%;
  height: 60px;
  font-size: 1.25rem;
}
.loginFonts {
  font-family: inherit;
  font-weight: 700;
  font-size: 2rem;
  color: var(--theme-purple-dark) !important;
  text-align: center;
  display: block;
  margin-bottom: 1.5rem;
}


/* ==========================================================================
   LAYER 3: PRECISE FRAMEWORK REMAPS (PRESERVING SEMANTIC MEANING)
   Maintains separation of intent across standard layout hooks.
   ========================================================================== */

/* Custom App Identity Elements */
.btn-heroes-made {
  background-color: var(--theme-purple-dark) !important;
  border-color: var(--theme-purple-dark) !important;
  color: #ffffff !important;
  font-weight: 600;
  border-radius: 36px !important;
  padding: 0.5rem 1.5rem;
  transition: all 0.2s ease-in-out;
}
.btn-heroes-made:hover, .btn-heroes-made:focus {
  background-color: #4b1458 !important;
  border-color: #4b1458 !important;
  color: #ffffff !important;
}
.link-heroes-made {
  color: var(--theme-purple-dark) !important;
  text-decoration: underline !important;
  font-weight: 600;
}
.link-heroes-made:hover {
  color: #4b1458 !important;
}

/* Framework Primary Actions (Mapped to brand Purple) */
.btn-primary, .bg-primary {
  background-color: var(--theme-purple-dark) !important;
  border-color: var(--theme-purple-dark) !important;
  color: #ffffff !important;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: #4b1458 !important;
  border-color: #4b1458 !important;
}

/* Framework Success Actions (Mapped to dark Green) */
.text-success { color: var(--theme-green-dark) !important; }
.btn-success, .bg-success {
  background-color: var(--theme-green-dark) !important;
  border-color: var(--theme-green-dark) !important;
  color: #ffffff !important;
}
.alert-success, .bg-success-50, .bg-success-100 {
  background-color: var(--theme-green-light) !important;
  color: var(--theme-green-dark) !important;
  border-color: var(--theme-green-dark) !important;
}

/* Framework Warning Actions (Mapped to dark Orange) */
.text-warning { color: var(--theme-orange-dark) !important; }
.btn-warning, .bg-warning {
  background-color: var(--theme-orange-dark) !important;
  border-color: var(--theme-orange-dark) !important;
  color: #ffffff !important;
}
.alert-warning, .bg-warning-50, .bg-warning-100 {
  background-color: var(--theme-orange-light) !important;
  color: var(--theme-orange-dark) !important;
  border-color: var(--theme-orange-dark) !important;
}

/* Framework Danger Alerts (Mapped to Purple Light/Dark Matrix to align with design goals) */
.text-danger { color: var(--theme-purple-dark) !important; }
.btn-danger, .bg-danger {
  background-color: var(--theme-purple-dark) !important;
  border-color: var(--theme-purple-dark) !important;
  color: #ffffff !important;
}
.alert-danger, .bg-danger-50, .bg-danger-100 {
  background-color: var(--theme-purple-light) !important;
  color: var(--theme-purple-dark) !important;
  border-color: var(--theme-purple-dark) !important;
}

/* Framework Informational Contexts (Mapped to dark Blue to protect identity differences) */
.text-info { color: var(--theme-blue-dark) !important; }
.btn-info, .bg-info {
  background-color: var(--theme-blue-dark) !important;
  border-color: var(--theme-blue-dark) !important;
  color: #ffffff !important;
}
.btn-info:hover, .btn-info:focus {
  background-color: #003352 !important;
  border-color: #003352 !important;
}
.alert-info, .bg-info-50, .bg-info-100 {
  background-color: var(--theme-blue-light) !important;
  color: var(--theme-blue-dark) !important;
  border-color: var(--theme-blue-dark) !important;
}

/* Strip dynamic background gradient utility overlays safely */
.bg-trans-gradient, .bg-primary-gradient, .bg-info-gradient, 
.bg-success-gradient, .bg-warning-gradient, .bg-danger-gradient, 
.bg-fusion-gradient, .bg-brand-gradient {
  background-image: none !important;
}