/* ClearPerfects portal palette — loaded only for BRAND=clearperfects. */
:root {
  --teal-50: #eff7ff;
  --teal-100: #dcebfa;
  --teal-500: #247ed0;
  --teal-600: #145fa8;
  --teal-700: #0b477e;
  --grad-brand: linear-gradient(90deg, #0b3157, #247ed0 55%, #0b3157);
  --charcoal: #0b2846;
  --charcoal-2: #17456c;
  --gold: #2996d5;
  --gold-deep: #145fa8;
  --gold-text: #0d5796;
}
html, body { background: linear-gradient(180deg,#f8fbff,#edf5fd); }
body.auth-page { background: linear-gradient(180deg,#f8fbff,#e8f2fc); }
.auth-brand { width: min(245px,75vw); max-width: 75vw; height: auto; object-fit: contain; }
.brand-logo { width: auto; max-width: 220px; height: 46px; object-fit: contain; }
body.doc-app .doc-nav-btn.active { background: #0b3157; color: #fff; }
body.doc-app .btn-primary, .auth-page .btn-primary { background: linear-gradient(135deg,#0b477e,#247ed0); }
body.doc-app .doc-side { border-right-color: #dcebfa; }
@media (max-width: 640px) { .brand-logo { max-width: 180px; height: 36px; } }