/* =============================================================================
   Pan Busowski / oproznianie365.pl — Design Tokens
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---- Brand Colors ---- */
  --pb-green:       #50b848;
  --pb-green-600:   #3fa337;
  --pb-green-700:   #2f8b29;
  --pb-green-100:   #e3f4e0;
  --pb-green-50:    #f1faf0;

  --pb-yellow:      #ffdd00;
  --pb-yellow-600:  #f5cf00;
  --pb-yellow-100:  #fff7c2;
  --pb-yellow-50:   #fffce6;

  /* ---- Neutrals ---- */
  --pb-ink:         #1a1d22;
  --pb-ink-2:       #2b3038;
  --pb-text:        #3a3f47;
  --pb-text-muted:  #6b7280;
  --pb-text-soft:   #9aa1ab;

  --pb-line:        #e6e8ec;
  --pb-line-soft:   #f0f2f5;
  --pb-surface:     #ffffff;
  --pb-surface-2:   #f7f8fa;
  --pb-surface-3:   #eef0f3;

  /* ---- Semantic ---- */
  --pb-success:     #50b848;
  --pb-warning:     #f59e0b;
  --pb-danger:      #e23b3b;
  --pb-info:        #2a7fdb;

  /* ---- Typography ---- */
  --pb-font-display: 'Onest', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pb-font-body:    'Inter', 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pb-font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --pb-fs-display:  64px;
  --pb-fs-h1:       48px;
  --pb-fs-h2:       36px;
  --pb-fs-h3:       28px;
  --pb-fs-h4:       22px;
  --pb-fs-h5:       18px;
  --pb-fs-body-lg:  18px;
  --pb-fs-body:     16px;
  --pb-fs-sm:       14px;
  --pb-fs-xs:       12px;

  --pb-lh-tight:    1.1;
  --pb-lh-snug:     1.25;
  --pb-lh-normal:   1.45;
  --pb-lh-relaxed:  1.6;

  --pb-tracking-tight: -0.02em;
  --pb-tracking-flat:  0;
  --pb-tracking-wide:  0.04em;

  /* ---- Radii ---- */
  --pb-r-xs:   6px;
  --pb-r-sm:   10px;
  --pb-r-md:   14px;
  --pb-r-lg:   20px;
  --pb-r-xl:   28px;
  --pb-r-2xl:  36px;
  --pb-r-pill: 999px;

  /* ---- Shadows ---- */
  --pb-shadow-xs:     0 1px 2px rgba(26,29,34,.05);
  --pb-shadow-sm:     0 2px 8px rgba(26,29,34,.06);
  --pb-shadow-md:     0 8px 24px rgba(26,29,34,.08);
  --pb-shadow-lg:     0 20px 48px rgba(26,29,34,.10);
  --pb-shadow-green:  0 12px 28px rgba(80,184,72,.30);
  --pb-shadow-yellow: 0 12px 28px rgba(255,221,0,.45);

  /* ---- Spacing (4px base) ---- */
  --pb-s-1:   4px;
  --pb-s-2:   8px;
  --pb-s-3:   12px;
  --pb-s-4:   16px;
  --pb-s-5:   20px;
  --pb-s-6:   24px;
  --pb-s-8:   32px;
  --pb-s-10:  40px;
  --pb-s-12:  48px;
  --pb-s-16:  64px;
  --pb-s-20:  80px;
  --pb-s-24:  96px;

  /* ---- Motion ---- */
  --pb-ease-out:    cubic-bezier(0.16,1,0.3,1);
  --pb-ease-in-out: cubic-bezier(0.65,0,0.35,1);
  --pb-ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --pb-dur-fast:    140ms;
  --pb-dur-base:    220ms;
  --pb-dur-slow:    420ms;

  /* ---- Container ---- */
  --pb-container-max: 1280px;
  --pb-container-px:  clamp(16px, 4vw, 32px);
}

/* Container */
.pb-container {
  width: 100%;
  max-width: var(--pb-container-max);
  margin: 0 auto;
  padding-left: var(--pb-container-px);
  padding-right: var(--pb-container-px);
}

/* Buttons */
.pb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--pb-r-pill);
  font-family: var(--pb-font-body);
  font-weight: 600;
  font-size: var(--pb-fs-sm);
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--pb-dur-base) var(--pb-ease-out);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.4;
}
.pb-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pb-btn-sm { padding: 7px 14px; font-size: var(--pb-fs-xs); }
.pb-btn-lg { padding: 14px 28px; font-size: var(--pb-fs-body); }
.pb-btn-block { width: 100%; justify-content: center; }

.pb-btn-primary {
  background: var(--pb-green);
  color: #fff;
  border-color: var(--pb-green);
  box-shadow: var(--pb-shadow-green);
}
.pb-btn-primary:hover {
  background: var(--pb-green-600);
  border-color: var(--pb-green-600);
  color: #fff;
  text-decoration: none;
}

.pb-btn-yellow {
  background: var(--pb-yellow);
  color: var(--pb-ink);
  border-color: var(--pb-yellow);
  box-shadow: var(--pb-shadow-yellow);
}
.pb-btn-yellow:hover {
  background: var(--pb-yellow-600);
  border-color: var(--pb-yellow-600);
  color: var(--pb-ink);
  text-decoration: none;
}

.pb-btn-ghost {
  background: transparent;
  color: var(--pb-ink);
  border-color: var(--pb-line);
}
.pb-btn-ghost:hover {
  background: var(--pb-surface-2);
  border-color: var(--pb-text-soft);
  color: var(--pb-ink);
  text-decoration: none;
}

/* Inputs */
.pb-input {
  font-family: var(--pb-font-body);
  font-size: 15px;
  color: var(--pb-ink);
  padding: 12px 14px;
  border-radius: var(--pb-r-md);
  border: 1.5px solid var(--pb-line);
  background: #fff;
  outline: none;
  width: 100%;
  transition: 160ms;
}
.pb-input:focus { border-color: var(--pb-green); box-shadow: 0 0 0 3px rgba(80,184,72,.15); }
.pb-input::placeholder { color: var(--pb-text-soft); }
textarea.pb-input { resize: vertical; }

.pb-select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

.pb-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pb-chip {
  padding: 6px 12px;
  border-radius: var(--pb-r-pill);
  background: var(--pb-surface-2);
  font-size: 12px;
  font-weight: 500;
  color: var(--pb-text);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: 160ms;
}
.pb-chip:hover { background: var(--pb-green-50); }
.pb-chip.on { background: var(--pb-green-100); color: var(--pb-green-700); border-color: var(--pb-green); }

/* Animations */
@keyframes pb-pulse {
  0%   { transform: scale(.6); opacity: .5; }
  100% { transform: scale(2);  opacity: 0; }
}
@keyframes pb-pop {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}