/* LOCKED tokens — Cypress Salon & Spa (base system: retail, bespoke-tuned)
   Tuned to a warm, refined salon-spa palette: deep mauve brand with a soft
   coral/blush accent, paired with an elegant Cormorant Garamond display serif
   over Inter body. Distinct from the other retail mockups (Jeanna's plum/
   magenta, Spike's barn-green, Lakeshore's greige/brass, I Spa eucalyptus-
   teal+rose-gold). Variable NAMES match _shared/base.css; only values changed.
   Contrast verified for AA (see cypress-salon.design.json). */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');
:root{
  --bg:#ffffff; --surface:#fffdfc; --ink:#33272d; --ink-strong:#1f1419; --muted:#6a5560;
  --line:#efe6ea;
  --brand:#8c3a5e; --brand-dark:#6c2a48; --brand-tint:#f7e6ee; --on-brand:#ffffff;
  --accent:#e2767a;
  --hero-bg:radial-gradient(960px 480px at 88% -10%,#f7e6ee,transparent),
            radial-gradient(720px 400px at 0% 0%,#fdeae6,transparent),#fdf8f9;
  --header-bg:rgba(255,255,255,.86); --footer-bg:#fbf4f6;
  --band-bg:#1f1419; --on-band:#ffffff; --on-band-muted:#c9b6bf;

  --font-heading:'Cormorant Garamond',Georgia,serif; --font-body:'Inter',system-ui,sans-serif;
  --fs-base:17px; --lh-body:1.64; --fw-body:400; --fw-head:700; --lh-head:1.06; --ls-head:-.01em;
  --fs-lead:1.22rem; --fs-h1:clamp(2.7rem,6.2vw,4.6rem); --fs-h2:clamp(2rem,4.2vw,3rem); --fs-h3:1.4rem;

  --container:1140px; --gutter:24px; --section-y:96px; --hero-y:108px; --nav-h:74px;
  --space-3:11px; --space-4:17px; --space-5:27px; --space-6:32px; --space-7:60px;
  --btn-pad:15px 30px;
  --radius:16px; --radius-lg:24px; --radius-pill:999px;
  --shadow:0 10px 30px rgba(31,20,25,.08); --shadow-lg:0 24px 56px rgba(140,58,94,.18);
  --dur:200ms; --ease:cubic-bezier(.16,.84,.34,1);
}
/* Retail base ships a gradient .btn whose contrast isn't guaranteed; override to
   solid --brand mauve (white text passes AA: ~6.4:1). */
.btn{background:var(--brand);color:var(--on-brand)}
.btn:hover{background:var(--brand-dark);filter:none}
.btn.ghost{background:transparent;color:var(--brand)}
.btn.ghost:hover{background:var(--brand-tint)}
/* Eyebrow + links use the deep mauve --brand (AA on white); the soft coral
   --accent is reserved for decorative card-icon glyphs on a warm blush tile. */
.eyebrow{color:var(--brand)}
.card .ic{background:#fdeae6;color:var(--brand)}