/* ═══════════════════════════════════════════════════════════════
   ADSY — 1 · BAZA
   Zmienne, typografia, odstępy. Wczytywany jako pierwszy.
   Nie dopisuj tu komponentów — od tego jest komponenty.css
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── KOLORY ─────────────────────────────────────────────────
     Sloty Kadence 1–9 mają te same wartości. Zmiana w palecie
     motywu przemaluje stronę; te zmienne są zapasem dla miejsc,
     gdzie paleta nie sięga. */
  --forest:  #063d28;   /* ciemna zieleń — sekcje, nagłówki, przyciski */
  --moss:    #02603d;   /* zieleń średnia — nadtytuły, odnośniki */
  --spring:  #48f093;   /* jasna zieleń — TYLKO na ciemnym tle */
  --ink:     #111a16;   /* tekst główny */
  --gray:    #5b625f;   /* tekst poboczny */
  --stone:   #e2e5e2;   /* linie, obramowania */
  --white:   #ffffff;

  /* tła sekcji */
  --board:   #f0f5f2;   /* jasny neutralny szary */
  --mint:    #eaf6ef;   /* jasny miętowy */
  --paper:   #eae7e3;   /* chłodny piaskowy */
  --sand:    #e8dcc2;   /* ciepły piaskowy */
  --void:    #040a16;   /* prawie czarna */

  /* ── ODSTĘPY ────────────────────────────────────────────────
     Przy 390 px każda wartość spada do minimum — skalowanie
     przez vw na telefonie nie działa. Dolny próg jest tym,
     co faktycznie zobaczysz. */
  --sec-y:        clamp(60px, 8.5vw, 140px);   /* sekcja duża */
  --sec-y-sred:   clamp(48px, 6.5vw, 110px);   /* sekcja zwykła */
  --sec-y-maly:   clamp(30px, 4vw,   64px);    /* sekcja zbita */
  --po-naglowku:  clamp(20px, 2.4vw, 38px);
  --miedzy:       clamp(26px, 3.2vw, 48px);

  /* ── SZEROKOŚCI ─────────────────────────────────────────────
     91vw to odstęp od krawędzi ekranu. NIE nadpisuj wartością
     100% — skasujesz oddech przy brzegu. */
  --wrap:  min(1240px, 91vw);
  --proza: 690px;       /* kolumna tekstu — najważniejsza liczba */

  /* ── KRZYWE ─────────────────────────────────────────────────
     Dwie, nie więcej. */
  --out:  cubic-bezier(.24, 1, .3, 1);    /* wyjścia, uniesienia */
  --soft: cubic-bezier(.05, .2, .1, 1);   /* wejścia elementów */

  --pill: 200px;
  --hand: 'Handlee', cursive;
}


/* ── KOLUMNA TEKSTU ────────────────────────────────────────────
   Akapity NIGDY nie ciągną się przez całą szerokość kontenera.
   Nagłówek może być szeroki, proza nie. */
.proza{ max-width: var(--proza) }
.proza p{
  font-size: clamp(16.5px, 1.15vw, 18.5px);
  line-height: 1.7;
  color: var(--gray);
  margin: 0 0 1.15em;
}
.proza p:last-child{ margin-bottom: 0 }
.proza strong{ color: var(--forest); font-weight: 700 }

.lead{
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.6;
  color: var(--gray);
  max-width: 56ch;
}


/* ── AKCENT PISANY ───────────────────────────────────────────── */
.hand{
  font-family: var(--hand);
  font-weight: 400;
  font-size: 1.14em;
  color: var(--moss);
  display: inline-block;
}


/* ── TŁA SEKCJI ──────────────────────────────────────────────── */
.sec--board { background: var(--board) }
.sec--mint  { background: var(--mint) }
.sec--paper { background: var(--paper) }
.sec--sand  { background: var(--sand) }
.sec--forest{ background: var(--forest); color: #e6f2ec }
.sec--void  { background: var(--void);   color: #e6f2ec }

/* Dwie sekcje w tym samym tonie obok siebie — odstęp o połowę.
   To jedyne odstępstwo od reguły równych odstępów. */
.sec--board  + .sec--board,
.sec--mint   + .sec--mint,
.sec--paper  + .sec--paper,
.sec--sand   + .sec--sand,
.sec--forest + .sec--forest,
.sec--void   + .sec--void{ padding-top: calc(var(--sec-y) / 2) }


/* ── NA CIEMNYM TLE TYLKO JASNE KOLORY ─────────────────────────
   Reguła obejmuje WSZYSTKIE ciemne konteksty. Bez tego akcent
   pisany dziedziczy ciemną zieleń i znika. */
.sec--forest h1, .sec--forest h2, .sec--forest h3,
.sec--void h1,   .sec--void h2,   .sec--void h3{ color: #fff }

.sec--forest p, .sec--void p,
.sec--forest li, .sec--void li{ color: rgba(230,242,236,.78) }

.sec--forest .hand, .sec--void .hand,
.hero-gradient .hand{ color: var(--spring) }

.sec--forest .proza strong,
.sec--void .proza strong{ color: #fff }