/* =====================================================================
   smacznejkawusi.pl — tokeny i komponenty bazowe
   Jedyne źródło prawdy dla kolorów, konturów i cieni.
   Nie wprowadzaj nowych wartości hex poza tym plikiem.
   ===================================================================== */

:root{
  /* --- kolory --- */
  --papier:#FBF1DD;      /* tło strony */
  --czerwien:#E1523D;    /* nagłówki, aktywny tab, główne CTA */
  --mieta:#79C9A8;       /* drugi przycisk, pas generatora */
  --musztarda:#F2A81D;   /* marquee, numerki, akcenty */
  --losos:#F6C9BF;       /* tła zdjęć produktowych */
  --atrament:#141210;    /* kontury, cienie, tekst */
  --espresso:#5A3016;    /* wyłącznie sama kawa na grafikach */
  --biel:#FFFFFF;        /* karty */

  /* --- typografia --- */
  --display:"Anton",Impact,sans-serif;
  --tekst:"Archivo","Segoe UI",system-ui,sans-serif;
  --kicz:"Comic Sans MS","Segoe Script",cursive;  /* tylko wewnątrz płótna generatora */

  /* --- kontury i cienie (bez rozmycia, zawsze atrament) --- */
  --kontur:2px solid var(--atrament);
  --kontur-gruby:3px solid var(--atrament);
  --cien-maly:3px 3px 0 var(--atrament);
  --cien:5px 5px 0 var(--atrament);
  --cien-duzy:8px 8px 0 var(--atrament);

  --promien:2px;         /* narożniki prawie ostre */
  --maks:1120px;
}

/* --- baza --- */
body{
  margin:0;
  font-family:var(--tekst);
  color:var(--atrament);
  line-height:1.55;
  background-color:var(--papier);
  background-image:radial-gradient(#E7D6B6 1.4px, transparent 1.4px);
  background-size:18px 18px;
}
h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  line-height:.98;
  letter-spacing:.01em;
  text-transform:uppercase;
  margin:0;
}
.kontener{max-width:var(--maks);margin:0 auto;padding:0 20px}
.etykieta{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700}

/* --- przyciski ---------------------------------------------------- */
.btn{
  display:inline-block;font-family:var(--tekst);font-size:15px;font-weight:700;
  color:var(--atrament);background:var(--biel);text-decoration:none;
  border:var(--kontur);border-radius:var(--promien);
  padding:12px 22px;cursor:pointer;box-shadow:var(--cien);
  transition:transform .08s, box-shadow .08s;
}
.btn:active{transform:translate(3px,3px);box-shadow:var(--cien-maly)}
.btn-czerwony{background:var(--czerwien)}
.btn-mieta{background:var(--mieta)}
.btn-musztarda{background:var(--musztarda)}
.btn-kicz{background:var(--musztarda);font-family:var(--kicz)}
.btn-maly{padding:8px 14px;font-size:13px;box-shadow:var(--cien-maly)}

/* --- karty -------------------------------------------------------- */
.karta{background:var(--biel);border:var(--kontur);border-radius:var(--promien);box-shadow:var(--cien)}
.karta-wyroz{border:var(--kontur-gruby);box-shadow:var(--cien-duzy);background:var(--papier)}
/* przesunięty kolorowy blok pod kartą (jak w hero) */
.karta-zolta{box-shadow:8px 8px 0 var(--musztarda),8px 8px 0 2px var(--atrament)}
.karta-czerwona{box-shadow:8px 8px 0 var(--czerwien),8px 8px 0 2px var(--atrament)}

/* --- taby --------------------------------------------------------- */
.tab{
  padding:8px 12px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  text-decoration:none;color:var(--atrament);border:2px solid transparent;border-radius:var(--promien);
}
.tab:hover{border-color:var(--atrament)}
.tab.akt{background:var(--czerwien);border-color:var(--atrament);box-shadow:var(--cien-maly)}

/* --- plakietki ---------------------------------------------------- */
.plakietka{
  display:inline-block;width:max-content;background:var(--czerwien);border:var(--kontur);
  border-radius:var(--promien);padding:2px 9px;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.plakietka-mieta{background:var(--mieta)}

/* --- marquee ------------------------------------------------------ */
.marquee{background:var(--musztarda);border-top:var(--kontur);border-bottom:var(--kontur);overflow:hidden;padding:10px 0}
.marquee-tor{display:flex;white-space:nowrap;animation:jedzie 26s linear infinite}
.marquee span{font-family:var(--display);font-size:19px;letter-spacing:.06em;padding-right:26px}
@keyframes jedzie{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-tor{animation:none}}

/* --- dostępność --------------------------------------------------- */
:focus-visible{outline:3px solid var(--atrament);outline-offset:3px}