/* ════════════════════════════════════════════════════════════
   THEME · sable  —  nakładka na _core/assets/base.css
   (paleta :root + warstwa tożsamości; base żyje w rdzeniu)
   ════════════════════════════════════════════════════════════ */

:root {
  --paper:       #F6F1EA;
  --paper-2:     #EBE2D5;
  --rose:        #C8A17E;   /* karmel / latte akcent */
  --rose-deep:   #B0855F;   /* karmel głębszy */
  --rose-pale:   #F1E7DA;   /* mleczny beż */
  --ink:         #3A322B;   /* ciepły taupe = tekst */
  --ink-2:       #6B6055;
  --ink-3:       #9A8D7E;
  --ink-4:       #CFC6B8;
  --line:        rgba(58, 50, 43, .09);

  --f-serif: 'DM Serif Display', 'Times New Roman', serif;
  --f-sans:  'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --max:    1240px;
  --gutter: max(24px, 5vw);

  --r-sm: 4px;
  --r-md: 12px;
  --r-lg: 24px;
  --r-pill: 999px;

  --ease:      cubic-bezier(.16, .84, .24, 1);
  --t-fast:    .25s var(--ease);
  --t-mid:     .45s var(--ease);
  --t-slow:    .8s var(--ease);
}

/* ════════════════════════════════════════════════════════════
   ░░ AURORA SABLÉ — warstwa tożsamości (override) ░░
   Łagodne latte/nude: ciepło, jasno, karmelowy akcent
   ════════════════════════════════════════════════════════════ */

/* DM Serif Display jest mocniejszy niż Cormorant — lekko zmiękczamy */
h1, h2, h3, h4 { letter-spacing: -.005em; line-height: 1.04; }
.eyebrow { color: var(--rose-deep); letter-spacing: .24em; }
::selection { background: var(--rose); color: #fff; }

/* — ciepłe tło całości + miękki gradient w hero — */
body { background: var(--paper); }
.hero {
  background:
    radial-gradient(90% 70% at 82% 22%, rgba(200,161,126,.18) 0%, rgba(200,161,126,0) 55%),
    linear-gradient(180deg, #FBF7F1 0%, var(--paper) 100%);
}
.hero__title em { color: var(--rose-deep); font-style: italic; }

/* — NAV: ciepły blur + karmelowy znak — */
.nav { background: rgba(246,241,234,.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.nav__logo-mark { background: var(--rose); box-shadow: 0 0 0 4px var(--rose-pale); }
.nav__links a:hover { color: var(--rose-deep); }

/* — FRAME: miękka kremowa karta z karmelowym pierścieniem (monogram) — */
.frame {
  position: relative; aspect-ratio: 1 / 1.08; border-radius: 220px 220px 28px 28px;
  background:
    radial-gradient(120% 80% at 50% 18%, #FFFCF7 0%, var(--rose-pale) 60%, #E7D9C6 100%);
  border: 1px solid rgba(176,133,95,.28);
  box-shadow: 0 40px 80px -46px rgba(120,92,60,.55), inset 0 1px 0 rgba(255,255,255,.6);
  overflow: hidden;
}
.frame__ring {
  position: absolute; top: 14%; left: 50%; width: 52%; aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%;
  border: 1.5px solid rgba(176,133,95,.55);
  box-shadow: inset 0 0 0 10px rgba(255,252,247,.5), 0 0 0 1px rgba(176,133,95,.18);
}
.frame__ring::after {
  content: ""; position: absolute; inset: 26%; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #F4E7D6, var(--rose) 75%, var(--rose-deep) 100%);
  opacity: .9;
  animation: sable-breathe 6s var(--ease) infinite alternate;
}
.frame__inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 38px; }
.frame__big { font-family: var(--f-serif); font-size: clamp(44px, 7vw, 74px); color: var(--ink); line-height: .9; }
.frame__big em { font-style: italic; color: var(--rose-deep); }
.frame__sub { font-family: var(--f-sans); font-size: 11px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--ink-3); margin-top: 12px; }
@keyframes sable-breathe { from { transform: scale(.97); } to { transform: scale(1.03); } }

/* — SERVICES: subtelny karmelowy indeks zamiast krzykliwego — */
.svc-tab.is-active { color: var(--rose-deep); border-color: var(--rose-deep); }
.svc { position: relative; }
.svc::before {
  content: attr(data-srv-id);
  position: absolute; top: -6px; right: 4px;
  font-family: var(--f-serif); font-size: clamp(56px, 10vw, 128px); line-height: .8;
  color: var(--rose); opacity: .10; pointer-events: none; z-index: 0;
}
.svc__main, .svc__aside { position: relative; z-index: 1; }
.svc__facts dd { color: var(--rose-deep); }

/* — ATELIER: ciepły latte pierścień portretu — */
.member__portrait {
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.65), transparent 55%),
    linear-gradient(150deg, var(--member-tone, var(--rose)) 0%, #E7D2B8 100%);
  box-shadow: inset 0 0 0 1px rgba(58,50,43,.06), 0 18px 38px -24px rgba(120,92,60,.5);
}
.member__init { font-family: var(--f-serif); color: var(--ink); }
.member__btn { color: var(--rose-deep); }

/* — VOICES: ciepłe kremowe karty — */
.voices { background: linear-gradient(180deg, var(--paper) 0%, #F0E7DA 100%); }
.vcard { background: #FFFCF7; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 22px 46px -34px rgba(120,92,60,.4); }
.vcard__mark, .vcard__stars { color: var(--rose); }
.voices__google span:first-child { color: var(--rose-deep); }

/* — GALERIA: ciepłe placeholdery — */
.gphoto--placeholder { background: linear-gradient(135deg, var(--paper-2), var(--rose-pale)); }

/* — CONTACT: jasny blok godzin z karmelowym „dziś" — */
.contact__hours { background: #FFFCF7; border: 1px solid var(--line); border-radius: 20px; padding: 32px 34px; box-shadow: 0 22px 46px -36px rgba(120,92,60,.35); }
.contact__hours td { padding-left: 4px; padding-right: 4px; }
.contact__hours tr.is-today td { color: var(--rose-deep); font-weight: 600; }
@media (max-width: 640px) { .contact__hours { padding: 24px 22px; } }

/* — FOOTER: ciepły, jasny taupe (nie czarny) — */
.footer { background: #2E2823; color: rgba(246,241,234,.78); }
.footer a { color: rgba(246,241,234,.78); }
.footer a:hover { color: var(--rose); }
.footer__logo-mark { background: var(--rose); }
.footer__col-label { color: rgba(246,241,234,.5); }
.footer__bottom { border-top-color: rgba(246,241,234,.12); }

/* — FLOATING CTA + drawer akcenty — */
.float-cta { background: var(--ink); color: var(--paper); }
.float-cta:hover { background: var(--rose); color: var(--ink); }
.drawer__title em, .drawer__steps span.is-active { color: var(--rose-deep); }
.opt:hover { border-color: var(--rose); }
.opt.is-selected { border-color: var(--rose-deep); background: var(--rose-pale); }
.slot.is-selected, .datebar__day.is-selected { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.success__mark { background: var(--rose); color: #fff; }