/* =====================================================================
   COLOR WOW: kolorystyka Doroty (śliwka · ziemisty brąz · kość słoniowa · butelkowa zieleń)
   Warstwa nadpisująca main.css (zaakceptowany wariant, wdrożony 11.10.2026). Bez zmian w HTML i architekturze.
   Role: śliwka = emocja/scena · brąz = ziemia/autentyczność · beż = oddech · zieleń = rzadki kontrapunkt
   ===================================================================== */

:root {
  /* Jasne */
  --c-bg: #F4EEE6;          /* kość słoniowa: główne tło */
  --c-surface: #FBF7F2;     /* papier */
  --c-surface-alt: #E8DCCE; /* piasek (tła programu, cytatów) */
  /* Tekst */
  --c-text: #2A1C1E;        /* atrament śliwkowo-brązowy 14.2:1 */
  --c-text-2: #5E4B49;      /* 7.1:1 */
  --c-text-3: #6D5A57;      /* 5.6:1 */
  /* Śliwka */
  --c-plum-dark: #4B2142;   /* ciemna śliwka: pola, scena */
  --c-plum: #6E3463;        /* śliwka: akcja, linki, hover (7.8:1 na beżu) */
  --c-plum-light: #C7A4CF;  /* jasna śliwka: akcenty na ciemnym (8.4:1 na bazie) */
  --c-plum-tint: #EADDEB;   /* śliwkowa mgła: delikatne tła */
  /* Brąz */
  --c-brown: #6B4A35;       /* ziemisty brąz: typografia, linie (6.9:1 na beżu) */
  --c-brown-dark: #3E2B20;
  /* Zieleń: kontrapunkt (tylko pas organizatorów i drobne detale) */
  --c-green: #1E4638;       /* 9.2:1 z beżem */
  /* Baza ciemna */
  --c-stage: #1C1317;       /* noc śliwkowo-brązowa */
  --c-stage-surface: #2A1C24;
  --c-stage-text: #F4EEE6;
  --c-stage-text-2: #CDBDC3;
  --c-stage-gold: #C7A4CF;  /* na scenie akcent = jasna śliwka zamiast złota */
  /* Metal: mikro-akcent (wyłącznie dekoracja na jasnym; na ciemnym może być tekstem) */
  --c-gold: #A9875F;
  --c-gold-ink: #6B4A35;    /* „złote” etykiety zastąpione brązem */
  --c-line: #A9875F;
  --c-border: #8A7672;
  /* Akcja */
  --c-bordo: #6E3463;       /* primary = śliwka */
  --c-bordo-strong: #4B2142;
  --c-olive: #1E4638;       /* pas organizatorów = butelkowa zieleń */
  --c-olive-strong: #163428;
  --c-focus-dark: #E3C9EA;
}

body { background: var(--c-bg); }
:focus-visible { outline-color: var(--c-plum); }

/* Typografia: mniej „delikatności”, większy kontrast */
.hero__name { color: var(--c-plum-dark); letter-spacing: -0.02em; }
h2 { letter-spacing: -0.012em; }
.eyebrow { color: var(--c-brown); letter-spacing: 0.1em; }
.tongue { border-color: var(--c-brown); color: var(--c-brown); }
.eyebrow--olive, .organizers .eyebrow { color: var(--c-bg); }
.eyebrow--olive .tongue, .organizers .tongue { border-color: var(--c-bg); color: var(--c-bg); }

/* ---------------------------------------------------------- HERO
   Śliwkowa „przestrzeń sceniczna” za portretem (pole koloru, nie filtr):
   zdjęcie pozostaje naturalne, twarz i instrument bez przyciemnienia. */
