/* ==========================================================================
   SWÓJ KĄT — tokeny systemu designu
   Wszystkie wartości wyprowadzone z makiety Canva (600×1500 pt = 1440 px, skala ×2.4).
   Zmiana koloru / odstępu / kroju w tym pliku przebudowuje cały motyw.
   ========================================================================== */

:root {
  /* --- Kolory marki ---------------------------------------------------- */
  --sk-brown:            #745039; /* nagłówki, ceny, akcent podstawowy */
  --sk-brown-dark:       #5c3f2d; /* hover na brązie */
  --sk-gold:             #a88454; /* CTA, przyciski, podkreślenia */
  --sk-gold-dark:        #8e6d50; /* hover na złocie */
  --sk-gold-soft:        #d5c3b2; /* obramowania, separatory ozdobne */
  --sk-sand:             #ece4db; /* tło sekcji beżowej */
  --sk-cream:            #f7f6f5; /* tło sekcji jasnej */
  --sk-ink:              #231f20; /* banner CTA, stopka */

  /* --- Kolory neutralne ------------------------------------------------ */
  --sk-text:             #2c2a29; /* tekst podstawowy */
  --sk-text-soft:        #4f4e4d; /* tekst drugorzędny */
  --sk-text-muted:       #7a7a7a; /* podpisy, metadane */
  --sk-text-faint:       #a3a3a3; /* placeholdery */
  --sk-border:           #e4e1dd; /* obramowania kart i pól */
  --sk-border-strong:    #cfc9c2;
  --sk-white:            #ffffff;

  /* --- Kolory funkcyjne ------------------------------------------------ */
  --sk-success:          #2f7d52;
  --sk-warning:          #b8860b;
  --sk-danger:           #b3261e;
  --sk-star:             #f5b301; /* gwiazdki w opiniach */

  /* --- Kroje pisma ------------------------------------------------------
     Makieta używa Arial MT Pro (sans), TeX Gyre Termes (podstawka pod serif)
     i Benedict (skrypt). Dwa ostatnie to fonty licencjonowane przez Canvę,
     więc zastąpione odpowiednikami z Google Fonts o pełnym wsparciu
     polskich znaków diakrytycznych (subset latin-ext). */
  --sk-font-sans:   "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --sk-font-serif:  "Playfair Display", "Times New Roman", Georgia, serif;
  --sk-font-script: "Caveat", "Segoe Script", cursive;

  /* --- Skala typograficzna (px @ 1440) --------------------------------- */
  --sk-fs-xs:    0.8125rem; /* 13 — etykiety, licznik znaków */
  --sk-fs-sm:    0.9375rem; /* 15 — metadane kart, podpisy */
  --sk-fs-base:  1.0625rem; /* 17 — tekst podstawowy */
  --sk-fs-md:    1.1875rem; /* 19 — lead, tytuły kart */
  --sk-fs-lg:    1.3125rem; /* 21 — tytuły kafli */
  --sk-fs-xl:    1.625rem;  /* 26 — nagłówki kart funkcji */
  --sk-fs-2xl:   2.0625rem; /* 33 — nagłówki sekcji */
  --sk-fs-3xl:   2.6875rem; /* 43 — nagłówki podstron */
  --sk-fs-4xl:   3.5rem;    /* 56 — hero podstron */
  --sk-fs-5xl:   4.5rem;    /* 72 — hero strony głównej */

  /* --- Interlinia ------------------------------------------------------ */
  --sk-lh-tight:   1.1;
  --sk-lh-heading: 1.2;
  --sk-lh-snug:    1.45;
  --sk-lh-base:    1.65;

  /* --- Tracking ---------------------------------------------------------
     Makieta rozstrzeliwała przyciski szeryfowo na 0.12em. W przeglądarce
     wychodziło to obco i rozsypywało krótkie etykiety, dlatego interfejs
     (przyciski, zakładki, legendy filtrów) jest bezszeryfowy z łagodniejszym
     trackingiem. Szeryf został tam, gdzie pracuje: w nagłówkach. */
  --sk-ls-label:   0.14em; /* WARSZAWA I OKOLICE, OFERTY, SPRZEDAJ Z NAMI */
  --sk-ls-button:  0.05em; /* DODAJ OFERTĘ, SZUKAJ, WYCEŃ NIERUCHOMOŚĆ */
  --sk-ls-tight:  -0.015em; /* duże nagłówki serif */

  /* --- Grubości -------------------------------------------------------- */
  --sk-fw-light:     300;
  --sk-fw-regular:   400;
  --sk-fw-medium:    500;
  --sk-fw-semibold:  600;
  --sk-fw-bold:      700;

  /* --- Skala odstępów (bazowa jednostka 8 px) -------------------------- */
  --sk-sp-1:   0.25rem; /*   4 */
  --sk-sp-2:   0.5rem;  /*   8 */
  --sk-sp-3:   0.75rem; /*  12 */
  --sk-sp-4:   1rem;    /*  16 */
  --sk-sp-5:   1.5rem;  /*  24 */
  --sk-sp-6:   2rem;    /*  32 */
  --sk-sp-7:   2.5rem;  /*  40 */
  --sk-sp-8:   3rem;    /*  48 */
  --sk-sp-9:   4rem;    /*  64 */
  --sk-sp-10:  5rem;    /*  80 */
  --sk-sp-11:  6rem;    /*  96 */
  --sk-sp-12:  7.5rem;  /* 120 */

  /* --- Rytm pionowy sekcji --------------------------------------------
     Jedna wartość dla wszystkich sekcji — to naprawia rozjeżdżone
     paddingi z makiety, gdzie każda sekcja miała inny odstęp. */
  --sk-section-y:       var(--sk-sp-11);
  --sk-section-y-tight: var(--sk-sp-9);

  /* --- Szerokości kontenerów ------------------------------------------- */
  --sk-container:       1320px;
  --sk-container-wide:  1440px;
  --sk-container-text:  760px;
  --sk-gutter:          1.5rem;

  /* --- Promienie ------------------------------------------------------- */
  --sk-radius-sm:   6px;
  --sk-radius:      10px;
  --sk-radius-lg:   16px;
  --sk-radius-pill: 999px;

  /* --- Cienie ---------------------------------------------------------- */
  --sk-shadow-sm: 0 1px 2px rgba(35, 31, 32, 0.05);
  --sk-shadow:    0 4px 16px rgba(35, 31, 32, 0.07);
  --sk-shadow-lg: 0 12px 40px rgba(35, 31, 32, 0.11);

  /* --- Ruch ------------------------------------------------------------ */
  --sk-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --sk-duration:   220ms;

  /* --- Warstwy --------------------------------------------------------- */
  --sk-z-header:   100;
  --sk-z-dropdown: 200;
  --sk-z-overlay:  300;
  --sk-z-modal:    400;

  /* --- Wysokość sticky headera (używana przez scroll-margin-top) -------- */
  --sk-header-h:   96px;
}

/* Na mniejszych ekranach sekcje i hero muszą oddychać mniej, a header jest niższy. */
@media (max-width: 1024px) {
  :root {
    --sk-fs-5xl: 3.25rem;
    --sk-fs-4xl: 2.75rem;
    --sk-fs-3xl: 2.25rem;
    --sk-fs-2xl: 1.75rem;
    --sk-section-y: var(--sk-sp-9);
    --sk-section-y-tight: var(--sk-sp-8);
    --sk-header-h: 72px;
  }
}

@media (max-width: 640px) {
  :root {
    --sk-fs-5xl: 2.5rem;
    --sk-fs-4xl: 2.125rem;
    --sk-fs-3xl: 1.875rem;
    --sk-fs-2xl: 1.5rem;
    --sk-fs-xl:  1.3125rem;
    --sk-section-y: var(--sk-sp-8);
    --sk-section-y-tight: var(--sk-sp-7);
    --sk-gutter: 1rem;
  }
}

/* Użytkownicy z ograniczonym ruchem nie dostają animacji wejścia sekcji. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}