/* Bespoke design tokens — Bella on the Bay (Excelsior, MN)
   Base system: salon-spa  |  Tuned: warm dusty-rose, lakeside boutique character.
   No brand colors supplied by client; palette derived from tone brief:
   "warm, elevated, boutique — community-minded but polished; lakeside local feel."
   Brand shifted to a warmer dusty rose (#a85570) from system mauve (#8a4f63)
   to feel approachable and community-warm while staying firmly elevated.
   Accent cooled to lake-sunset amber (#9a6b1e).
   Type, radius, and motion unchanged from system — Cormorant Garamond / Jost
   pairing is exactly right for boutique lakeside salon.
   Density kept airy (112 px section rhythm). */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Jost:wght@400;500;600&display=swap');

:root {
  /* ── Surfaces & ink ─────────────────────────────────────────── */
  --bg:            #fffcfa;
  --surface:       #faf4f6;
  --ink:           #2a2025;
  --ink-strong:    #1c1418;
  --muted:         #675057;
  --line:          #ece1e5;

  /* ── Brand palette ──────────────────────────────────────────── */
  /* #a85570 on white = 4.996:1 — passes WCAG AA body text threshold    */
  --brand:         #a85570;
  --brand-dark:    #7a3f55;
  --brand-tint:    #fdf0f4;
  --on-brand:      #ffffff;

  /* ── Accent (lake-sunset amber) ─────────────────────────────── */
  --accent:        #9a6b1e;

  /* ── Hero, header, footer, band ─────────────────────────────── */
  --hero-bg:       radial-gradient(1000px 480px at 88% -10%, #fdf0f4, transparent), #fdf7f9;
  --header-bg:     rgba(255, 252, 250, .88);
  --footer-bg:     #f7edf1;
  --band-bg:       #1e1218;
  --on-band:       #f7edf1;
  --on-band-muted: #c4b0b8;

  /* ── Typography ─────────────────────────────────────────────── */
  --font-heading:  'Cormorant Garamond', Georgia, serif;
  --font-body:     'Jost', system-ui, sans-serif;
  --fs-base:       17px;
  --lh-body:       1.72;
  --fw-body:       400;
  --fw-head:       600;
  --lh-head:       1.08;
  --ls-head:       0em;
  --fs-lead:       1.22rem;
  --fs-h1:         clamp(2.75rem, 5.5vw, 4.5rem);
  --fs-h2:         clamp(1.85rem, 3.6vw, 2.7rem);
  --fs-h3:         1.4rem;

  /* ── Layout & spacing ───────────────────────────────────────── */
  --container:     1140px;
  --gutter:        28px;
  --section-y:     112px;
  --hero-y:        120px;
  --nav-h:         78px;
  --space-3:       12px;
  --space-4:       18px;
  --space-5:       30px;
  --space-6:       36px;
  --space-7:       68px;
  --btn-pad:       16px 34px;

  /* ── Shape & shadow ─────────────────────────────────────────── */
  --radius:        4px;
  --radius-lg:     10px;
  --radius-pill:   999px;
  --shadow:        0 10px 34px rgba(122, 63, 85, .10);
  --shadow-lg:     0 26px 58px rgba(122, 63, 85, .15);

  /* ── Motion ─────────────────────────────────────────────────── */
  --dur:           300ms;
  --ease:          cubic-bezier(.4, 0, .2, 1);
}

/* ── Utility overrides scoped to this brand ────────────────────── */
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .2em; }
.btn     { text-transform: uppercase; letter-spacing: .08em; font-weight: 500; }
.card .ic { background: var(--brand-tint); color: var(--brand-dark); }