:root {
  --font-display: 'Playfair Display', serif;
  --font-body: 'Manrope', sans-serif;
  --font-display-letter-spacing: -0.025em;

  --color-background: #faf9f6;
  --color-page-warm: #ebdcc4;
  --color-surface: #faf9f6;
  --color-surface-light: #ffffff;
  --color-surface-soft: #f8efe8;
  --color-on-background: #1a1c1a;
  --color-on-muted: #4c463f;
  --color-primary: #171512;
  --color-primary-container: #2c2926;
  --color-secondary-container: #f4dfcb;
  --color-outline: #7d766f;
  --color-outline-soft: #cec5bd;

  --color-rose: #cf8f80;
  --color-rose-deep: #c98373;
  --color-rose-text: #b97d6d;
  --color-brown-text: #5b4435;
  --color-brown-muted: #7c5e50;
  --color-brown-soft: #7c665a;

  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 38px 60px rgba(90, 61, 43, 0.16);
  --shadow-cta: 0 14px 30px rgba(201, 131, 115, 0.24);

  --gradient-button-dark: linear-gradient(135deg, #171512 0%, #2c2926 100%);
  --gradient-button-dark-hover: linear-gradient(135deg, #000000 0%, #171512 100%);
  --gradient-button-rose: linear-gradient(135deg, #cf8f80 0%, #c98373 100%);
  --gradient-treatments-bg:
    radial-gradient(circle at top center, rgba(214, 163, 147, 0.20) 0%, rgba(214, 163, 147, 0.08) 24%, transparent 55%),
    linear-gradient(180deg, #fbf6f0 0%, #f8efe8 100%);
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-page-warm);
  color: var(--color-on-background);
  font-family: var(--font-body);
}

h1,
h2,
h3,
.font-display-lg,
.font-display-lg-mobile,
.font-headline-lg,
.font-headline-lg-mobile {
  letter-spacing: var(--font-display-letter-spacing);
  text-wrap: balance;
}