/* ============================================
   Drewnianysklep v3 — Design Tokens
   Paleta kremowo-oliwkowa + Nunito
   ============================================ */

:root {
  /* Tones */
  --ds-cream:       #ebe6d2;   /* główne tło (jasne) */
  --ds-cream-deep:  #e3dcc1;
  --ds-paper:       #faf7ee;   /* tło kart, paneli */
  --ds-sand:        #decca6;
  --ds-sand-deep:   #d0c0a7;
  --ds-stone:       #dbd3c6;   /* tło placeholderów produktów */
  --ds-olive:       #8a8a5a;   /* główny akcent */
  --ds-olive-deep:  #6f6f43;
  --ds-olive-light: #b8b68f;

  --ds-ink:         #2a2722;   /* tekst — ciepły czarny */
  --ds-ink-soft:    #5a5447;
  --ds-ink-muted:   #8a826f;
  --ds-line:        rgba(42, 39, 34, 0.12);
  --ds-line-soft:   rgba(42, 39, 34, 0.06);

  --ds-error:       #b94d3a;
  --ds-success:     #6f7f53;

  /* Type stacks */
  --ds-font-body:    'Nunito', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ds-font-display: 'Nunito', 'Fraunces', sans-serif;

  /* Radii */
  --ds-radius-sm: 6px;
  --ds-radius:    10px;
  --ds-radius-lg: 18px;
  --ds-radius-xl: 28px;

  /* Spacing */
  --ds-pad: 24px;
  --ds-gap: 24px;
  --ds-section-pad: clamp(40px, 6vw, 80px);
  --ds-max:      1180px;
  --ds-max-shop: 1280px;

  /* Shadows */
  --ds-shadow-card: 0 16px 36px -16px rgba(0, 0, 0, 0.25);
  --ds-shadow-hero: 0 30px 80px -30px rgba(42, 39, 34, 0.35);
  --ds-shadow-tag:  0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Density variants */
[data-density="compact"] { --ds-section-pad: clamp(40px, 6vw, 80px); --ds-gap: 16px; }
[data-density="comfy"]   { --ds-section-pad: clamp(80px, 11vw, 160px); --ds-gap: 32px; }

/* Radius variants */
[data-radius="sharp"] { --ds-radius-sm: 0; --ds-radius: 0; --ds-radius-lg: 0; --ds-radius-xl: 0; }
[data-radius="soft"]  { --ds-radius-sm: 8px; --ds-radius: 14px; --ds-radius-lg: 22px; --ds-radius-xl: 36px; }

/* ─── Reset / base ────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

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

img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

:focus-visible {
  outline: 2px solid var(--ds-olive);
  outline-offset: 2px;
  border-radius: var(--ds-radius-sm);
}

/* Topbar i header oba sticky — eliminuje wizualna luke przy scrollowaniu (gdy topbar = static, header z top: 32/46px tworzyl pusta przestrzen pod admin barem).
   Wysokosc topbara mierzona dynamicznie przez JS (nav.js: --ds-topbar-height), zeby header NIE zachodzil pod topbar przy line-wrap. */
.ds-topbar {
  position: sticky;
  top: 0;
  z-index: 101; /* nad headerem (ktory ma z-index: 100) */
}
.ds-header { top: var(--ds-topbar-height, 40px); }

/* WP admin bar adjustment — przesun caly stack pod admin bar */
body.admin-bar .ds-topbar { top: 32px; }
body.admin-bar .ds-header { top: calc(32px + var(--ds-topbar-height, 40px)); }
@media (max-width: 782px) {
  body.admin-bar .ds-topbar { top: 46px; }
  body.admin-bar .ds-header { top: calc(46px + var(--ds-topbar-height, 40px)); }
}