/* ============================================
   EDUKIDO — Półkolonie Letnie
   Design system: warm LEGO-inspired + handmade
   ============================================ */

:root {
  /* Core palette — from logo */
  --yellow: #FDC82F;
  --yellow-soft: #FFE38A;
  --yellow-cream: #FFF4CF;
  --navy: #1E2A6B;
  --navy-ink: #151d4d;
  --navy-soft: #3B48A0;

  /* Brick accents */
  --brick-red: #E63946;
  --brick-blue: #2B8FD1;
  --brick-green: #6CBE4E;

  /* Neutrals */
  --cream: #FFF9EC;
  --paper: #FFFDF7;
  --ink-60: rgba(30, 42, 107, 0.6);
  --ink-40: rgba(30, 42, 107, 0.4);
  --ink-15: rgba(30, 42, 107, 0.15);
  --ink-08: rgba(30, 42, 107, 0.08);

  /* Shadows */
  --shadow-sm: 0 2px 0 rgba(30, 42, 107, 0.08);
  --shadow-md: 0 8px 24px -8px rgba(30, 42, 107, 0.25);
  --shadow-lg: 0 18px 40px -12px rgba(30, 42, 107, 0.28);
  --shadow-brick: 0 4px 0 0 var(--navy);
  --shadow-brick-lg: 0 6px 0 0 var(--navy);

  /* Radii */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* Type */
  --font-display: "Bricolage Grotesque", "Fraunces", system-ui, sans-serif;
  --font-body: "Nunito", "Quicksand", system-ui, sans-serif;
  --font-hand: "Caveat", "Kalam", cursive;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 26px;
  border-radius: var(--r-pill);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
  font-family: var(--font-display);
}
.btn-primary {
  background: var(--brick-red);
  color: #fff;
  box-shadow: 0 5px 0 0 #9E2230;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 7px 0 0 #9E2230; }
.btn-primary:active { transform: translateY(2px); box-shadow: 0 2px 0 0 #9E2230; }

.btn-navy {
  background: var(--navy);
  color: var(--yellow);
  box-shadow: 0 5px 0 0 #0E1542;
}
.btn-navy:hover { transform: translateY(-2px); box-shadow: 0 7px 0 0 #0E1542; }
.btn-navy:active { transform: translateY(2px); box-shadow: 0 2px 0 0 #0E1542; }

.btn-yellow {
  background: var(--yellow);
  color: var(--navy);
  box-shadow: 0 5px 0 0 #C79B15;
}
.btn-yellow:hover { transform: translateY(-2px); box-shadow: 0 7px 0 0 #C79B15; }
.btn-yellow:active { transform: translateY(2px); box-shadow: 0 2px 0 0 #C79B15; }

.btn-ghost {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
  padding: 14px 24px;
}
.btn-ghost:hover { background: var(--navy); color: var(--yellow); }

.btn-lg { padding: 20px 34px; font-size: 18px; }
.btn-sm { padding: 10px 18px; font-size: 14px; }

/* ---------- Shared tokens ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-hand);
  font-size: 24px;
  color: var(--brick-red);
  font-weight: 700;
  line-height: 1;
}
.eyebrow::before {
  content: "";
  width: 24px; height: 2px;
  background: var(--brick-red);
  display: inline-block;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-weight: 800;
}
h1 { font-size: clamp(42px, 9vw, 88px); }
h2 { font-size: clamp(34px, 6vw, 56px); }
h3 { font-size: clamp(22px, 3.5vw, 28px); }

p { margin: 0; }

/* ---------- Sections ---------- */
section { position: relative; }
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Utility: brick dots on polaroid style ---------- */
.polaroid {
  background: #fff;
  padding: 10px 10px 18px;
  border-radius: 4px;
  box-shadow: var(--shadow-lg);
  display: inline-block;
  transform: rotate(-2deg);
  transition: transform 0.3s ease;
}
.polaroid:hover { transform: rotate(0deg) scale(1.02); }
.polaroid .inner {
  background: var(--ink-08);
  aspect-ratio: 4 / 3;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.polaroid .inner img { width: 100%; height: 100%; object-fit: cover; }
.polaroid .caption {
  font-family: var(--font-hand);
  font-size: 22px;
  color: var(--navy);
  text-align: center;
  margin-top: 8px;
  line-height: 1;
}

/* ---------- LEGO studs ---------- */
.studs {
  display: flex;
  gap: 6px;
}
.stud {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--navy); opacity: 0.25;
}

/* ---------- Scrollbar hide ---------- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* ---------- Pop-in animation ---------- */
@keyframes bounce-in {
  0% { opacity: 0; transform: translateY(20px) scale(0.95); }
  60% { transform: translateY(-4px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.bounce-in { animation: bounce-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

/* ---------- Shake on error ---------- */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.shake { animation: shake 0.3s ease; }

/* ---------- Media: phone-first ---------- */
@media (max-width: 640px) {
  .container { padding: 0 18px; }
  .btn-lg { padding: 16px 24px; font-size: 16px; }
}