/*
 * CECIL Official v1.0.122 — color design completion layer.
 * LINE promotion banner is intentionally excluded from this file.
 * Color / contrast only. No copy, layout, spacing, image source or reservation logic changes.
 */
:root{
  --cecil-ivory:#F7F3EA;
  --cecil-offwhite:#FAF7EF;
  --cecil-warm-beige:#EAE2D3;
  --cecil-text:#4B4238;
  --cecil-taupe:#665D52;
  --cecil-greige-brown:#756A5D;
  --cecil-muted:#736C62;
  --cecil-accent:#C9D8A6;
  --cecil-accent-hover:#B9C98F;
  --cecil-accent-deep:#A7B77D;
  --cecil-accent-soft:#E3EBCF;
  --cecil-accent-ink:#66734C;
  --cecil-accent-faint:rgba(201,216,166,.10);
}

/* ---------------------------------------------------------
   Brand mark
   Keep the original artwork, but remove the strong orange/gold cast so it
   belongs to the ivory / taupe / sage system. No image file is replaced.
--------------------------------------------------------- */
.site-header .site-brand img,
.site-footer .footer-brand img,
body.home .hero-logo img{
  filter:grayscale(1) sepia(.14) saturate(.38) brightness(1.48) contrast(.92)!important;
  opacity:.96;
}

/* ---------------------------------------------------------
   CTA hierarchy
   Primary = warm sage. Secondary = calm off-white / taupe outline.
--------------------------------------------------------- */
.btn--gold,
.btn-primary,
.btn--primary,
.header-btn--gold,
.button-primary,
body.home .hero-pc-reserve-link--salon,
.first-center-link a,
.reasons-card-link--green,
.reservation-form-shell button,
.reservation-form-shell input[type="submit"],
.reservation-form-shell .button,
.concern-double-cta a:first-child{
  background:linear-gradient(135deg,var(--cecil-accent-soft) 0%,var(--cecil-accent) 58%,var(--cecil-accent-hover) 100%)!important;
  border-color:var(--cecil-accent-deep)!important;
  color:var(--cecil-text)!important;
  box-shadow:0 10px 26px rgba(117,106,93,.13)!important;
}
.btn--gold:hover,.btn--gold:focus-visible,.btn--gold:active,
.btn-primary:hover,.btn-primary:focus-visible,.btn-primary:active,
.btn--primary:hover,.btn--primary:focus-visible,.btn--primary:active,
.header-btn--gold:hover,.header-btn--gold:focus-visible,.header-btn--gold:active,
.button-primary:hover,.button-primary:focus-visible,.button-primary:active,
body.home .hero-pc-reserve-link--salon:hover,
body.home .hero-pc-reserve-link--salon:focus-visible,
.first-center-link a:hover,.first-center-link a:focus-visible,
.reasons-card-link--green:hover,.reasons-card-link--green:focus-visible,
.reservation-form-shell button:hover,.reservation-form-shell button:focus-visible,
.reservation-form-shell input[type="submit"]:hover,.reservation-form-shell input[type="submit"]:focus-visible,
.reservation-form-shell .button:hover,.reservation-form-shell .button:focus-visible,
.concern-double-cta a:first-child:hover,.concern-double-cta a:first-child:focus-visible{
  background:var(--cecil-accent-hover)!important;
  border-color:var(--cecil-accent-ink)!important;
  color:var(--cecil-text)!important;
}

.btn--green,
body.home .hero-pc-reserve-link--dispatch{
  background:rgba(250,247,239,.96)!important;
  border-color:rgba(117,106,93,.55)!important;
  color:var(--cecil-taupe)!important;
  box-shadow:none!important;
}
.btn--green:hover,.btn--green:focus-visible,.btn--green:active,
body.home .hero-pc-reserve-link--dispatch:hover,
body.home .hero-pc-reserve-link--dispatch:focus-visible{
  background:var(--cecil-ivory)!important;
  border-color:var(--cecil-accent-ink)!important;
  color:var(--cecil-text)!important;
}

/* Keep the mobile booking bar hierarchy explicit on both 3-button and 2-button variants. */
@media(max-width:980px){
  .mobile-contact a{
    background:var(--cecil-taupe)!important;
    color:var(--cecil-offwhite)!important;
    border-color:rgba(201,216,166,.26)!important;
  }
  .mobile-contact a:first-child{
    background:var(--cecil-accent)!important;
    color:var(--cecil-text)!important;
    font-weight:700;
  }
  .mobile-contact a:hover,.mobile-contact a:focus-visible,.mobile-contact a:active{
    background:var(--cecil-greige-brown)!important;
    color:var(--cecil-offwhite)!important;
  }
  .mobile-contact a:first-child:hover,
  .mobile-contact a:first-child:focus-visible,
  .mobile-contact a:first-child:active{
    background:var(--cecil-accent-hover)!important;
    color:var(--cecil-text)!important;
  }
}

