/**
 * Design tokens - jedyne miejsce, w którym definiujemy kolory, typografię,
 * odstępy i inne wartości wielokrotnego użytku. Zmiana motywu kolorystycznego
 * odbywa się wyłącznie tutaj.
 *
 * Paleta jest jasna i naturalna (krem/biel, szałwia, oliwka, ziemia) -
 * celowo odwrócona względem ciemnego motywu projektu referencyjnego.
 */
:root {
  /* Kolory - tła
     70% kremu i ciepłej bieli: --color-bg / --color-bg-section /
     --color-bg-elevated pozostają jasne i dominują na stronie.
     --color-bg-alt jest celowo bardziej szałwiowy - używany selektywnie,
     na wybranych sekcjach (naprzemiennych pasach), nie jako tło główne. */
  --color-bg: #FBF9F3;
  --color-bg-section: #F7F4EC;
  --color-bg-alt: #DCE4D1;
  --color-bg-elevated: #FFFFFF;
  --color-bg-header: rgba(251, 249, 243, 0.82);
  --color-bg-header-scrolled: rgba(251, 249, 243, 0.96);

  /* Kolory - tekst */
  --color-text: #2D3028;
  --color-text-muted: #565f4e;
  --color-text-faint: #7c8571;
  --color-text-inverse: #FBF9F3;

  /* Kolory - akcent (20% szałwia i oliwka)
     Hierarchia zieleni: --color-sage (najjaśniejszy, tło/dekoracja) <
     --color-accent (główna oliwka, głębsza i czytelna - ikony, linki,
     obramowania aktywne) < --color-accent-strong (najgłębsza - CTA, stany
     aktywne/hover, tekst wymagający najmocniejszego kontrastu). */
  --color-accent: #556B2F;
  --color-accent-soft: rgba(85, 107, 47, 0.12);
  --color-accent-strong: #3E4F24;

  /* Akcent drugorzędny (szałwia) i ziemisty (glina/brąz, 10% - zachowany
     bez zmian dla odręcznych akcentów: eyebrow, cytaty, notatki autora). */
  --color-sage: #7A8F68;
  --color-sage-soft: rgba(122, 143, 104, 0.16);
  --color-clay: #A47852;
  --color-clay-soft: rgba(164, 120, 82, 0.16);
  --color-gold: #B99A55;

  /* Obramowania */
  --color-border: rgba(45, 48, 40, 0.12);
  --color-border-strong: rgba(45, 48, 40, 0.22);
  --color-border-accent: rgba(85, 107, 47, 0.4);

  /* Stan */
  --color-success: #5c7a4f;
  --color-error: #a4482f;

  /* Typografia - wyłącznie stosy systemowe, bez zewnętrznych fontów */
  --font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-script: "Segoe Script", "Bradley Hand", "Snell Roundhand", cursive;

  --fs-2xs: 0.75rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 3.75rem;
  --fs-5xl: 4.75rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

  /* Odstępy */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* Kontener */
  --container-width: 1280px;
  --container-narrow: 820px;
  --container-padding: clamp(1.25rem, 4vw, 3rem);

  /* Promienie i cienie - miękkie, "papierowe", bez ostrych krawędzi */
  --radius-sm: 3px;
  --radius-md: 8px;
  --radius-lg: 18px;
  --shadow-soft: 0 20px 55px rgba(45, 48, 40, 0.10);
  --shadow-card: 0 10px 26px rgba(45, 48, 40, 0.08);

  /* Ruch */
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 700ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-index */
  --z-header: 100;
  --z-dropdown: 110;
  --z-mobile-menu: 120;
  --z-modal: 200;
  --z-toast: 210;
}

@media (min-width: 768px) {
  :root {
    --fs-3xl: 3.5rem;
    --fs-4xl: 4.5rem;
    --fs-5xl: 6rem;
  }
}