/* ============================================================
   JACKOWO — tokens.css
   Zmienne projektu. Źródło prawdy: CLAUDE.md.
   Nie wprowadzaj kolorów spoza tej listy.
   ============================================================ */

/* ---------- FONTY (self-hosted, bez zapytań do zewnętrznych serwerów) --------
   Lora i Inter w wersji zmiennej (variable) — jeden plik obsługuje wszystkie wagi.
   Cztery pliki zamiast czternastu: latin + latin-ext dla każdego kroju.
   latin-ext niesie polskie znaki (ą ć ę ł ń ś ź ż); ó siedzi w latin.
   Przeglądarka pobiera tylko ten podzbiór, którego faktycznie potrzebuje.
   Licencja: SIL Open Font License 1.1 — hosting własny dozwolony.
   ---------------------------------------------------------------------------- */
@font-face{
  font-family:'Lora';
  src:url('../fonts/lora-latin.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Lora';
  src:url('../fonts/lora-latin-ext.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-latin.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
  font-family:'EB Garamond';
  src:url('../fonts/ebgaramond-latin.woff2') format('woff2');
  font-weight:500 600; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'EB Garamond';
  src:url('../fonts/ebgaramond-latin-ext.woff2') format('woff2');
  font-weight:500 600; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* PIRATA ONE — gotyk na tytuł hero muzeum (wybór klienta 29.08.2026).
   Ten sam charakter pisma co na etykietach piwa Jackowo, więc muzeum
   i browar mówią jednym głosem. Licencja SIL OFL 1.1, pliki lokalne.
   Używany WYŁĄCZNIE w tytule hero — gotyk jest mocnym akcentem,
   w dłuższych nagłówkach męczyłby oko. */
@font-face{
  font-family:'Pirata One';
  src:url('../fonts/pirata-one-latin.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Pirata One';
  src:url('../fonts/pirata-one-latin-ext.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* CINZEL — krój wyłącznie na tytuł hero muzeum (prośba klienta
   29.08.2026: napis ma przypominać złocony szyld „MUZEUM ZIEMI
   SŁAWIEŃSKIEJ”). Klasyczna antykwa wzorowana na rzymskiej kapitale,
   sam kapitalik — dlatego używamy jej tylko tam, gdzie tekst i tak
   jest wersalikami. Licencja SIL OFL 1.1, pliki hostowane lokalnie
   (jak Lora, EB Garamond i Inter — zero zapytań do zewnętrznych
   serwerów). Dwa pliki: latin + latin-ext (polskie znaki). */
@font-face{
  font-family:'Cinzel';
  src:url('../fonts/cinzel-latin.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Cinzel';
  src:url('../fonts/cinzel-latin-ext.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  /* tła — jasna, kremowo-beżowa baza */
  --c-bg:#FBF9F5; --c-bg-alt:#F4F0E8; --c-bg-warm:#EFE9DC;
  --c-surface:#FFFFFF; --c-border:#E3DCCE;

  /* piaskowy — głębszy beż niż --c-bg-warm. Odcień odczytany z drewna
     i podłóg na zdjęciach Osady (h≈37, s≈0.30). Do dużych powierzchni:
     panel hero, stopka, passe-partout i ramki wokół zdjęć. */
  --c-bg-sand:#E8E1D4; --c-border-sand:#D7CCBC;

  /* zieleń — kolor prowadzący: WSZYSTKIE przyciski, akcenty, restauracja.
     Nasycenie podniesione z 0,18 do 0,38 na życzenie klienta („więcej żywych
     kolorów"). Odcień bez zmian. Biel na zieleni: 7,06:1. */
  --c-green:#2C6343; --c-green-dk:#1E4830; --c-green-lt:#E9F4ED;
  /* Zielen o krok glebsza niz --c-green-lt. Pasmo restauracji na stronie
     glownej lezy tuz pod pasmem faktow, ktore ma --c-green-lt; przy tym
     samym odcieniu granica miedzy nimi znikala. */
  --c-green-md:#E4EDE6;

  /* morski — kolor drugi: osada, sklep rybny, zastawa, karty dań.
     Odcień i nasycenie zdjęte pomiarem ze zdjęć wnętrz Osady: zasłony
     (h 203–205, s 0,32–0,34), poduszki w salonie (h 199, s 0,29) oraz
     siedziska w restauracji (h 208, s 0,54). Poprzednia wartość #4A6E7C
     miała ten sam odcień, ale s=0,25 — była wyraźnie bardziej szara
     niż to, co jest na zdjęciach, i dawała tylko 4,55:1 na tle ciepłym. */
  --c-blue:#2F687F; --c-blue-dk:#1F495C; --c-blue-lt:#E7F1F5;

  /* brąz — ceny, dane liczbowe, muzeum, sklepy */
  --c-brown:#7A5F3E; --c-brown-lt:#B49A76;

  /* bursztyn — WYŁĄCZNIE punktowo: badge „Hit", komunikat sezonowy */
  --c-amber:#AE7D29; --c-amber-bg:#F4E3C3; --c-amber-tx:#674614;

  /* noc — ciemny AKCENT, najwyżej JEDEN pas na stronę, wyłącznie dla
     ekspozycji wyróżnika:
       muzeum.html   wystawa bursztynowa — 7 z 8 rzeźb sfotografowano na
                     czarnym aksamicie (jasność narożników 0–55/255);
                     na ciemnym tle zostaje sam świecący bursztyn,
       osada.html    apartament dwupoziomowy — wyróżnik ofertowy,
       index + restauracja  piwo — butelki na ciemnym jak bursztyn.
     Odcień zdjęty z aksamitu wystawy (h≈30, s≈0,12). NIGDY dwa ciemne
     pasy na jednej stronie i nigdy jako zwykły pas treści — strona
     główna miała trzy i czytała się jak zebra (poprawione 26.08.2026,
     zapowiedzi biznesów niosą teraz odcienie swoich podstron). */
  --c-noc:#17130E; --c-noc-2:#241C14; --c-noc-linia:#3A2E22;
  --c-noc-tx:#F3E9DA; --c-noc-tx-2:#C0B09A;


  /* pergamin i atrament — świat muzeum, współdzielony przez pas
     pergaminowy na stronie głównej i pasma fotograficzne.
     Wcześniej te wartości żyły rozproszone w trzech arkuszach;
     osiem z nich powtarzało się między plikami. Kontrasty zmierzone
     na najciemniejszym ziarnie faktury: atrament-2 6,81, brąz 6,19. */
  --c-pergamin:#FAF7F0;      /* rozjaśniona warstwa pod tekstem */
  --c-pergamin-2:#EFE7D6;    /* głębszy pas */
  --c-atrament:#3B2F23;      /* tekst główny muzeum */
  --c-atrament-2:#4A4234;    /* tekst pomocniczy na fakturze */
  --c-atrament-3:#5A5142;
  --c-braz-gleboki:#5C4526;  /* etykiety na jasnych zdjęciach, 5,22:1 */
  --c-szarozielen:#454B47;   /* tekst pomocniczy pasm fotograficznych */
  --c-kosc:#F7F3EA;          /* jasne litery na ciemnych przesłonach */
  --c-czern-scrim:#151009;   /* podstawa przyciemnień pod tekstem */
  --c-krem-odbitki:#FFFCF4;  /* papier odbitek fotograficznych */

  /* tekst */
  --c-text:#1F2421; --c-text-2:#5A615B; --c-text-3:#7C837C;

  /* typografia */
  --f-head:'Lora',Georgia,serif;
  /* drugi krój nagłówkowy — WYŁĄCZNIE muzeum, przez --f-head-page */
  --f-head-muzeum:'EB Garamond',Georgia,'Times New Roman',serif;
  /* krój szyldowy — tylko tytuł hero muzeum */
  --f-szyld:'Pirata One','EB Garamond',Georgia,serif;   /* tytuł hero muzeum */
  --f-naglowek-muzeum:'Cinzel','EB Garamond',Georgia,serif;  /* nagłówki sekcji muzeum */
  --f-body:'Inter',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --fs-h1:clamp(2.4rem,1.6rem + 3vw,4rem);
  --fs-h2:clamp(1.5rem,1.2rem + 1.4vw,2.125rem);
  --fs-h3:clamp(1.25rem,1.15rem + .5vw,1.5rem);
  --fs-body:1.0625rem; --fs-sm:.9375rem; --fs-label:.8125rem;
  /* nagłówki wewnątrz .section — stopień niżej niż h2/h3 w treści.
     Jako tokeny, bo podstrona sklepu rybnego podnosi je o krok. */
  --fs-sec-h2:clamp(1.375rem,1.15rem + 1vw,1.75rem);
  --fs-sec-h3:clamp(1.125rem,1.05rem + .35vw,1.3125rem);

  /* odstępy i promienie */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;
  --r-sm:4px; --r-md:8px; --r-lg:14px;

  /* cienie — ZAWSZE dwuwarstwowe, kolor = przyciemniony kolor tekstu, nigdy czerń */
  --sh-1:0 1px 2px rgba(31,36,33,.05);
  --sh-2:0 2px 4px rgba(31,36,33,.04), 0 10px 30px rgba(31,36,33,.07);
  --sh-3:0 4px 8px rgba(31,36,33,.05), 0 20px 48px rgba(31,36,33,.10);

  --ease:cubic-bezier(.22,.61,.36,1);

  /* --- wartości pochodne, używane w komponentach --- */
  --container:1200px;
  --gutter:20px;
  --hdr-h:70px;             /* wysokość paska nagłówka */
  --tap:48px;               /* minimalny cel dotykowy */
  --measure:68ch;           /* maksymalna szerokość akapitu */
}
@media(min-width:768px){ :root{ --fs-body:1.125rem; --gutter:32px; --hdr-h:76px } }

/* ============================================================
   OSOBOWOŚĆ PODSTRONY
   ------------------------------------------------------------
   Każda podstrona ma własny charakter, ale serwis ma czytać się
   jak jedna firma. Dlatego różnicujemy DOKŁADNIE cztery rzeczy,
   sterowane jedną klasą na <body>:

     1. odcień pasa sekcji      --c-tint        (klasa .section--tint)
     2. kolor etykiet .eyebrow  --c-eyebrow
     3. krój i rozmiar nagłówków --f-head-page, --fw-head, --fs-*
     4. dominujący układ zdjęć  --ar-plate, --ar-tile, --plates-max

   NIE RUSZAMY nigdzie: nawigacji, stopki, przycisków (zawsze zielone),
   skali odstępów --sp-*, promieni --r-*, cieni --sh-*, siatki
   i szerokości kontenera --container. Podstrona bez klasy p-*
   dostaje wartości bazowe poniżej — tak wygląda strona główna.
   ============================================================ */

:root{
  --c-tint:var(--c-bg-alt);
  --c-eyebrow:var(--c-brown);
  --f-head-page:var(--f-head);
  --fw-head:500;
  --ar-tile:3/2;
  --ar-plate:4/3;
  --ar-bento:4/3;
  --cols-plate:4;
  --plates-max:960px;
}

/* pas sekcji w odcieniu podstrony — jedyne miejsce, gdzie kolor tła
   zależy od tego, na której podstronie stoimy */
.section--tint{background:var(--c-tint)}

/* kreska pod nagłówkiem sekcji idzie za kolorem etykiet, ale wyłącznie
   w pasie --tint. Sekcje z jawnym odcieniem (--sea, --warm) zachowują
   swoje kolory z interakcje.css. */
.section--tint .section__head.is-visible h2::after{background:var(--c-eyebrow)}

/* ---------- RESTAURACJA (także karta dań i przyjęcia) ----------
   Zieleń prowadząca, nagłówki bez zmian, duże kwadratowe kadry dań
   przeplatane blokami tekstu. */
body.p-restauracja{
  --c-tint:var(--c-green-lt);
  --c-eyebrow:var(--c-green);
  --ar-plate:1/1;
  --plates-max:1080px;
}
/* Pakiet finalny 27.08.2026: restauracja była jedyną podstroną bez
   podniesionego stopnia tekstu (osada, muzeum i sklep mają swoje).
   Krok w górę tylko w TREŚCI — ten sam wzór co osada: na body
   urósłby też pasek nawigacji. */
body.p-restauracja main{
  --fs-body:1.125rem;
  font-size:var(--fs-body);
}
@media(min-width:768px){ body.p-restauracja main{--fs-body:1.1875rem} }

/* ---------- OSADA ----------
   Błękit, nagłówki lżejsze (Lora 400) i z większym światłem,
   układ oparty na szerokich kadrach — galeria, nie czytanka. */
body.p-osada{
  --c-tint:var(--c-blue-lt);
  --c-eyebrow:var(--c-blue-dk);
  --fw-head:400;
  --ar-plate:3/2;
  --ar-tile:4/3;
  --plates-max:1120px;
}
/* Większy krój TYLKO w treści. Gdyby --fs-body stało na body, urosłoby
   też górne menu — pięć pozycji ledwo mieści się do 1000 px, więc wróciłoby
   przepełnienie paska. Nagłówek i stopka zostają jak na reszcie serwisu. */
body.p-osada main{
  --fs-body:1.125rem;
  --fs-h1:clamp(2.6rem,1.75rem + 3.2vw,4.3rem);
  --fs-h2:clamp(1.7rem,1.35rem + 1.6vw,2.45rem);
  --fs-h3:clamp(1.35rem,1.22rem + .55vw,1.65rem);
  --fs-sec-h2:clamp(1.55rem,1.3rem + 1.1vw,2rem);
  --fs-sec-h3:clamp(1.25rem,1.15rem + .4vw,1.45rem);
  font-size:var(--fs-body);
  line-height:1.7;
}
@media(min-width:768px){ body.p-osada main{--fs-body:1.25rem} }
body.p-osada h1,body.p-osada h2{line-height:1.3}
body.p-osada .section__head{margin-bottom:var(--sp-7)}

/* ---------- SKLEP RYBNY ----------
   Ciepły beż, etykiety brązowe, typografia o krok większa —
   klient poprosił o to wprost. Kadry kwadratowe, produktowe. */
body.p-sklep-rybny{
  --c-tint:var(--c-bg-warm);
  --c-eyebrow:var(--c-brown);
  /* 27.08.2026: klient prosi o "lekko wiekszy" tekst - o krok w gore
     wzgledem poprzedniego 1.125/1.1875 (ktore tez bylo na jego prosbe) */
  --fs-body:1.1875rem;
  --fs-h1:clamp(2.625rem,1.75rem + 3.28vw,4.375rem);
  --fs-h2:clamp(1.625rem,1.3rem + 1.5vw,2.3125rem);
  --fs-h3:clamp(1.375rem,1.25rem + .55vw,1.625rem);
  --fs-sec-h2:clamp(1.5rem,1.25rem + 1.1vw,1.9375rem);
  --fs-sec-h3:clamp(1.25rem,1.15rem + .4vw,1.4375rem);
  --ar-plate:1/1;
  --ar-tile:1/1;
  --plates-max:1080px;
}
@media(min-width:768px){ body.p-sklep-rybny{ --fs-body:1.25rem } }

/* ---------- MUZEUM ----------
   Ciepły beż, etykiety brązowe, nagłówki krojem o starszym rysunku.
   Stopnie podniesione o 6%, bo tyle wynosi zmierzona różnica wysokości
   wersalika między EB Garamond a Lorą (66 vs 70 przy font-size 100 px).
   Celowo NIE wyrównujemy x-heightu, który różni się aż o 16% — po takiej
   korekcie wersaliki muzeum górowałyby nad resztą serwisu, a niski x-height
   przy wysokich wydłużeniach to właśnie to, co daje temu krojowi starszy rys.
   Tekstura pergaminu i ślad starego atramentu — na wyraźne życzenie
   klienta, wbrew pierwotnemu założeniu „bez filtrów udających zniszczenie”.
   Czytelność uratowana pomiarem, nie oczekiwaniem: tekst wprost na
   teksturze ma kontrast 3,29, dlatego leży na rozjaśnionej warstwie.
   Stopnie podniesione, bo większy krój lepiej znosi niespokojne tło. */
body.p-muzeum{
  --c-tint:var(--c-bg-warm);
  --c-eyebrow:var(--c-brown);
  --f-head-page:var(--f-head-muzeum);
  --fw-head:600;
}
/* Większy krój TYLKO w treści. Gdyby --fs-body stało na body, urosłoby
   też górne menu — pięć pozycji ledwo mieści się do 1000 px, więc
   wróciłoby przepełnienie paska. Nagłówek i stopka zostają jak wszędzie. */
body.p-muzeum main{
  --fs-body:1.1875rem;
  --fs-h1:clamp(2.75rem,1.85rem + 3.6vw,4.75rem);
  --fs-h2:clamp(1.8125rem,1.45rem + 1.75vw,2.625rem);
  --fs-h3:clamp(1.5rem,1.36rem + .6vw,1.8125rem);
  --fs-sec-h2:clamp(1.6875rem,1.4rem + 1.2vw,2.1875rem);
  --fs-sec-h3:clamp(1.375rem,1.28rem + .45vw,1.5625rem);
  font-size:var(--fs-body);
  line-height:1.75;
}
@media(min-width:768px){ body.p-muzeum main{--fs-body:1.3125rem} }
/* niższe stopnie nagłówków w wadze 500 — 600 na h3 robi się zbyt gęste */
body.p-muzeum h3,body.p-muzeum h4,body.p-muzeum h5,body.p-muzeum h6{font-weight:500}

/* podpisy zdjęć jak tabliczki przy eksponatach: kreska u góry,
   krój podstawowy, wersaliki, brąz. Podpisy są krótkie (nazwa obiektu),
   więc wersaliki ich nie utrudniają. */
body.p-muzeum .plate figcaption{
  border-top:1px solid var(--c-border);
  font-family:var(--f-body);
  font-size:var(--fs-label);
  letter-spacing:.07em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--c-brown);
}

/* ---------- SKLEPY (Promil, Pogotowie Alkoholowe) ----------
   Najprostszy wariant: szary beż, etykiety brązowe, nagłówki bazowe,
   układ czysto informacyjny — bez powiększania zdjęć. */
body.p-sklepy{
  --c-tint:var(--c-bg-alt);
  --c-eyebrow:var(--c-brown);
}