/* Tokeny projektu, Salon Masażu Magnolia, Pawłowice.
   Zmierzone pikselowo z mockupu Karola, 26.08.2026
   (raw/klienci/salon-magnolia/projekt-karol-2026-08-26/Home/).
   Nic poza tym plikiem nie ma prawa mieć zahardkodowanego hexa. */

:root {
  /* Kolor. Próbki pikselowe z sekcja1.png, sekcja2.png, sekcja5.png. */
  --surface-cream: #F3ECE5;        /* tło kart jasnych (oferta, o mnie, kroki) */
  --clr-cream-wash: #EAE1D8;   /* wąski odstęp między kartami sekcji, tło strony */
  --surface-dark: #1B1713;         /* karta ciemna: hero, cta koncowe, stopka */
  --clr-dark-2: #221E19;       /* karta ciemna opinii, odrobinę jaśniejsza */
  --accent: #8C5129;       /* terakota: CTA, linki, cyfry sekcji, plakietki */
  --accent-ctx: #CF8740;  /* akcent jasniejszy, cienkie linie i drobny tekst na ciemnym */
  --text-on-light: #241A12;          /* nagłówki na jasnym tle */
  --text-on-light-muted: #5B5248;     /* body na jasnym tle */
  --text-on-dark: #F7EEE3;   /* nagłówki na ciemnym tle */
  --text-on-dark-muted: #DED5C9; /* body na ciemnym tle */
  --line-on-light: #DCD0C2;        /* linie cienkie na jasnym tle */
  --line-on-dark: rgba(207,135,64,.35); /* linie cienkie na ciemnym tle */
  --surface-white: #FFFFFF;

  /* Typografia. Cormorant Garamond do nagłówków, Jost do reszty. Self-hosted, latin + latin-ext. */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-text: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display-2: clamp(32px, 4.6vw, 52px);
  --fs-display-3: clamp(26px, 3.2vw, 38px);
  --fs-display-4: clamp(19px, 1.6vw, 23px);
  --fs-lead: clamp(16px, 1.4vw, 18px);
  --fs-body: clamp(15px, 1.1vw, 17px);
  --fs-small: 13px;
  --fs-eyebrow: 13px;

  --lh-display: 1.16;
  --lh-body: 1.7;
  --ls-eyebrow: 0.14em;

  /* Przestrzeń. Odstępy w px, szerokości fluid (D-KONTENER-FLUID, 04.09).
     clamp: min = wartosc Karola (1200px), rowna dokladnie 83.3333vw przy
     1440px, wiec ponizej i na 1440 formula daje identyczny wynik co stara
     stala (zero regresji), powyzej rosnie proporcjonalnie do viewportu az
     do sufitu 2200px (bardzo szerokie ekrany), zamiast zamrazac sie na 1200. */
  --container: clamp(1200px, 83.3333vw, 2200px);
  --kontener-x: 24px;
  --space-section: 72px;
  --sekcja-y-mobile: 44px;
  /* Wariant "split" feature-bar (dyplom-pas): pas dowodu ma być wizualnie
     węższy niż pełna sekcja. Wartość jak w oryginalnym dyplom-pas.php przed
     Blokiem D, tylko przeniesiona z inline style do tokenu, 05.09.2026. */
  --sekcja-y-split: 48px;

  /* D-PLASKIE-SEKCJE, 06.09.2026: .strona traci wlasny padding/gap, sekcje
     ida pelna szerokoscia, zero szwu miedzy panelami. --strona-pad zostaje
     jako jedyny uzytkownik: wciecie boczne hero home, jedynego zaokraglonego
     panelu sekcyjnego (D-HERO-FLUSH-COFNIETE plus decyzja nocna 06.09). */
  --strona-pad: 12px;

  /* Wysokosc wszystkiego, co stoi nad trescia: topbar + naglowek, flush.
     Od D-PLASKIE-SEKCJE (06.09.2026) hero siedzi TUZ pod headerem, zero
     gap (wrapper juz nie ma gap), wiec [data-hero].top = dokladnie ten
     token, bez doliczania --strona-pad jak w poprzedniej wersji (kiedy
     gap .strona jeszcze istnial). Wartosci per breakpoint bez zmian:
     132/116/112. Kontrola w QA: [data-hero].top musi rownac sie temu
     tokenowi, w granicy 2 px. */
  --chrome-h: 132px;
  --space-2: 8px;
  --space-4: 16px;
  --space-5: 24px;
  --space-7: 40px;
  --space-9: 64px;

  /* Kształt. --radius-panel od 06.09.2026 (D-PLASKIE-SEKCJE) uzywa
     wylacznie hero home, jedyny zaokraglony panel sekcyjny. */
  --radius-panel: 28px;
  --radius-md: 18px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-karta: 0 12px 32px rgba(27, 23, 19, 0.10);

  /* Ruch. Fade in i slide up, nic więcej. */
  --dur: 500ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (max-width: 767px) {
  :root {
    --space-section: 44px;
    --kontener-x: 20px;
    --radius-panel: 20px;
    --strona-pad: 8px;
  }
}

@media (max-width: 900px) {
  :root { --chrome-h: 116px; }
}
@media (max-width: 767px) {
  :root { --chrome-h: 112px; }
}