/*
Theme Name:  Wybierzo
Theme URI:   https://wybierzoczyszczacz.pl
Description: Motyw własny wybierzoczyszczacz.pl — friendly variant
Version:     1.3.0
Author:      Webratings
Text Domain: wybierzo
*/

/* ─── Design tokens ──────────────────────────────────────────────── */
:root {
  /* Kolory */
  --c-bg:            #ffffff;
  --c-paper:         #faf7f0;
  --c-paper-deep:    #f4efe3;

  --c-mint:          #71cf98;
  --c-mint-ink:      #1f6b47;
  --c-mint-bg:       #ddf1e5;
  --c-mint-bg-soft:  #eef8f2;

  --c-sky:           #6cc9fe;
  --c-sky-ink:       #1a4d80;
  --c-sky-bg:        #e2f0fb;

  --c-coral:         #ff7f6b;
  --c-coral-ink:     #7a2318;
  --c-coral-bg:      #fde8e5;

  --c-ink:           #1a2422;
  --c-ink2:          #42504d;
  --c-ink3:          #5b6a65; /* WCAG AA: ~4.7:1 na białym (było #788883 ≈3.4:1) */
  --c-ink4:          #6e7b76; /* WCAG AA: ~4.3:1 (było #a8b5b1 ≈2:1) */

  --c-border:        #e4ded1;
  --c-border-strong: #d0c9b6;

  /* Typografia */
  --ff:   'Plus Jakarta Sans', system-ui, sans-serif;
  --ff-hand: 'Caveat', cursive;

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

  /* Radius */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px;
  --r-2xl: 24px; --r-pill: 999px;

  /* Shadows (offset brutal style) */
  --sh-sm:   2px 2px 0 var(--c-border-strong);
  --sh-md:   3px 3px 0 var(--c-border-strong);
  --sh-mint: 3px 3px 0 var(--c-mint-ink);
  --sh-mint-lg: 6px 6px 0 var(--c-mint-ink);

  /* Layout */
  --max-w: 1240px;
  --pad-x: 48px;
}

/* ─── Reset & base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--ff);
  color: var(--c-ink);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* ─── Container ──────────────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* ─── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  border-radius: var(--r-pill);
  font-family: var(--ff);
  font-weight: 800;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
  white-space: nowrap;
  border: 2px solid;
  line-height: 1;
}
.btn-sm  { padding: 8px 14px;  font-size: 13px; }
.btn-md  { padding: 12px 18px; font-size: 14px; }
.btn-lg  { padding: 16px 28px; font-size: 16px; }

.btn-primary {
  background: var(--c-mint);
  color: var(--c-mint-ink);
  border-color: var(--c-mint-ink);
  box-shadow: var(--sh-mint);
}
.btn-primary:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--c-mint-ink); }

.btn-secondary {
  background: var(--c-bg);
  color: var(--c-ink);
  border-color: var(--c-border-strong);
  box-shadow: var(--sh-md);
}
.btn-secondary:hover { background: var(--c-paper-deep); }

.btn-ghost {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-border-strong);
}
.btn-ghost:hover { background: var(--c-paper-deep); }

/* ─── Pills / tags ───────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700;
  border: 2px solid;
  white-space: nowrap;
}
.pill-mint { background: var(--c-mint-bg); color: var(--c-mint-ink); border-color: var(--c-mint-ink); }
.pill-neutral { background: var(--c-paper); color: var(--c-ink2); border-color: var(--c-border-strong); }
.pill-active { background: var(--c-mint); color: var(--c-mint-ink); border-color: var(--c-mint-ink); box-shadow: 2px 2px 0 var(--c-mint-ink); }

/* ─── Score badge ────────────────────────────────────────────────── */
.score-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--c-bg);
  border: 2px solid var(--c-mint-ink);
  font-size: 22px; font-weight: 800;
  color: var(--c-mint-ink);
  flex-shrink: 0;
}

/* ─── Offset card ────────────────────────────────────────────────── */
.card {
  background: var(--c-bg);
  border: 2px solid var(--c-border-strong);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-md);
}
.card-mint {
  border-color: var(--c-mint-ink);
  box-shadow: var(--sh-mint-lg);
}

/* ─── Section spacing ────────────────────────────────────────────── */
.section { padding-block: var(--sp-24); }
.section-sm { padding-block: var(--sp-12); }