@import url("/landing-base.css");
@import url("/landing-motion.css");
@import url("/hero-typing.css");

:root {
  --cf-midnight:       #0f2942;
  --cf-midnight-deep:  #091e30;
  --cf-midnight-soft:  #163554;
  --cf-teal:           #0f766e;
  --cf-teal-mid:       #0d9488;
  --cf-teal-bright:    #14b8a6;
  --cf-teal-light:     #ccfbf1;
  --cf-teal-xlight:    #f0fdfa;
  --cf-accent:         #06b6d4;
  --cf-white:          #ffffff;
  --cf-ink:            #0f172a;
  --cf-muted:          #64748b;
  --cf-paper:          #f8fafc;
  --cf-paper-bright:   #ffffff;

  /* Aliases so existing landing.css rules work */
  --primary:        var(--cf-teal);
  --primary-dark:   var(--cf-midnight);
  --primary-mid:    var(--cf-teal-mid);
  --primary-light:  var(--cf-teal-light);
  --primary-xlight: var(--cf-teal-xlight);
  --text-on-primary: var(--cf-white);
  --bg-body:        #f0fdfb;
  --bg-card:        var(--cf-white);
  --text-main:      var(--cf-ink);
  --text-muted:     var(--cf-muted);
  --border-light:   var(--cf-teal-light);
}

/* CampusFlow exact landing logo */
.landing-brand-mark {
  background: transparent !important;
  box-shadow: none !important;
}

.landing-brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none !important;
  -webkit-filter: none !important;
}

/* CampusFlow landing logo sizing v1
   Header/footer use the same approved mark at a compact wordmark scale. */
.landing-brand-mark {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.landing-brand-mark img {
  width: 100% !important;
  height: 100% !important;
  max-width: 30px;
  max-height: 30px;
  object-fit: contain;
  display: block;
  filter: none !important;
  -webkit-filter: none !important;
}

@media (max-width: 640px) {
  .landing-brand-mark {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px;
  }
  .landing-brand-mark img {
    max-width: 27px;
    max-height: 27px;
  }
}