/* ========================================
   ZPKB THEME – GLOBAL BASE STYLES
   ======================================== */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:wght@500;600;700&display=swap');

/* --- CSS VARIABLES --- */
:root {
  /* Kolory bazowe */
  --color-bg: #F9F9F9;
  --color-text: #1F1F29;
  --color-surface: #FFFFFF;     /* karty, boxy */
  --color-muted: #6B6B75;       /* opisy, meta */
  --color-border: #E6E3DF;      /* linie, ramki */
  --color-shadow: rgba(31, 31, 41, 0.08);

  /* Brand (beż / brąz kamienny) */
  --color-primary: #7C6A4D;        /* ciepły brąz-kamień */
  --color-primary-hover: #5E4F3A;  /* ciemniejszy */
  --color-sand: #F5F0EB;           /* piaskowy */
  --color-sand-soft: #FBF8F5;      /* bardzo jasny beż (tła sekcji) */

  /* Olive / Secondary */
  --color-olive: #3F5A46;          /* oliwka (secondary CTA / badge) */
  --color-olive-hover: #324A39;
  --color-olive-soft: #E7EFEA;     /* jasna oliwka na tła */

  /* Green (kontrast na buttony / mocne CTA) */
  --color-cta: #1F6B4E;            /* głęboka zieleń (czytelna na jasnym tle) */
  --color-cta-hover: #185840;
  --color-cta-soft: #E3F1EA;       /* tło pod info/cta-box */

  /* Dark sections (footer, hero na ciemno) */
  --color-dark: #2A2A33;
  --color-dark-soft: #3A3A45;

  /* Focus ring (dostępność) */
  --focus-ring: 0 0 0 3px rgba(31, 107, 78, 0.28);

  /* Typography */
  --font-body: 'Inter', sans-serif;
  --font-heading: 'Playfair Display', serif;

  /* Max width */
  --container-width: 1200px;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
}

/* ========================================
   RESET / NORMALIZE (lekki)
   ======================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */

h1,
h2,
h3 {
  font-family: var(--font-heading);
  margin: 0 0 16px;
  line-height: 1.2;
  font-weight: 600;
}

h1 {
  font-size: clamp(36px, 5vw, 56px);
}

h2 {
  font-size: clamp(28px, 3.5vw, 40px);
}

h3 {
  font-size: clamp(20px, 2.5vw, 28px);
}

p {
  margin: 0 0 16px;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ========================================
   LAYOUT
   ======================================== */

.container {
  width: 100%;
  margin: 0 auto;
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}

@media (max-width: 900px) {
  .container {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }
}

/* ========================================
   REVEAL ON SCROLL
   ======================================== */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .7s ease;
  will-change: opacity, transform;
}

.reveal.is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger: dzieci sekcji (opcjonalnie) */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .7s ease;
  transition-delay: calc(var(--stagger, 0) * 80ms);
}

.reveal-stagger.is-inview > * {
  opacity: 1;
  transform: translateY(0);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > * {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}