/* =========================================================
   SC KUCHNIE — TOKENY SYSTEMU WIZUALNEGO  v1.0
   Jedno zrodlo prawdy. Zmiana tutaj propaguje sie na cala strone.
   ========================================================= */

:root{

  /* ---------- KOLORY ---------- */
  --sc-bg:            #F5F3EF;   /* tlo glowne */
  --sc-bg-alt:        #ECE9E3;   /* tlo alternatywne */
  --sc-dark:          #101010;   /* sekcje ciemne, stopka */
  --sc-white:         #FFFFFF;
  --sc-text:          #161616;   /* tekst glowny */
  --sc-text-2:        #6D6A65;   /* tekst pomocniczy, labels */
  --sc-border:        #D8D4CD;   /* cienkie linie */
  --sc-tan:           #C3A892;   /* ciepla numeracja 01-05 */
  --sc-red:           #C9272C;   /* czerwien systemowa (wg promptu) */

  /* na ciemnym tle */
  --sc-on-dark:       #FFFFFF;
  --sc-on-dark-2:     rgba(255,255,255,.62);
  --sc-border-dark:   rgba(255,255,255,.16);

  /* ---------- TYPOGRAFIA ---------- */
  --sc-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sc-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --sc-h1:      80px;
  --sc-h2:      56px;
  --sc-h3:      36px;
  --sc-h4:      24px;
  --sc-body:    17px;
  --sc-small:   15px;
  --sc-tiny:    13px;
  --sc-label:   11px;
  --sc-numeral: 96px;

  --sc-lh-h1: 1.04;
  --sc-lh-h2: 1.10;
  --sc-lh-h3: 1.20;
  --sc-lh-body: 1.70;

  --sc-ls-label: .16em;
  --sc-ls-btn:   .10em;
  --sc-ls-nav:   .12em;

  /* ---------- SIATKA ----------
     Kontener skaluje sie z ekranem zamiast siedziec na sztywnych 1320 px.
     Na 14-calowym laptopie (1512 px) wypelnia praktycznie cala szerokosc,
     na 27 calach zatrzymuje sie na 1920 px, zeby wiersze tekstu nie robily
     sie nieczytelnie dlugie. Chcesz wezej? zmniejsz --sc-max.
     Chcesz na caly ekran? ustaw --sc-max: none. */
  --sc-max:     1920px;
  --sc-pad:     clamp(20px, 3.6vw, 80px);
  --sc-gutter:  clamp(16px, 1.6vw, 24px);

  /* ---------- ODSTEPY ---------- */
  --sc-sec:     120px;   /* sekcja standardowa */
  --sc-sec-lg:  160px;   /* sekcja narracyjna */
  --sc-s1: 8px;  --sc-s2: 16px; --sc-s3: 24px; --sc-s4: 32px;
  --sc-s5: 48px; --sc-s6: 64px; --sc-s7: 80px;

  /* ---------- RUCH ---------- */
  --sc-ease: cubic-bezier(.22,.61,.36,1);
  --sc-dur:  .3s;
  --sc-dur-img: .6s;

  /* ---------- HEADER ---------- */
  --sc-header-h:        104px;
  --sc-header-h-scroll:  76px;
}

/* ---------- DUZY MONITOR ----------
   Powyzej 1700 px naglowki rosna, zeby nadazyc za szerokoscia ukladu. */
@media (min-width: 1700px){
  :root{
    --sc-h1: 92px; --sc-h2: 64px; --sc-h3: 40px;
    --sc-numeral: 108px;
    --sc-sec: 140px; --sc-sec-lg: 180px;
  }
}

/* ---------- LAPTOP / WASKI DESKTOP ----------
   Miedzy 992 a 1200 px kolumny robia sie waskie i naglowki 56px
   lamia sie na cztery wiersze. Ten stopien to naprawia. */
@media (max-width: 1240px){
  :root{
    --sc-h1: 64px; --sc-h2: 46px; --sc-h3: 32px;
    --sc-numeral: 84px;
    --sc-sec: 104px; --sc-sec-lg: 128px;
  }
}

