/* =========================================================================
   CJNDESIGN — tokeny systemu wizualnego
   Jedno źródło prawdy dla wszystkich case studies. Nie nadpisuj tych
   wartości lokalnie — dodaj nowy token. (Moodboard „Precision with a human
   pulse” nie jest już kontraktem, decyzja z 25.09.2026.)
   ========================================================================= */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* --- Kolor ------------------------------------------------------------
     Paleta z moodboardu. Niebieski prowadzi portfolio (akcja, eyebrow,
     link). Zieleń NIE jest kolorem portfolio — pojawia się wyłącznie tam,
     gdzie cytujemy markę klienta (zasada 04 moodboardu). */
  --ink: #1d1d1f;
  --ink-soft: #424245;
  --muted: #6e6e73;
  --canvas: #f5f5f7;
  --surface: #ffffff;
  --night: #101012;
  --night-soft: #1c1c20;
  --accent: #0071e3;
  --accent-deep: #0057b7;
  --brand-sensobaza: #5d7f45;
  --brand-sensobaza-lavender: #f3f0f7;
  /* Czarodziejskie Smyczki: tło przycisku „Zapisz dziecko” na żywej stronie
     (--color-primary w ich CSS). Brąz to główny kolor ćwiczenia w Figmie, z którego
     wyszedł klimat Smyczków — cytowany wyłącznie, żeby pokazać, że kolor nie
     przeszedł razem z nim. */
  --brand-smyczki: #8eb085;
  --study-dashboard-brown: #925531;
  /* Flex Fiesta: akcent i tło strony festiwalu. Cytowane wyłącznie w próbkach
     koloru w sekcji o kierunku; reszta case study zostaje w kolorach portfolio. */
  --brand-flexfiesta: #e6ff00;
  --brand-flexfiesta-ink: #0a0a0a;

  /* Sygnał problemu — wyłącznie diagnoza. Czerwień NIE wchodzi do zestawienia
     przed/po: tam kolor działałby jak werdykt, a wzór V7 i zasada 02 moodboardu
     wymagają identycznej skali i neutralnych podpisów po obu stronach. */
  --warn: #b42318;
  --warn-tint: rgba(180, 35, 24, 0.05);
  --warn-line: rgba(180, 35, 24, 0.16);
  --line: rgba(29, 29, 31, 0.14);
  --line-strong: rgba(29, 29, 31, 0.24);
  --line-invert: rgba(255, 255, 255, 0.16);

  /* --- Siatka ------------------------------------------------------------ */
  --max: 1440px;
  --measure: 34rem;          /* długość wiersza tekstu ciągłego */
  --gutter: clamp(1.25rem, 4vw, 4.5rem);

  /* Nawigacja (wzór Base): na szerokich ekranach boczna szyna, poniżej 760 px
     poziomy pasek postępu sekcji przyklejony do góry. --header-h to wysokość
     tego, co zajmuje górę ekranu — przy szynie nie zajmuje nic, więc 0. */
  --rail-w: clamp(11.5rem, 14vw, 14.5rem);
  --header-h: 0rem;

  /* --- Rytm --------------------------------------------------------------
     Density 3/10. Sekcje oddychają; wewnątrz sekcji odstępy są krótsze. */
  --space-2xs: 0.5rem;
  --space-xs: 0.85rem;
  --space-s: 1.4rem;
  --space-m: 2.4rem;
  --space-l: clamp(3rem, 5vw, 4.5rem);
  --space-xl: clamp(4.5rem, 8vw, 7rem);
  --section-y: clamp(5.5rem, 10vw, 9rem);

  /* --- Typografia --------------------------------------------------------
     Skala modularna. Żadnych jednorazowych font-size w plikach case study. */
  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* 7,5rem na szerokim ekranie dawało 120 px w kolumnie o szerokości 557 px,
     czyli 4,6 em na wiersz — fizycznie dwa słowa i nagłówek na cztery linijki.
     Skala zostaje kinowa, ale przestaje walczyć z własną kolumną. */
  --t-display: clamp(2.9rem, 5vw, 4.5rem);
  --t-h2: clamp(2rem, 3.4vw, 3.5rem);
  --t-h3: clamp(1.2rem, 1.8vw, 1.6rem);
  --t-lead: clamp(1.08rem, 1.4vw, 1.38rem);
  --t-body: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --t-small: 0.85rem;
  --t-eyebrow: 0.72rem;
  --t-numeral: clamp(2.4rem, 4.5vw, 3.6rem);
  /* Wyróżnione zdanie w treści sekcji: wyraźnie ponad akapitem, wyraźnie
     poniżej nagłówka sekcji, żeby z nim nie konkurowało. */
  --t-pull: clamp(1.45rem, 2.3vw, 2.1rem);

  --lh-display: 0.94;
  --lh-h2: 1.02;
  --lh-body: 1.7;
  --ls-display: -0.055em;
  --ls-h2: -0.045em;
  /* Ciasny tracking zjada też spacje: przy wadze 620 wyrazy zlewały się
     w jeden ciąg („Noclegpo drodze”). Odstęp między wyrazami oddaje część
     tego, co odebrał letter-spacing (uwaga Cypriana, 05.10.2026). */
  --ws-display: 0.08em;
  --ws-h2: 0.06em;
  --lh-eyebrow: 1.3;
  --ls-eyebrow: 0.1em;

  /* --- Materiał ---------------------------------------------------------- */
  --radius-s: 0.75rem;
  --radius-m: 1.25rem;
  --radius-l: clamp(1.4rem, 2.4vw, 2rem);
  --shadow-soft: 0 24px 70px rgba(29, 29, 31, 0.1);
  --shadow-lift: 0 34px 90px rgba(29, 29, 31, 0.16);

  /* --- Ruch --------------------------------------------------------------
     Motion 5/10. Ruch odsłania hierarchię i nigdy nie jest warunkiem
     przeczytania treści (zasada 05 moodboardu). */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.18s;
  --dur: 0.32s;
  --dur-reveal: 0.55s;
}