/* ==========================================================================
   SŁONECZNY ATLAS — system projektowy
   --------------------------------------------------------------------------
   Kierunek: atlas architektoniczny, nie dashboard i nie katalog ogłoszeń.

   Środek ciężkości palety leży na petrolu, nie na kremie. To rozróżnienie
   jest celowe: „kremowe tło + serif + terakota" to dziś domyślny wygląd
   generowanych stron i rozpoznaje się go natychmiast. Tutaj kremowa biel
   pełni funkcję papieru, na którym się czyta, a tożsamość niesie głęboki
   petrol — kolor tuszu kreślarskiego i wody na mapach sztabowych.

   Vermilion nie jest ozdobą. To tusz danych: znaczy ofertę, stan aktywny
   i nic poza tym. Jeśli pojawia się gdzieś dekoracyjnie, jest to błąd.

   Zieleń oznacza teren i dostępność. Nigdy nie służy do ozdoby.
   ========================================================================== */

:root {

  /* --- Papier: powierzchnie do czytania --------------------------------- */
  --papier:        #F4F0E8;   /* mineralna biel, tło strony */
  --papier-2:      #EAE4D8;   /* ciepły kamień, panele i wgłębienia */
  --papier-3:      #DED5C5;   /* głębszy kamień, pola bierne */
  --papier-czysty: #FBF9F5;   /* najjaśniejszy, karty wyniesione */

  /* --- Petrol: struktura i tożsamość ------------------------------------ */
  --petrol:        #143F49;   /* podstawowy: nagłówki, panele nawigacji */
  --petrol-gleb:   #0D2A31;   /* najgłębszy: podłoże mapy i sceny 3D */
  --petrol-sred:   #2C6472;   /* pośredni: hover, linie drugorzędne */
  --petrol-blady:  #B9CBCD;   /* wybielony: wypełnienia na papierze */
  --petrol-mgla:   #D8E2E2;   /* ledwie widoczny: pasy i strefy */

  /* --- Tusz: typografia -------------------------------------------------- */
  /* Wartości sprawdzone wobec wszystkich trzech odcieni papieru, nie tylko
     najjaśniejszego — podpis na panelu musi być czytelny tak samo jak w tekście. */
  --tusz:          #17211F;   /* tekst podstawowy — 14.5:1 / 13.0:1 / 11.3:1 */
  --tusz-2:        #414E4A;   /* tekst drugorzędny — 7.7:1 / 6.9:1 / 6.0:1 */
  --tusz-3:        #54605B;   /* podpisy — 5.8:1 / 5.2:1 / 4.5:1, AA wszędzie */

  /* --- Vermilion: tusz danych ------------------------------------------- */
  --cynober:       #D2452C;   /* wypełnienia: znaczniki, stany aktywne */
  --cynober-tekst: #A6301C;   /* wariant tekstowy — 5.6:1 na papierze */
  --cynober-gleb:  #7E2415;   /* naciśnięcie, obramowania na jasnym */
  --cynober-mgla:  #F2DDD7;   /* tło zaznaczenia */

  /* --- Zieleń: teren i dostępność --------------------------------------- */
  --zielen:        #6E8568;   /* wypełnienia terenu na mapie */
  --zielen-tekst:  #47593F;   /* wariant tekstowy — 6.4:1 */
  --zielen-mgla:   #DFE5D8;   /* tło stanu „wolne" */

  /* --- Bursztyn: światło słoneczne -------------------------------------- */
  /* Używany wyłącznie tam, gdzie mowa o nasłonecznieniu. Nigdy indziej. */
  --slonce:        #E0A32F;
  --slonce-tekst:  #8A5D06;   /* 5.3:1 na papierze */
  --slonce-mgla:   #F7EBD2;

  /* --- Linie ------------------------------------------------------------- */
  --linia:         rgba(23, 33, 31, 0.13);
  --linia-mocna:   rgba(23, 33, 31, 0.26);
  --linia-wlos:    rgba(23, 33, 31, 0.07);
  --linia-petrol:  rgba(20, 63, 73, 0.22);

  /* --- Kroje ------------------------------------------------------------- */
  --krój-display: 'Newsreader', ui-serif, Georgia, 'Times New Roman', serif;
  --krój-ui:      'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --krój-mono:    'Space Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* --- Skala typograficzna ----------------------------------------------
     Płynna, oparta na clamp. Krok ~1.22 na mobile, ~1.28 na desktopie:
     szeroki dół dla gęstych danych, wyraźna góra dla momentów redakcyjnych. */
  --t-xs:   0.6875rem;                              /* 11px — etykiety mono */
  --t-sm:   0.8125rem;                              /* 13px — meta, podpisy */
  --t-base: 0.9375rem;                              /* 15px — interfejs */
  --t-md:   clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-lg:   clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
  --t-xl:   clamp(1.375rem, 1.24rem + 0.66vw, 1.75rem);
  --t-2xl:  clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  --t-3xl:  clamp(2.25rem, 1.8rem + 2.2vw, 3.75rem);
  --t-4xl:  clamp(2.75rem, 1.95rem + 3.9vw, 5.5rem);

  /* --- Rytm pionowy ------------------------------------------------------ */
  --o-1: 0.25rem;
  --o-2: 0.5rem;
  --o-3: 0.75rem;
  --o-4: 1rem;
  --o-5: 1.5rem;
  --o-6: 2rem;
  --o-7: 3rem;
  --o-8: 4rem;
  --o-9: 6rem;
  --o-10: 8rem;

  /* --- Kształt -----------------------------------------------------------
     Dwie wartości, reguła bez wyjątków:
       0    — wszystko, co jest płaszczyzną: panele, karty, pola, przyciski
       pełny — wszystko, co jest żetonem: filtry, statusy, znaczniki
     Trzeciej wartości nie ma. */
  --r-plaszczyzna: 0px;
  --r-zeton:       999px;

  /* --- Cienie ------------------------------------------------------------
     Podbarwione petrolem, nigdy czarne. Na papierze czarny cień brudzi. */
  --cien-1: 0 1px 2px rgba(20, 63, 73, 0.07);
  --cien-2: 0 2px 10px rgba(20, 63, 73, 0.09), 0 1px 2px rgba(20, 63, 73, 0.06);
  --cien-3: 0 12px 34px rgba(20, 63, 73, 0.14), 0 2px 8px rgba(20, 63, 73, 0.07);
  --cien-4: 0 26px 70px rgba(13, 42, 49, 0.24), 0 4px 14px rgba(13, 42, 49, 0.10);

  /* --- Ruch --------------------------------------------------------------
     Jedna krzywa dla przejść interfejsu, jedna dla ruchów przestrzennych. */
  --czas-1: 140ms;
  --czas-2: 240ms;
  --czas-3: 420ms;
  --krzywa:      cubic-bezier(0.22, 1, 0.36, 1);
  --krzywa-fiz:  cubic-bezier(0.34, 1.32, 0.64, 1);

  /* --- Warstwy -----------------------------------------------------------
     Pełna skala z-index. Poza tą listą nie wolno używać z-index. */
  --z-mapa-ster:   5;
  --z-mapa-dymek:  7;
  --z-pasek:       20;
  --z-filtry:      30;
  --z-arkusz:      45;
  --z-modal:       60;
  --z-wycieczka:   70;
  --z-komunikat:   80;
}

