@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..700&family=Manrope:wght@300;400;500;600;700;800&display=swap");

/* ──────────────────────────────────────────────────────────
   Royal Velvet Salon & Spa — plum, velvet, champagne gold
   Editorial feel with paper-noise body + serif display
   ────────────────────────────────────────────────────────── */
:root {
  --font-body: "Manrope", system-ui, sans-serif;
  --font-display: "Fraunces", "Palatino Linotype", serif;

  /* Tokens mapped onto the shell's variable names */
  --ivory: #faf6ee; /* page background (cream) */
  --cream: #f4ecdd; /* secondary surface */
  --paper: #fffef8; /* card surface */
  --ink: #1f1018; /* deep plum-ink for text */
  --muted: #6b5560; /* muted plum */
  --wine: #1b0818; /* deepest plum (footers / dark sections) */
  --ruby: #2a0e25; /* primary brand plum */
  --rose: #5c2348; /* velvet (italic accent) */
  --coral: #d9be7f; /* champagne soft */
  --gold: #c9a961; /* gold */
  --gold2: #d9be7f; /* gold-soft */
  --line: rgb(42 14 37 / 0.16);
  --shadow: 0 24px 60px -12px rgb(42 14 37 / 0.32);
  --radius: 22px;
  --ease: cubic-bezier(0.16, 0.84, 0.3, 1);
  --surface-selected: #ede4d4;
  --text-danger: #5c1a2a;
}

/* Display type — Fraunces draws lighter than Playfair, lift weight + tighten leading. */
h1,
h2,
h3,
h4 {
  font-weight: 480;
  letter-spacing: -0.015em;
  line-height: 1.04;
}

h1 em,
h2 em,
h3 em {
  font-style: italic;
  color: var(--rose);
  font-weight: 380;
}

/* Nav — translucent cream with thin gold underline when stuck. */
.nav {
  background: rgb(250 246 238 / 0.78);
  backdrop-filter: blur(14px) saturate(1.2);
}

.nav.stuck {
  background: rgb(250 246 238 / 0.92);
  border-bottom-color: rgb(201 169 97 / 0.4);
}

/* Brand mark — velvet sphere with inset gold ring (royal seal feel). */
.brand__mark {
  width: 40px;
  height: 40px;
  background: radial-gradient(circle at 30% 30%, var(--rose), var(--ruby) 70%);
  box-shadow:
    inset 0 0 0 1px var(--gold),
    0 4px 14px rgb(42 14 37 / 0.28);
  color: var(--gold2);
}

.brand__name em {
  color: var(--rose);
}

/* Eyebrow — gold instead of ruby */
.eyebrow {
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.28em;
}

.eyebrow::before {
  background: var(--gold);
}

/* Hero — softer, broader gold/plum radials */
.hero {
  background:
    radial-gradient(
      800px 400px at 80% -10%,
      rgb(201 169 97 / 0.2),
      transparent 60%
    ),
    radial-gradient(
      600px 500px at -10% 100%,
      rgb(92 35 72 / 0.12),
      transparent 60%
    ),
    var(--ivory);
}

.blob {
  background: linear-gradient(145deg, var(--ruby), var(--wine));
  border-radius: 35% 65% 50% 50% / 55% 42% 58% 45%;
}

.blob2 {
  background: linear-gradient(135deg, var(--gold2), var(--gold));
}

.portrait svg {
  filter: drop-shadow(0 24px 36px rgb(27 8 24 / 0.32));
}

/* Marquee — plum bar with cream type and a gold flourish between phrases. */
.marquee {
  background: var(--ruby);
  color: var(--ivory);
  border-block: 1px solid rgb(201 169 97 / 0.45);
}

.marquee b {
  background: var(--gold);
}

/* Featured cards — paper white with gold top accent (already there) */
.card::before {
  background: linear-gradient(90deg, var(--gold), var(--rose));
}

/* Why (.dark) — deepest plum with gold soft glow */
.dark {
  background: var(--wine);
}

.dark::before {
  background: radial-gradient(circle, rgb(217 190 127 / 0.18), transparent 64%);
}

.dark .eyebrow,
.dark h2 em {
  color: var(--gold2);
}

/* Gallery tiles — alternating plum and gold like a fashion-editorial spread */
.tile {
  background: linear-gradient(135deg, var(--ruby), var(--rose));
}

.tile:nth-child(even) {
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color: var(--wine);
}

.tile:nth-child(even) span {
  background: rgb(27 8 24 / 0.2);
  color: var(--paper);
}

/* CTA — full plum band with gold script accent */
.cta {
  background: linear-gradient(135deg, var(--ruby) 0%, var(--wine) 100%);
}

.cta h2 em {
  color: var(--gold2);
}

.cta .btn {
  color: var(--wine);
  background: var(--gold2);
  box-shadow: 0 12px 30px rgb(42 14 37 / 0.35);
}

/* Buttons — plum/velvet primary with gold hairline */
.btn--primary {
  background: linear-gradient(135deg, var(--ruby), var(--wine));
  border: 1px solid rgb(201 169 97 / 0.35);
  box-shadow: 0 10px 26px rgb(42 14 37 / 0.32);
  color: var(--ivory);
}

.btn--ghost {
  color: var(--ruby);
  border-color: rgb(42 14 37 / 0.22);
}

.btn--gold {
  color: var(--wine);
  background: linear-gradient(135deg, var(--gold), var(--gold2));
}

/* About card — velvet with gold script signature */
.about-card {
  background: linear-gradient(135deg, var(--ruby), var(--wine));
}

.about-card .sig {
  color: var(--gold2);
}

/* Page hero — same palette, lighter touch */
.page-hero {
  background:
    radial-gradient(
      50% 45% at 100% 0%,
      rgb(201 169 97 / 0.28),
      transparent 70%
    ),
    var(--ivory);
}

/* Footer — deep plum with gold text accent already wired to tokens */
.footer {
  background: var(--wine);
}

/* Booking modal: plum/gold step bar accent */
.step-dot::after {
  background: linear-gradient(90deg, var(--ruby), var(--gold));
}