/* ==========================================================================
   FashionBookings — "Editorial Warm" theme layer
   Better Design tokens: editorial-warm
     canvas  #f7f1e8  (warm cream)      ink   #2b2521
     card    #fdfaf4                   terracotta #99482f (used sparingly)
     accent  #f9e7e1 / #893a20         radius 24px
     Fraunces (display serif) · Inter (body)
   Loaded after site.css, so it only overrides tokens + a few components.
   ========================================================================== */

:root {
  --bg: #f7f1e8;
  --fg: #2b2521;
  --card: #fdfaf4;
  --surface: #fdfaf4;
  --secondary: #ffffff;
  --muted-fg: #69625d;
  --primary: #99482f;
  --primary-fg: #fcfaf6;
  --accent: #893a20;
  --accent-soft: #f9e7e1;
  --border: #e3d9cb;
  --danger: #df2225;
  --star: #b9762a;

  --radius: 24px;
  --radius-sm: 12px;
  --radius-lg: 28px;

  --shadow-2xs: 0 1px 2px rgba(43, 37, 33, .05);
  --shadow-xs: 0 1px 3px rgba(43, 37, 33, .06);
  --shadow-sm: 0 1px 2px rgba(43, 37, 33, .05), 0 1px 1px rgba(43, 37, 33, .04);
  --shadow-md: 0 2px 6px rgba(43, 37, 33, .07), 0 1px 2px rgba(43, 37, 33, .05);
  --shadow-lg: 0 6px 14px rgba(43, 37, 33, .08), 0 0 0 1px rgba(43, 37, 33, .04);

  --serif: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sans-var: "Inter", ui-sans-serif, system-ui, sans-serif;
}

body { font-family: var(--sans); background: var(--bg); letter-spacing: -.002em; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.015em; }
h1 { font-size: clamp(2.3rem, 5vw, 3.5rem); font-weight: 600; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
h3 { font-size: 1.1rem; }
.hero h1 { max-width: 18ch; }
.hero .lede { font-size: 1.14rem; color: #4a423c; }

/* ---------- editorial labels ---------- */
.chip, .hero .kicker, .topbar, .share span.lbl {
  font-family: var(--sans-var); font-weight: 600; letter-spacing: .14em;
}
.hero .kicker { background: var(--accent-soft); color: var(--accent); text-transform: uppercase; font-size: .72rem; }
.chip { background: var(--accent-soft); color: var(--accent); }

/* ---------- frosted-glass pills ---------- */
.btn {
  font-family: var(--sans-var); font-weight: 600;
  background: rgba(255, 255, 255, .72);
  color: var(--primary);
  border: 1px solid rgba(153, 72, 47, .32);
  border-radius: 999px;
  padding: 12px 22px;
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .65), inset 0 -1.5px 0 rgba(255, 255, 255, .2),
              0 1px 3px rgba(43, 37, 33, .05), 0 2px 6px rgba(43, 37, 33, .05);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(153, 72, 47, .16); }
.btn.ghost { background: transparent; color: var(--fg); border-color: var(--border); backdrop-filter: none; }
.btn.small { padding: 9px 16px; }
/* the one place terracotta goes solid: the primary action on a card */
.pcard .btn.small.wide {
  background: var(--primary); color: var(--primary-fg); border-color: var(--primary);
  border-radius: 999px; backdrop-filter: none;
  box-shadow: 0 1px 2px rgba(43, 37, 33, .12);
}
.pcard .btn.small.wide:hover { box-shadow: 0 4px 12px rgba(153, 72, 47, .22); }

/* ---------- header ---------- */
.topbar { background: #2b2521; color: #f3ece2; letter-spacing: .06em; text-transform: none; }
header.site { background: rgba(247, 241, 232, .86); backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(43, 37, 33, .08); }
.logo { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; }
.logo .mark { background: var(--primary); color: var(--primary-fg); border-radius: 14px; font-family: var(--sans-var); font-size: .78rem; }
nav.main a { font-weight: 500; font-size: .92rem; letter-spacing: .01em; }
nav.main a:hover, nav.main a[aria-current="page"] { background: rgba(255, 255, 255, .7); color: var(--primary); }
.searchbox { background: rgba(255, 255, 255, .7); border-color: var(--border); }

/* ---------- cards ---------- */
.catcard, .postcard, .pcard, .tool, .deal {
  background: var(--card); border-color: rgba(43, 37, 33, .09);
  box-shadow: var(--shadow-sm);
}
.catcard .ico { background: var(--accent-soft); color: var(--accent); border-radius: 16px; }
.pcard .thumb { background: #fff; }
.pcard h3 { font-family: var(--sans-var); font-weight: 600; font-size: .93rem; letter-spacing: 0; }
.pcard .price { font-family: var(--serif); font-weight: 600; font-size: 1.22rem; }
.pcard .thumb img { height: 190px; }
section.tint { background: var(--card); border-color: rgba(43, 37, 33, .08); }
.hero { background: radial-gradient(900px 340px at 8% -12%, #fbeade 0%, transparent 62%); border-bottom: 1px solid rgba(43, 37, 33, .08); }
footer.site { background: #2b2521; color: #cfc6ba; }
footer.site h4 { color: #f3ece2; letter-spacing: .14em; font-family: var(--sans-var); }
footer.site a { color: #f3ece2; }
footer.site .logo { color: #f3ece2; }
footer.site .logo .mark { background: #f3ece2; color: #2b2521; }

/* ---------- prose ---------- */
.prose { font-size: 1.08rem; }
.prose h2 { font-family: var(--serif); margin-top: 2em; }
.prose h3 { font-family: var(--sans-var); font-weight: 600; }
.answer { background: var(--accent-soft); border-color: rgba(153, 72, 47, .22); }
.answer strong { color: var(--accent); }
details.faq { background: var(--card); border-color: rgba(43, 37, 33, .09); }
.callout.info { background: var(--accent-soft); border-color: rgba(153, 72, 47, .2); }
.callout.info > strong { color: var(--accent); }
.prose table th { background: #f1e7da; }

/* photography-led: bigger, calmer images */
.postcard img { height: 210px; }
figure img { border-radius: var(--radius); }