/* ==========================================================================
   TRYB CIEMNY
   --------------------------------------------------------------------------
   Trzy stany: system (bez atrybutu — media query decyduje), jawnie ciemny
   (data-theme="dark") i jawnie jasny (data-theme="light"). Papier zamienia
   się w noc granatową, tusz w kość, cynober rozjaśniony żeby świecił nad
   ciemnym tłem. Warstwy zieleni i słońca zostawiamy z zejściem — tereny
   parków i światło słoneczne mają nadal czytać się intuicyjnie.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier:        #0E1720;
    --papier-2:      #17222E;
    --papier-3:      #1E2D3B;
    --papier-czysty: #0A1017;

    --petrol:        #A8D0DA;
    --petrol-gleb:   #C7DDE2;
    --petrol-sred:   #7DABB6;
    --petrol-blady:  #2E4653;
    --petrol-mgla:   #17222E;

    --tusz:          #E7E0CE;
    --tusz-2:        #C7BFAF;
    --tusz-3:        #93897A;

    --cynober:       #F16B4D;
    --cynober-tekst: #FF8266;
    --cynober-gleb:  #C74928;
    --cynober-mgla:  #3B1E15;

    --zielen:        #A3B79D;
    --zielen-tekst:  #B7CDB0;
    --zielen-mgla:   #24312A;

    --slonce:        #E7B85A;
    --slonce-tekst:  #F5CB7A;
    --slonce-mgla:   #2E240F;

    --linia:         rgba(231, 224, 206, 0.12);
    --linia-mocna:   rgba(231, 224, 206, 0.24);
    --linia-wlos:    rgba(231, 224, 206, 0.06);
    --linia-petrol:  rgba(168, 208, 218, 0.18);

    --cien-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --cien-2: 0 2px 10px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
    --cien-3: 0 12px 34px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
    --cien-4: 0 26px 70px rgba(0, 0, 0, 0.7), 0 4px 14px rgba(0, 0, 0, 0.45);
  }
}

:root[data-theme="dark"] {
  --papier:        #0E1720;
  --papier-2:      #17222E;
  --papier-3:      #1E2D3B;
  --papier-czysty: #0A1017;

  --petrol:        #A8D0DA;
  --petrol-gleb:   #C7DDE2;
  --petrol-sred:   #7DABB6;
  --petrol-blady:  #2E4653;
  --petrol-mgla:   #17222E;

  --tusz:          #E7E0CE;
  --tusz-2:        #C7BFAF;
  --tusz-3:        #93897A;

  --cynober:       #F16B4D;
  --cynober-tekst: #FF8266;
  --cynober-gleb:  #C74928;
  --cynober-mgla:  #3B1E15;

  --zielen:        #A3B79D;
  --zielen-tekst:  #B7CDB0;
  --zielen-mgla:   #24312A;

  --slonce:        #E7B85A;
  --slonce-tekst:  #F5CB7A;
  --slonce-mgla:   #2E240F;

  --linia:         rgba(231, 224, 206, 0.12);
  --linia-mocna:   rgba(231, 224, 206, 0.24);
  --linia-wlos:    rgba(231, 224, 206, 0.06);
  --linia-petrol:  rgba(168, 208, 218, 0.18);

  --cien-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --cien-2: 0 2px 10px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
  --cien-3: 0 12px 34px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
  --cien-4: 0 26px 70px rgba(0, 0, 0, 0.7), 0 4px 14px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   PODSTAWA
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tusz);
  font-family: var(--krój-ui);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 400;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

img, svg, canvas { display: block; max-width: 100%; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

a { color: inherit; }

/* ==========================================================================
   TYPOGRAFIA — role
   ========================================================================== */

