/* =========================================================
   EWA WOŁCZAK — LOGOPEDA — base.css — zmienne, reset, typografia bazowa
   Wydzielone ze styles.css podczas refactoringu (2026).
   ========================================================= *//* =========================================================
   EWA WOŁCZAK — LOGOPEDA
   Paleta: écru ciepłe + koral + szałwia + atramentowy granat
   ========================================================= */
:root{
  --paper:        #FFF9F2;
  --paper-soft:   #FCEFE3;
  --ink:          #2B2A33;
  --ink-soft:     #6B6873;
  --coral:        #F1825A;
  --coral-light:  #FBD9C4;
  --coral-deep:   #C75F38;
  --sage:         #8FA888;
  --sage-light:   #E2EAD8;
  --sage-deep:    #5F7858;
  --line:         rgba(43,42,51,0.10);

  --f-display: 'Fraunces', serif;
  --f-body:    'Nunito Sans', sans-serif;

  --container: 1180px;
  --pad: clamp(20px, 5vw, 64px);

  --ease: cubic-bezier(.22,.61,.36,1);

  /* jeden spójny system czasu animacji — wszystkie mikrointerakcje
     korzystają z tych tokenów, żeby ruch na całej stronie czuł się jednolicie */
  --dur-instant: .11s;   /* :active / kliknięcie */
  --dur-fast:    .2s;    /* linki, ikony, drobne przełączniki */
  --dur-base:    .28s;   /* hover kart, przycisków, pól formularza */
  --dur-slow:    .45s;   /* zoom zdjęć */
  --reveal-duration: .48s;
  --reveal-distance: 20px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

html{ overflow-x:hidden; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
  text-wrap:pretty;
}

/* nagłówki dostają zbalansowane łamanie wierszy zamiast pojedynczych
   "sierotek" — nowoczesny, w pełni CSS-owy odpowiednik ręcznego <br> */
h1, h2, h3,
.hero__title,
.section-head__title,
.contact__title,
.practical__place,
.age-card__range,
.footer__quote,
.subpage-hero__title{
  text-wrap:balance;
}

a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; background:none; border:none; cursor:pointer; }
input, select, textarea{ font-family:inherit; }
img, svg{ display:block; max-width:100%; }

:focus-visible{
  outline:2px solid var(--coral-deep);
  outline-offset:3px;
  border-radius:6px;
}

.cursor-ball{
  position:fixed; top:0; left:0; width:34px; height:34px; border-radius:50%;
  background:var(--coral); opacity:.18; pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%); transition:width .3s var(--ease), height .3s var(--ease), opacity .3s;
  display:none;
}
@media (hover:hover) and (pointer:fine){ .cursor-ball{ display:block; } }