/* ---------- TABLET ---------- */
@media (max-width: 991px){
  :root{
    --sc-h1: 56px; --sc-h2: 44px; --sc-h3: 30px; --sc-h4: 22px;
    --sc-numeral: 76px;
    --sc-sec: 90px; --sc-sec-lg: 110px;
    --sc-header-h: 84px; --sc-header-h-scroll: 68px;
  }
}

/* ---------- MOBILE ---------- */
@media (max-width: 767px){
  :root{
    --sc-h1: 44px; --sc-h2: 37px; --sc-h3: 28px; --sc-h4: 21px;
    --sc-numeral: 64px;
    --sc-sec: 72px; --sc-sec-lg: 88px;
    --sc-header-h: 72px; --sc-header-h-scroll: 64px;
  }
}

/* ---------- MALY TELEFON ----------
   Ponizej 480 px naglowek 44 px lamie sie na cztery wiersze i wypycha
   tresc hero poza ekran. */
@media (max-width: 480px){
  :root{
    --sc-h1: 38px; --sc-h2: 32px; --sc-h3: 25px;
    --sc-numeral: 56px;
  }
}

/* =========================================================
   BAZA
   ========================================================= */

body{
  background: var(--sc-bg);
  color: var(--sc-text);
  font-family: var(--sc-sans);
  font-size: var(--sc-body);
  line-height: var(--sc-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,h2,h3,h4,h5,h6,
.sc-h1,.sc-h2,.sc-h3,.sc-h4{
  font-family: var(--sc-serif);
  font-variant-numeric: lining-nums;
  font-weight: 400;
  letter-spacing: -.01em;
  color: inherit;
}

.sc-h1, h1{ font-size: var(--sc-h1); line-height: var(--sc-lh-h1); }
.sc-h2, h2{ font-size: var(--sc-h2); line-height: var(--sc-lh-h2); }
.sc-h3, h3{ font-size: var(--sc-h3); line-height: var(--sc-lh-h3); }
.sc-h4, h4{ font-size: var(--sc-h4); line-height: 1.3; }

.sc-body { font-size: var(--sc-body);  line-height: var(--sc-lh-body); }
.sc-small{ font-size: var(--sc-small); line-height: 1.65; color: var(--sc-text-2); }
.sc-tiny { font-size: var(--sc-tiny);  line-height: 1.6;  color: var(--sc-text-2); }

/* maksymalna dlugosc wiersza tekstu — czytelnosc */
.sc-measure{ max-width: 56ch; }
.sc-measure--narrow{ max-width: 44ch; }

.sc-label{
  font-family: var(--sc-sans);
  font-size: var(--sc-label);
  font-weight: 500;
  letter-spacing: var(--sc-ls-label);
  text-transform: uppercase;
  color: var(--sc-text-2);
  line-height: 1.4;
}

.sc-numeral{
  font-family: var(--sc-serif);
  font-weight: 300;
  font-size: var(--sc-numeral);
  line-height: 1;
  color: var(--sc-tan);
}

/* =========================================================
   SEKCJE I KONTENER
   ========================================================= */

.sc-section{
  padding-top: var(--sc-sec);
  padding-bottom: var(--sc-sec);
  background-color: var(--sc-bg);
}
.sc-section--alt { background-color: var(--sc-bg-alt); }
.sc-section--lg  { padding-top: var(--sc-sec-lg); padding-bottom: var(--sc-sec-lg); }
.sc-section--flush     { padding-top: 0; padding-bottom: 0; }
.sc-section--flush-top { padding-top: 0; }

.sc-section--dark{
  background-color: var(--sc-dark);
  color: var(--sc-on-dark);
}
.sc-section--dark .sc-label,
.sc-section--dark .sc-small,
.sc-section--dark .sc-tiny{ color: var(--sc-on-dark-2); }

.sc-container{
  width: 100%;
  max-width: var(--sc-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sc-pad);
  padding-right: var(--sc-pad);
}
/* pelna szerokosc okna — bez limitu i bez bocznego paddingu.
   Bloki w srodku (np. .sc-touch__body) same trzymaja odstep od krawedzi. */
.sc-container--wide{
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.sc-rule{
  height: 1px;
  background: var(--sc-border);
  border: 0;
  width: 100%;
}
.sc-section--dark .sc-rule{ background: var(--sc-border-dark); }