.hero__visual { isolation: isolate; }
.hero__visual::before {
  content: ""; position: absolute; z-index: -1;
  inset: 12% -18% -8% 18%;
  background:
    radial-gradient(120% 80% at 20% 15%, rgba(199, 164, 207, .55), rgba(199, 164, 207, 0) 55%),
    linear-gradient(160deg, var(--c-plum) 0%, var(--c-plum-dark) 55%, var(--c-brown-dark) 100%);
}
.hero__portrait { position: relative; z-index: 1; }
.hero__portrait img { box-shadow: 0 30px 60px -30px rgba(28, 19, 23, .55); }
.hero__ring { stroke: var(--c-plum) !important; opacity: .55 !important; }
.hero__detail { border-color: var(--c-bg); box-shadow: 0 0 0 1px var(--c-plum-light); }
.hero__role { color: var(--c-brown); }
.hero .btn--primary { background: var(--c-plum-dark); }
.hero .btn--primary:hover { background: var(--c-plum); }
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .hero__visual::before { inset: 9% -16% -6% 22%; }
}
@media (max-width: 899px) {
  .hero__visual::before { inset: 10% 0 -6% 26%; }
}

/* ---------------------------------------------------------- POSŁUCHAJ: wejście na scenę
   Baza nocna + śliwkowe światło reflektora z góry + ciepła poświata brązu przy podłodze. */
.stage {
  background:
    radial-gradient(42% 60% at 72% 0%, rgba(199, 164, 207, .32) 0%, rgba(199, 164, 207, 0) 70%),
    radial-gradient(60% 40% at 72% 100%, rgba(107, 74, 53, .35) 0%, rgba(107, 74, 53, 0) 70%),
    linear-gradient(180deg, var(--c-plum-dark) 0%, var(--c-stage) 38%, var(--c-stage) 100%);
  position: relative;
}
.stage::before { /* snop światła: delikatny stożek nad nagraniem */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: conic-gradient(from 180deg at 72% -6%, transparent 0deg 162deg, rgba(227, 201, 234, .06) 168deg, rgba(227, 201, 234, .20) 177deg, rgba(227, 201, 234, .24) 180deg, rgba(227, 201, 234, .20) 183deg, rgba(227, 201, 234, .06) 192deg, transparent 198deg 360deg);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 95%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 95%);
}
@media (max-width: 899px) { .stage::before { background: conic-gradient(from 180deg at 50% -4%, transparent 0deg 165deg, rgba(227, 201, 234, .16) 176deg, rgba(227, 201, 234, .2) 180deg, rgba(227, 201, 234, .16) 184deg, transparent 195deg 360deg); } }
.stage__grid { position: relative; }
.stage .video { outline: 1px solid rgba(199, 164, 207, .45); outline-offset: 10px; }
.stage .tongue { border-color: var(--c-plum-light); color: var(--c-plum-light); }
.stage .eyebrow { color: var(--c-plum-light); }
.video__play { background: var(--c-surface); color: var(--c-plum-dark); }
.link-arrow--stage:hover { color: var(--c-plum-light); }

/* ---------------------------------------------------------- PROGRAM: teatralnie / editorial */
.program { background: var(--c-surface-alt); position: relative; }
.program::before { /* pionowa „kulisa” z brązu po lewej */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: clamp(6px, 1vw, 14px); background: var(--c-brown);
}
.program__title { color: var(--c-brown-dark); }
.program__title em { color: var(--c-plum); }
.program__photo { position: relative; isolation: isolate; }
.program__photo::before { /* brązowe pole pod zdjęciem: rama sceniczna */
  content: ""; position: absolute; z-index: -1; inset: 6% 8% 10% -12px; background: var(--c-brown);
}
@media (min-width: 900px) { .program__photo::before { inset: 6% -6% 10% 8%; } }
.program .facts { border-color: rgba(107, 74, 53, .45); }
.program .facts dd { color: var(--c-brown-dark); }
.program figcaption { color: var(--c-text-2); }

/* ---------------------------------------------------------- KIM JEST: jasno i miękko */
.about { background: var(--c-surface); box-shadow: 0 0 0 100vmax var(--c-surface); clip-path: inset(0 -100vmax); }
.sound { border-top-color: rgba(110, 52, 99, .25); }
.quote p { color: var(--c-plum-dark); }

