@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&display=swap");

/* ──────────────────────────────────────────────────────────
   Latina Diva Beauty Salon — warm ivory + ruby + champagne
   ────────────────────────────────────────────────────────── */
:root {
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-display: "Playfair Display", Georgia, serif;
  --font-display-italic-style: italic;

  --ivory: #fff8f0;
  --cream: #f7ecdf;
  --paper: #fffdf9;
  --ink: #211516;
  --muted: #6e5a56;
  --wine: #711d2b;
  --ruby: #a6243d;
  --rose: #d86b82;
  --coral: #ff8a65;
  --gold: #c99735;
  --gold2: #f2c46b;
  --line: rgb(113 29 43 / 0.16);
  --shadow: 0 22px 60px rgb(113 29 43 / 0.18);
  --radius: 28px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --surface-selected: #fde7e3;
  --text-danger: #8d1d2b;
}

/* Brand mark — ruby/gold sphere */
.brand__mark {
  background: radial-gradient(circle at 30% 20%, var(--gold2), var(--ruby) 70%);
}

/* Hero accents — soft glow */
.hero {
  background:
    radial-gradient(70% 60% at 100% 0%, rgb(216 107 130 / 0.35), transparent 68%),
    radial-gradient(50% 40% at 5% 70%, rgb(242 196 107 / 0.35), transparent 65%),
    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));
}

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

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

.cta {
  background: linear-gradient(135deg, var(--ruby), var(--wine));
}

.btn--primary {
  background: linear-gradient(135deg, var(--ruby), var(--wine));
}