/* Display: momenty redakcyjne. Zawsze Newsreader, zawsze ciasny interlinia. */
.display {
  font-family: var(--krój-display);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.018em;
}
.display-em {
  font-style: italic;
  font-weight: 300;
  /* Kursywa z „y g j p q" ucina descendery przy ciasnym wierszu */
  line-height: 1.12;
  padding-bottom: 0.06em;
}

/* Etykieta techniczna: mono, szeroko rozstrzelone wersaliki.
   Reglamentowana — patrz reguła użycia w README stylu. */
.etykieta {
  font-family: var(--krój-mono);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tusz-3);
}

/* Liczby: mono z tabularnymi cyframi, żeby kolumny się nie ruszały. */
.liczba {
  font-family: var(--krój-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.tresc {
  max-width: 62ch;
  color: var(--tusz-2);
  font-size: var(--t-md);
  line-height: 1.62;
}

/* ==========================================================================
   DOSTĘPNOŚĆ
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--cynober-tekst);
  outline-offset: 2px;
}

/* Na ciemnym petrolu ciemny kontur znika — potrzebny jasny wariant */
.na-petrolu :focus-visible,
.na-petrolu:focus-visible {
  outline-color: var(--papier);
}

.tylko-czytnik {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pomin {
  position: fixed;
  left: var(--o-4);
  top: -100px;
  z-index: var(--z-komunikat);
  background: var(--petrol);
  color: var(--papier);
  padding: var(--o-3) var(--o-5);
  font-family: var(--krój-mono);
  font-size: var(--t-sm);
  text-decoration: none;
  transition: top var(--czas-1) var(--krzywa);
}
.pomin:focus { top: var(--o-4); }

/* ==========================================================================
   PRZYCISKI
   --------------------------------------------------------------------------
   Trzy warianty, żadnych dekoracyjnych odmian.
     .btn-glowny   — akcja wiodąca, petrol
     .btn          — akcja zwykła, obrys
     .btn-cichy    — akcja poboczna, bez obrysu
   Wszystkie: promień 0, cel dotykowy min. 44px, kontrast sprawdzony.
   ========================================================================== */

.btn, .btn-glowny, .btn-cichy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--o-2);
  min-height: 44px;
  padding: var(--o-3) var(--o-5);
  border-radius: var(--r-plaszczyzna);
  font-family: var(--krój-ui);
  font-size: var(--t-base);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--czas-1) var(--krzywa),
              border-color var(--czas-1) var(--krzywa),
              color var(--czas-1) var(--krzywa),
              transform var(--czas-1) var(--krzywa);
}

