/*
  tokens.css — wartości marki MARRTINEZ.PL (strona publiczna).
  Źródło: CLAUDE.md. Nie definiować tu koloru Sygnał (#A63D2E) —
  jest zarezerwowany wyłącznie dla galerii klienta i nie może
  przypadkiem trafić na stronę publiczną.
*/

:root {
  /* Kolor */
  --color-paper: #FAFAF8;
  --color-ink: #101010;
  --color-graphite: #6E6E6E;
  --color-hairline: #E3E2DD;
  --color-night: #111110;
  --color-night-ink: #FAFAF8; /* tekst na tle Noc */
  --color-loading: #EDEBE8;

  /* Typografia */
  --font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;

  /* Skala odstępów, baza 8px */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 40px;
  --sp-5: 64px;
  --sp-6: 96px;
  --sp-7: 160px;
  --sp-8: 240px;

  /* Odstępy zależne od breakpointu (nadpisywane w media query) */
  --gap-photos: var(--sp-4);     /* 40 mobile */
  --gap-chapters: var(--sp-7);   /* 120 mobile -> patrz media query, uwaga: baza 8px nie ma 120, patrz niżej */
  --page-margin: var(--sp-2);    /* 20 mobile — patrz override poniżej (20 nie jest w skali 8px, ale wymagane wprost w CLAUDE.md) */

  --content-max: 1280px;
  --header-height: 64px;
  --axis-height: 76px;

  /* Typografia — telefon (domyślnie, mobile-first) */
  --fs-couple-name: 34px;
  --fs-section-title: 26px;
  --fs-subtitle: 20px;
  --fs-body: 16px;
  --fs-meta: 11px;
  --fs-hour: 12px;

  --lh-body: 1.7;
  --measure-body: 62ch;

  /* Animacje */
  --dur-photo-fade: 600ms;
  --dur-nav: 200ms;
  /* Wjazd paska "Sprawdź termin" — świadomy wyjątek poza "trzema
     dozwolonymi animacjami" (tak jak ruchomy znacznik osi dnia). Osobny,
     wolniejszy czas niż --dur-nav: przy 200ms wjazd z dolnej krawędzi
     ekranu (poza głównym polem uwagi, gdzie akurat jest zdjęcie) bywał
     niezauważalny — zbyt szybki, żeby oko złapało ruch peryferyjnie.
     Wolniejszy, płynny wjazd jest łatwiejszy do zauważenia niż szybkie
     "cięcie", mimo że pokonuje tę samą odległość. */
  --dur-reveal: 450ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --parallax-max: 0.04; /* 4% wysokości */
}

/* Marginesy strony wprost z CLAUDE.md (20 / 40 / 80 — poza skalą 8px, ale to
   wartości nadrzędne dla tej trójki, reszta odstępów trzyma się skali). */
:root {
  --page-margin: 20px;
  --gap-chapters: 120px;
}

@media (min-width: 768px) {
  :root {
    --page-margin: 40px;
    --gap-photos: var(--sp-6);   /* 96 */
    --gap-chapters: 240px;

    --fs-couple-name: 64px;
    --fs-section-title: 40px;
    --fs-subtitle: 24px;
    --fs-body: 17px;
    --fs-meta: 12px;
    --fs-hour: 13px;
  }
}

@media (min-width: 1024px) {
  :root {
    --page-margin: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-photo-fade: 150ms;
    --parallax-max: 0;
  }
}