@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,600;1,6..96,400&family=Lato:wght@300;400&display=swap');

/* ===================================================================
   Wealthfluency booking website - brand overrides
   Source of truth: brand/BRAND-GUIDELINES.md (v6.4)
   Repo copy: delivery-engine/trafft/booking-site-custom.css
   Presentation only. No copy, no booking flow, no service visibility.
   =================================================================== */

:root,
.booking-layout,
.dl {
  /* brand tokens */
  --wf-navy:      #1b1f3b;
  --wf-amber:     #e28217;
  --wf-amber-dk:  #9c5300;
  --wf-parchment: #F4EFE6;
  --wf-body:      #3a3530;
  --wf-muted:     #6b5f52;
  --wf-border:    #ddd5c4;
  --wf-ease:      cubic-bezier(0.16, 1, 0.3, 1);

  /* Trafft's own variables, remapped to brand values */
  --font-color:          #3a3530;
  --theme-color-text:    #3a3530;
  --color-graphite:      #6b5f52;
  --color-graphite-rgb:  107, 95, 82;
  --theme-color-border:  #ddd5c4;
  --color-metal:         #ddd5c4;
  --color-metal-rgb:     221, 213, 196;
  --color-concrete:      #ddd5c4;
}

/* --- Typography ---------------------------------------------------
   Trafft's font picker offers no Lato and no Bodoni, so both faces are
   loaded here. The picker is set to Montserrat as the fallback only. */

body,
button, input, select, textarea,
.ui-button, .el-input__inner, .par-sm-med {
  font-family: 'Lato', -apple-system, 'Helvetica Neue', sans-serif !important;
}

body {
  font-weight: 300;
  line-height: 1.7;
}

h1, h2, h3, h4, h5,
.service-dg__info__it__main__title {
  font-family: 'Bodoni Moda', 'Bodoni 72 Book', Georgia, serif !important;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.15;
  color: #1b1f3b;
}

.service-dg__info__it__main__title {
  font-weight: 600;
}

/* Figures are data, not display: Lato with aligned (tabular) numerals.
   Data & Number Design Language, BRAND-GUIDELINES.md. */
h6,
.ui-cal, .ui-cal *,
.booking-ts, .booking-ts *,
.booking-time-slot-wrapper, .booking-time-slot-wrapper *,
.service-dg-dcl, .service-dg-dcl * {
  font-family: 'Lato', sans-serif !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

h6 {
  color: #3a3530;
  font-weight: 400;
  line-height: 1.4;
}

/* --- Colour corrections -------------------------------------------
   The initials avatar defaults to a lime tint. Lime is a retired 2019
   colour and explicitly banned. */

.ui-avatar {
  background: rgba(27, 31, 59, 0.08) !important;
}

.ui-avatar__text {
  color: #1b1f3b !important;
}

/* The required-field marker ships as Trafft red. Red is a Signal Palette
   colour and is banned outside diagnostic graphics, so the marker is set
   in Deep Amber - the sanctioned amber text colour on light surfaces.
   Validation error states are left red: those are genuine alerts. */

.el-form-item__label::before {
  color: #9c5300 !important;
}

/* The Text Content block on the booking form ships on a cold grey.
   Parchment is the brand's warm surface. */

.bs-gi__cf__tc {
  background: #F4EFE6 !important;
}

/* --- The amber accent rule ----------------------------------------
   2px tall, 28px wide, square ends, one per page. The logo mark is the
   only other amber on the site and sits outside the count. */

.booking__wrapper__content__step__header__left > h4::before,
.booking-header-mobile__title > h4::before,
.service-dg__info__it__main__title::before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  background: #e28217;
  border-radius: 0;
  margin: 0 0 14px;
}

/* --- Motion and focus ---------------------------------------------- */

.ui-button,
a,
.ui-cal__day,
.booking-time-slot-wrapper {
  transition: background-color .2s cubic-bezier(0.16, 1, 0.3, 1),
              color .2s cubic-bezier(0.16, 1, 0.3, 1),
              border-color .2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

:focus-visible {
  outline: 2px solid #1b1f3b !important;
  outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}