/* @fonts bodoni-moda:500,600|nunito-sans:400,600,700 */
/*
 * Motyw „Uroda” — salony fryzjerskie, kosmetyczne, spa, gabinety masażu.
 * Czysta biel (bez kremu), przygaszona śliwka jako kolor marki, szałwia w sekcji otwierającej
 * i w wyróżnieniach. Nagłówki: kontrastowy Bodoni Moda, tekst: Nunito Sans. Duże, miękkie promienie,
 * karty bez ramek na delikatnie śliwkowej szarości.
 */
:root {
  --font-body: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --font-display: "Bodoni Moda", "Didot", Georgia, serif;
  --display-weight: 500;
  --display-tracking: -0.015em;
  --text-base: 1.0625rem;

  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f6f2f5;
  --border: #e6dde4;
  --border-strong: #ae9cab;
  --text: #2a1b29;
  --text-2: #4a3a49;
  --muted: #6b5a69;

  --primary: #7a4872;
  --primary-ink: #ffffff;
  --primary-soft: #f2e6f0;
  --link: #6c3d65;

  --accent: #7f9779;
  --accent-ink: #2a3a27;
  --accent-soft: #e8efe5;
  --accent-on: #111a0f;

  --ok: #2c6a49;
  --danger: #a32a3a;

  --header-bg: #ffffff;
  --header-text: #2a1b29;
  --header-border: #e6dde4;

  --hero-bg: #e8efe5;
  --hero-text: #2a1b29;
  --hero-muted: #45384a;

  --footer-bg: #2d1a2b;
  --footer-text: #eadfe8;
  --footer-muted: #b9a2b5;
  --footer-border: rgba(255, 255, 255, .14);
  --footer-heading: #ffffff;

  --radius: 14px;
  --radius-lg: 28px;
  --shadow: 0 0 0 1px var(--border-strong);
}

/* cienkie kreski Bodoniego giną w małym stopniu — drobne nagłówki są większe i mocniejsze */
h1 { font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.4rem); line-height: 1.08; }
h3, .entry__name { font-size: 1.25rem; font-weight: 600; letter-spacing: 0; }
.brand { font-size: 1.5rem; font-weight: 500; }
.brand__mark { border-radius: 50%; background: transparent; color: var(--link); box-shadow: inset 0 0 0 1px var(--primary); }

/* karty leżą na tle zamiast w ramce */
.entry-card { border-color: transparent; background: var(--surface-2); padding: 24px; }
.entry-card:hover { border-color: var(--border-strong); box-shadow: none; }
.panel { border-color: transparent; background: var(--surface-2); }
.btn { padding-inline: 22px; }
.badge { border-radius: 999px; padding-inline: 10px; }
.site-footer :focus-visible, .site-footer .input:focus { outline-color: var(--footer-text); }