@charset "UTF-8";
/* ==========================================================================
   Design tokens — Sprzątanie Grobów Chełm
   Kierunek: "Chłodny kamień / szałwia" — dostojnie, spokojnie, z szacunkiem.
   ========================================================================== */

html { font-size: 112.5%; } /* baza ~18px — czytelność dla starszych odbiorców */

:root {
  /* --- Kolory: baza ------------------------------------------------------ */
  --bg: #f6f6f4;          /* chłodna biel — tło strony (nie ciepły krem) */
  --surface: #ffffff;     /* podniesione powierzchnie, oszczędnie */
  --surface-2: #eeefec;   /* delikatnie odcięta jasna sekcja */

  --ink: #22282a;         /* tekst główny — łupkowy grafit (nie czerń) */
  --muted: #57615c;       /* tekst drugorzędny */
  --stone: #a9b4ae;       /* kamienna szarość — subtelne elementy */

  /* --- Kolory: sekcje ciemne -------------------------------------------- */
  --dark: #212b2a;        /* hero / nav / stopka — grafit z odcieniem zieleni */
  --dark-2: #1a2322;      /* głębszy ton w ciemnych sekcjach */
  --on-dark: #eef1ee;     /* tekst na ciemnym */
  --on-dark-muted: #9fb0a9;/* drugorzędny tekst na ciemnym */

  /* --- Akcent: szałwia (jeden, zdyscyplinowany) ------------------------- */
  --accent: #7e9b8a;      /* eukaliptus / szałwia */
  --accent-deep: #5c7767; /* ciemniejsza szałwia — hover, tekst na jasnym */
  --accent-soft: #e6ece7; /* bardzo jasny wypełniacz szałwii */

  /* --- Linie i cienie --------------------------------------------------- */
  --line: rgba(34, 40, 42, 0.12);      /* hairline na jasnym */
  --line-strong: rgba(34, 40, 42, 0.22);
  --line-on-dark: rgba(238, 241, 238, 0.14);
  --shadow-sm: 0 1px 2px rgba(28, 34, 34, 0.05), 0 1px 3px rgba(28, 34, 34, 0.06);
  --shadow-md: 0 6px 20px rgba(28, 34, 34, 0.08);
  --shadow-header: 0 1px 0 rgba(238, 241, 238, 0.06), 0 8px 24px rgba(0, 0, 0, 0.18);

  /* --- Typografia ------------------------------------------------------- */
  --font-display: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", "Source Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* skala typograficzna (fluid) — powiększona pod czytelność (starsi odbiorcy) */
  --fs-display: clamp(2.25rem, 1.2rem + 5.5vw, 5rem);
  --fs-h1: clamp(2.4rem, 1.7rem + 3vw, 3.6rem);
  --fs-h2: clamp(1.9rem, 1.45rem + 2vw, 2.75rem);
  --fs-h3: clamp(1.45rem, 1.2rem + 1vw, 1.9rem);
  --fs-h4: 1.3rem;
  --fs-body: 1rem;        /* zwykły paragraf w sekcjach contentowych (~18px) */
  --fs-sm: 1rem;
  --fs-xs: 0.875rem;

  --lh-tight: 1.12;       /* nagłówki Caslon */
  --lh-snug: 1.3;
  --lh-body: 1.6;
  --tracking-tight: -0.01em;
  --tracking-wide: 0.02em;

  /* --- Odstępy (skala 4px) ---------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* --- Wymiary layoutu -------------------------------------------------- */
  --container: 1180px;
  --container-narrow: 760px;

  /* --- Długość wiersza tekstu -------------------------------------------
     JEDNO miejsce sterujące szerokością akapitów w całym motywie.
     Wpisz `none`, żeby tekst wszędzie zajmował pełną szerokość kolumny. */
  --measure: 68ch;          /* zwykłe akapity */
  --measure-narrow: 46ch;   /* wąskie kolumny pomocnicze (stopka, boczne opisy) */
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --header-h: 76px;
  /* Wysokość logo — jedna dla nagłówka i stopki. Szerokość dolicza się sama
     z proporcji pliku, który jest przycięty do samego znaku. */
  --logo-h: clamp(2.3rem, 4.4vw, 2.8rem);

  /* --- Kształt ----------------------------------------------------------- */
  --radius-sm: 3px;       /* architektoniczny, nie „bąbelkowy” */
  --radius: 6px;
  --radius-lg: 10px;

  /* --- Ruch -------------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur: 220ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}