/* ---------------------------------------------------------
   Readable sage: pale sage remains decoration; small text on light surfaces
   uses a darker sage ink with AA-level contrast against ivory/off-white.
--------------------------------------------------------- */
main :where(
  [class*="kicker"],
  [class*="eyebrow"],
  [class*="section-head"]>span,
  [class*="section-head"]>small,
  [class*="caption"]>span,
  [class*="meta"]>span,
  [class*="step-label"],
  [class*="text-link"],
  [class*="inline-link"],
  [class*="center-link"],
  [class*="flow-link"],
  [class*="category-link"]
){
  color:var(--cecil-accent-ink)!important;
}

/* Common small labels that do not carry a semantic class. */
.reservation-section-head>span,
.reservation-access-copy>span,
.reservation-access-copy dt,
.salon-treatment-grid article>span,
.salon-access-copy dt,
.flow-step-label,
.flow-step-no,
.flow-section-head>span,
.flow-kicker,
.hogushi-kicker,
.hogushi-aroma-grid span,
.hogushi-flow-grid article>span,
.faq-inline-link,
.faq-contact-card>span,
.price-text-link,
.service-menu-text-link,
.service-menu-price-link{
  color:var(--cecil-accent-ink)!important;
}

/* Restore the lighter sage where the background is intentionally dark/photo-based. */
:where(
  .hero,
  .home-hero,
  .cecil-simple-hero,
  [class*="-hero"],
  [class*="--dark"],
  [class*="-final"],
  [class*="final-cta"],
  .section--dark,
  .contact-section,
  .site-footer
) :where(
  [class*="kicker"],
  [class*="eyebrow"],
  [class*="section-head"]>span,
  [class*="section-head"]>small,
  [class*="caption"]>span,
  [class*="meta"]>span,
  [class*="step-label"],
  [class*="text-link"],
  [class*="inline-link"],
  [class*="center-link"],
  [class*="flow-link"],
  [class*="category-link"]
){
  color:var(--cecil-accent)!important;
}
.reservation-final-flow-link,
.reservation-final>div>span,
.hogushi-final-meta span,
.flow-step--dark .flow-step-label,
.flow-step--dark .flow-step-no,
.faq-contact-card>span{
  color:var(--cecil-accent)!important;
}

/* Readable warm headings and labels. The former #928874 is intentionally retired. */
main :where(h1,h2,h3,h4,h5,h6){
  text-rendering:optimizeLegibility;
}
.reservation-page,
.reservation-form-shell label{
  color:var(--cecil-text)!important;
}

/* Reservation form: conversion-critical controls must remain clearly readable. */
.reservation-form-shell input[type="text"],
.reservation-form-shell input[type="email"],
.reservation-form-shell input[type="tel"],
.reservation-form-shell input[type="date"],
.reservation-form-shell input[type="time"],
.reservation-form-shell input[type="number"],
.reservation-form-shell select,
.reservation-form-shell textarea{
  color:var(--cecil-text)!important;
  border-color:rgba(117,106,93,.34)!important;
}
.reservation-form-shell input:focus,
.reservation-form-shell select:focus,
.reservation-form-shell textarea:focus{
  border-color:var(--cecil-accent-ink)!important;
  box-shadow:0 0 0 3px rgba(102,115,76,.12)!important;
}

/* Focus visibility: dark enough on light UI, pale sage on dark/photo UI. */
main :where(a,button,input,textarea,select):focus-visible{
  outline:2px solid var(--cecil-accent-ink)!important;
  outline-offset:3px!important;
}
:where(.site-header,.site-footer,.hero,.home-hero,.cecil-simple-hero,[class*="--dark"],[class*="-final"],.section--dark)
:where(a,button,input,textarea,select):focus-visible{
  outline-color:var(--cecil-accent)!important;
}
.mobile-contact a:focus-visible{
  outline:2px solid var(--cecil-accent)!important;
  outline-offset:-4px!important;
}
.mobile-contact a:first-child:focus-visible{
  outline-color:var(--cecil-accent-ink)!important;
}

/* Fine interaction polish without changing geometry. */
.text-link:hover,
.price-text-link:hover,
.service-menu-text-link:hover,
.service-menu-price-link:hover,
.first-center-link:hover,
.first-final-flow-link:hover,
.faq-inline-link:hover,
.salon-inline-link:hover,
.dispatch-home-inline-link:hover,
.column-hub-center-link:hover,
.recruit-inline-link:hover,
.couple-inline-link:hover,
.about-cecil-text-link:hover,
.about-v2-text-link:hover,
.flow-v2-link:hover,
.concern-flow-link:hover,
.concerns-hub-card-link:hover{
  color:var(--cecil-taupe)!important;
}

/* Explicitly do not style .cecil-line-promo / its link / its close button here. */