/* ===========================================================================
   Nail by Inna — system projektowy (wersja 2)
   Zmiany wobec v1, wymuszone pomiarem NOWEGO materiału zdjęciowego:
     • tło jasne zamiast ciemnego  — nowe zdjęcia mają jasność 69–75%, nie 50%
     • czerwień #972326 zamiast #9B4A50 — kontrast 7,28 AAA zamiast 5,21 AA;
       to kolor marynarki z sesji, nie barwa dobrana z zewnątrz
   Mobile-first. Wartości bazowe = telefon.
   =========================================================================== */

@font-face{font-family:'Archivo';src:url('../fonts/archivo-var-latin-ext.woff2') format('woff2');
  font-weight:300 600;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:'Archivo';src:url('../fonts/archivo-var-latin.woff2') format('woff2');
  font-weight:300 600;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:'Newsreader';src:url('../fonts/newsreader-var-latin-ext.woff2') format('woff2');
  font-weight:400 500;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:'Newsreader';src:url('../fonts/newsreader-var-latin.woff2') format('woff2');
  font-weight:400 500;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}

:root{
  /* ── Kolor ─────────────────────────────────────────────────────────────
     Pięć wartości. Każda z jednym zadaniem. Zmierzone kontrasty w komentarzu. */
  --ink:        #181615;  /* tekst i ciemne pasy        16,15 AAA na --paper  */
  --paper:      #F4F2F0;  /* tło dominujące (neutralne)                       */
  --red:        #972326;  /* WYŁĄCZNIE akcje i ceny      7,28 AAA na --paper  */
  --stone:      #6B625B;  /* tekst drugorzędny           5,34 AA  na --paper  */
  --line:       #CDC6BE;  /* WYŁĄCZNIE linie — 1,51 = FAIL dla tekstu         */

  /* ⚠ --red na --ink = 2,22 FAIL. W ciemnym pasie przycisk musi mieć
     biały tekst na czerwonym tle, nigdy czerwony tekst na ciemnym.          */

  --white:      #FFFFFF;

  /* Tło ustalone: neutralne. Warianty cieplejsze odrzucone —
     biały gubi krawędź zdjęć (mają białe studyjne tło),
     piaskowy (b* +5,5) wchodzi w generyczny beż salonu.                     */

  /* ── Typografia ───────────────────────────────────────────────────────── */
  --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-proza:   'Newsreader', Georgia, 'Times New Roman', serif;

  --ts-display: clamp(2.5rem, 1.2rem + 6vw, 6.5rem);
  --ts-h1:      clamp(2rem, 1.2rem + 3.6vw, 3.75rem);
  --ts-h2:      clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  --ts-h3:      clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  --ts-proza:   1.125rem;
  --ts-body:    1rem;
  --ts-small:   0.875rem;

  --lh-display: 0.98;
  --lh-naglowek:1.12;
  --lh-proza:   1.6;
  --lh-ui:      1.5;
  --track-display: -0.025em;

  --waga-display: 300;   /* „cienkie ale mocne" — skala niesie siłę, nie grubość */
  --waga-ui:      400;
  --waga-mocna:   500;

  --miara: 64ch;

  /* ── Odstępy. Krok 8, progresja ~1,6× ─────────────────────────────────── */
  --s-1:.25rem; --s-2:.5rem; --s-3:1rem; --s-4:1.5rem;
  --s-5:2.5rem; --s-6:4rem; --s-7:6.5rem; --s-8:10.5rem;

  --odstep-sekcji: var(--s-6);
  --margines: var(--s-3);
  --kontener: 1200px;

  --r-klikalne: 2px;   /* promień = sygnał interaktywności, nic więcej */

  --czas: 160ms;
  --krzywa: cubic-bezier(.2,0,0,1);
  --wys-naglowka: 56px;
}


@media (min-width:48rem){
  :root{ --margines:var(--s-5); --odstep-sekcji:var(--s-7); --wys-naglowka:64px; }
}
@media (min-width:64rem){
  :root{ --margines:var(--s-6); --odstep-sekcji:var(--s-8); }
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--wys-naglowka)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-display);font-size:var(--ts-body);
  font-weight:var(--waga-ui);line-height:var(--lh-ui);
  -webkit-font-smoothing:antialiased;text-wrap:pretty;
}
img,picture,video,svg,iframe{display:block;max-width:100%}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4{
  margin:0;font-family:var(--font-display);font-weight:var(--waga-display);
  line-height:var(--lh-naglowek);letter-spacing:var(--track-display);text-wrap:balance;
}
p,ul,ol,dl{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}

/* Proza szeryfowa — teraz ma swoje miejsce, bo tło jest jasne (DESIGN.md §10.3) */
.proza{
  font-family:var(--font-proza);font-size:var(--ts-proza);
  line-height:var(--lh-proza);max-width:var(--miara);
}

.cena{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

:where(a,button,input,textarea,select,summary):focus-visible{
  outline:2px solid var(--red);outline-offset:3px;
}

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

.kontener{width:100%;max-width:var(--kontener);margin-inline:auto;padding-inline:var(--margines)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}