/* Motyw „Szmaragd i złoto” — głęboka zieleń, aksamitna faktura, złote linie.
   Nakładka na style.css (i opcjonalnie motion.css). Dwa kroje pisma bez zmian. */

:root {
  --night: #041a16;
  --night-2: #0c3a31;
  --emerald-deep: #041a16;
  --emerald: #0c3a31;
  --pearl: #f3ead7;
  --onyx: #06130f;
  --lilac: #d9b25a;        /* akcent ogólny → złoto */
  --rose: #d9b25a;         /* przyciski, fokus → złoto */
  --rose-light: #f0d68a;
  --amethyst: #8a6a22;     /* akcent na jasnym tle → ciemne złoto */
  --gold: #d9b25a;
  --gold-light: #f0d68a;
  --gold-deep: #a97e2c;
  --gold-line: color-mix(in srgb, #d9b25a 38%, transparent);
  --gold-hair: color-mix(in srgb, #d9b25a 18%, transparent);
  --texture: url(../img/szmaragd-zloto.jpg);
  --radius: 6px;
}
[data-theme] [data-room],
[data-theme][data-room] {
  --room-bg: #041a16;
  --room-glow: #0c3a31;
  --room-accent: #d9b25a;
  --room-ink: #8a6a22;
}

::selection { background: var(--gold); color: var(--onyx); }
body { background: var(--night); }

/* ---------- Złote elementy wspólne ---------- */
/* Wyróżnienia w nagłówkach tylko kursywą, w kolorze reszty tekstu */
h1 em, h2 em, h3 em, .display em, .manifest__sign em { color: inherit; }
.label { letter-spacing: .22em; }

.btn {
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 45%, var(--gold-deep));
  border-color: transparent;
  color: var(--onyx);
  letter-spacing: .06em;
}
.btn:hover { background: linear-gradient(135deg, #f8e7b4, var(--gold-light) 50%, var(--gold)); border-color: transparent; }
.btn--ghost { background: transparent; color: var(--gold-light); border-color: var(--gold-line); }
.btn--ghost:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--gold-light); border-color: var(--gold); }

/* ---------- Nagłówek i stopka ---------- */
.site-header {
  background: color-mix(in srgb, #031511 90%, transparent);
  border-bottom: 1px solid var(--gold-hair);
  backdrop-filter: blur(10px);
}
.site-header .logo { color: var(--gold-light); }
.site-header .logo__mark, .site-footer__logo .logo__mark, .home-hero__logo .logo__mark { fill: url(#vc-gold); }
.site-nav__group + .site-nav__group { border-left-color: var(--gold-hair); }
.site-nav a:not(.btn):hover { color: var(--gold-light); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--gold); }
.site-nav a:not(.btn)::after { background: var(--gold) !important; }
.mobile-menu { background: #031511; }
.mobile-menu .rooms a { border-bottom-color: var(--gold-hair); }

.site-footer {
  background:
    linear-gradient(180deg, #031511 0%, color-mix(in srgb, #031511 92%, transparent) 100%),
    var(--texture) center / cover;
  border-top: 1px solid var(--gold-line);
}
.site-footer__logo { color: var(--gold); }
.site-footer__title { color: var(--gold); }
.site-footer__legal { border-top-color: var(--gold-hair); }

/* ---------- Hero strony głównej ---------- */
.home-hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - var(--header-h));
  display: grid;
  align-items: center;
  background:
    radial-gradient(60% 55% at 50% 48%, rgba(3, 18, 15, .88) 0%, rgba(3, 18, 15, .55) 60%, rgba(3, 18, 15, .35) 100%),
    linear-gradient(180deg, rgba(3, 18, 15, .25), rgba(3, 18, 15, .9)),
    var(--texture) center / cover no-repeat;
}
.home-hero::after {
  /* cienka złota rama w stylu art déco */
  content: "";
  position: absolute;
  inset: clamp(14px, 2.4vw, 32px);
  border: 1px solid var(--gold-line);
  border-radius: 999px 999px 4px 4px / 220px 220px 4px 4px;
  pointer-events: none;
  z-index: -1;
}
.home-hero__logo { color: var(--gold); filter: drop-shadow(0 2px 18px rgba(0, 0, 0, .45)); }
.home-hero h1 { color: var(--pearl); }
.home-hero .lead {
  position: relative;
  padding-top: 28px;
  color: color-mix(in srgb, var(--pearl) 88%, transparent);
}
.home-hero .lead::before {
  /* złoty ornament: linia — romb — linia */
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 140px; height: 9px;
  transform: translateX(-50%);
  background:
    linear-gradient(var(--gold), var(--gold)) left center / 58px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right center / 58px 1px no-repeat;
}
.home-hero .lead::after {
  content: "";
  position: absolute;
  top: 1px; left: 50%;
  width: 6px; height: 6px;
  background: var(--gold);
  transform: translateX(-50%) rotate(45deg);
}

/* ---------- Manifest ---------- */
.on-glow {
  background:
    linear-gradient(rgba(5, 32, 27, .9), rgba(5, 32, 27, .9)),
    var(--texture) center 30% / cover;
}
.manifesto__lines li { border-color: var(--gold-hair) !important; }

/* ---------- Karty pokoi ---------- */
#pokoje { background: var(--night); }
.room-card {
  background:
    linear-gradient(165deg, rgba(14, 64, 54, .82), rgba(3, 20, 17, .94) 70%),
    var(--texture) center / cover;
  border: 1px solid var(--gold-line);
  border-radius: 200px 200px var(--radius) var(--radius) / 120px 120px var(--radius) var(--radius);
  padding-top: clamp(48px, 5vw, 72px);
}
.room-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--gold-hair);
  border-radius: inherit;
  pointer-events: none;
}
.room-card:hover { border-color: var(--gold); box-shadow: 0 28px 70px -36px rgba(217, 178, 90, .45); }
.room-card__name { color: var(--pearl); }
.room-card__line, .room-card__go { color: var(--gold-light); }
.room-card__fact { color: var(--gold-light); font-weight: 600; }

/* ---------- Pozostałe sekcje ---------- */
.soon__about a, .studio a { color: var(--gold-light); }
.on-light .label, .on-light-2 .label { color: var(--gold-deep); }
.on-light { background: var(--pearl); }
.on-light-2 { background: #ebe0c8; }
.paths > div { border-color: var(--gold-line); background: rgba(243, 234, 215, .04); }
.paths h3 { color: var(--gold-light); }
.tier--featured { border-color: var(--gold-deep); box-shadow: inset 0 0 0 1px var(--gold-deep); }
.cta-photo::before { background: rgba(4, 26, 22, .82); }
.room-hero, .page-head { background: linear-gradient(180deg, rgba(4, 26, 22, .7), rgba(4, 26, 22, .96)), var(--texture) center / cover; }