/* ---------------------------------------------------------- KONCERTY */
.gig-list, .gig { border-color: rgba(107, 74, 53, .35); }
.gig__day { color: var(--c-plum-dark); }

/* ---------------------------------------------------------- DROGA: przejście brąz → śliwka */
.path__steps { position: relative; }
@media (min-width: 900px) {
  .path__steps::before {
    content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 2px;
    background: linear-gradient(90deg, var(--c-brown) 0%, var(--c-brown) 15%, var(--c-plum) 85%, var(--c-plum) 100%);
  }
}
.step:nth-child(1) h3 { color: var(--c-brown); }
.step:nth-child(2) h3 { color: color-mix(in srgb, var(--c-brown) 50%, var(--c-plum)); }
.step:nth-child(3) h3 { color: var(--c-plum); }
.step__photo img { box-shadow: 0 0 0 1px rgba(107, 74, 53, .25); }

/* ---------------------------------------------------------- KADRY: magazynowo, spięte kolorem */
.social { position: relative; }
.social__grid { gap: 0; background: var(--c-plum-dark); padding: clamp(6px, .8vw, 10px); }
.social__grid li { padding: clamp(3px, .4vw, 5px); }
.social__grid img { filter: saturate(.92) contrast(1.02); }

/* ---------------------------------------------------------- DLA ORGANIZATORÓW: butelkowa zieleń */
.organizers {
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(199, 164, 207, .14), rgba(199, 164, 207, 0) 60%),
    var(--c-green);
}
.organizers .btn--outline-light:hover { background: var(--c-bg); color: var(--c-green); }
.organizers :focus-visible { outline-color: var(--c-focus-dark); }

/* ---------------------------------------------------------- STOPKA */
.site-footer { background: var(--c-stage); }
.monogram { border-color: var(--c-plum-light); color: var(--c-plum-light); }
.site-footer a:hover { color: var(--c-plum-light); }

/* ---------------------------------------------------------- Przyciski i linki */
.btn--primary { background: var(--c-plum-dark); color: var(--c-surface); }
.btn--primary:hover { background: var(--c-plum); }
a:hover { color: var(--c-plum); }
.menu-btn { border-color: var(--c-plum-dark); color: var(--c-plum-dark); }
.wordmark__mono { border-color: rgba(75, 33, 66, .45); }

/* ---------------------------------------------------------- WordPress: podstrony i elementy spoza prototypu */
/* Akcent programów (motyw ustawia --accent inline z pola „Kolor akcentu”): w tej palecie zawsze śliwka */
.program, .program-page, .program-card { --accent: var(--c-plum) !important; }
.pcover h1 { color: var(--c-brown-dark); }
.program-card__label { color: var(--c-brown); }
.repertoire, .repertoire li { border-color: rgba(199, 164, 207, .3); }
.lcard--stage { background: var(--c-plum-dark); }
.lcard--stage:hover { color: var(--c-plum-light); }
.links__arc { stroke: var(--c-plum); }
.links__head h1 { color: var(--c-plum-dark); }
.booking-program { background: var(--c-plum-tint); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-color: var(--c-plum); border-color: var(--c-plum); }
.field .check input { accent-color: var(--c-plum); }
.faq summary::after { color: var(--c-plum); }
.page-intro h1, .org-intro h1 { color: var(--c-plum-dark); }
.org-intro h1 em { color: var(--c-plum); }
.cta-band p { color: var(--c-brown-dark); }
.btn--outline { border-color: var(--c-plum-dark); color: var(--c-plum-dark); }
.btn--outline:hover { background: var(--c-plum-dark); color: var(--c-surface); }
.copy-btn { border-color: var(--c-plum-dark); color: var(--c-plum-dark); }
.notfound h1 { color: var(--c-plum-dark); }