.btn-glowny {
  background: var(--petrol);
  border: 1px solid var(--petrol);
  color: var(--papier);          /* 11.4:1 */
}
.btn-glowny:hover { background: var(--petrol-sred); border-color: var(--petrol-sred); }
.btn-glowny:active { transform: translateY(1px); }

.btn {
  background: transparent;
  border: 1px solid var(--linia-mocna);
  color: var(--tusz);
}
.btn:hover { border-color: var(--petrol); background: rgba(20, 63, 73, 0.05); }
.btn:active { transform: translateY(1px); }

.btn-cichy {
  background: transparent;
  border: 1px solid transparent;
  color: var(--tusz-2);
  padding-inline: var(--o-3);
}
.btn-cichy:hover { color: var(--tusz); background: rgba(23, 33, 31, 0.05); }

.btn:disabled, .btn-glowny:disabled, .btn-cichy:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
}

/* Wariant na ciemnym tle petrolowym */
.na-petrolu .btn { border-color: rgba(244, 240, 232, 0.3); color: var(--papier); }
.na-petrolu .btn:hover { border-color: var(--papier); background: rgba(244, 240, 232, 0.1); }
.na-petrolu .btn-glowny { background: var(--cynober); border-color: var(--cynober); color: #fff; }
.na-petrolu .btn-glowny:hover { background: #E4573C; border-color: #E4573C; }

/* ==========================================================================
   ŻETONY — jedyne elementy o pełnym promieniu
   ========================================================================== */

.zeton {
  display: inline-flex;
  align-items: center;
  gap: var(--o-2);
  padding: 5px 11px;
  border-radius: var(--r-zeton);
  border: 1px solid var(--linia);
  background: var(--papier-czysty);
  font-size: var(--t-sm);
  line-height: 1.3;
  color: var(--tusz-2);
}

/* Statusy: kolor plus słowo. Nigdy sam kolor — WCAG 1.4.1. */
.zeton-wolne     { background: var(--zielen-mgla);  border-color: transparent; color: var(--zielen-tekst); }
.zeton-rezerwacja{ background: var(--slonce-mgla);  border-color: transparent; color: var(--slonce-tekst); }
.zeton-sprzedane { background: var(--papier-3);     border-color: transparent; color: var(--tusz-2); }

/* ==========================================================================
   OGRANICZONY RUCH
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}