/* fixwoodsystem — Design Tokens (Industrial Premium — wg mockupów fixwoodsystem*.html)
   Źródło prawdy: design-artifacts/mock_*.png + fixwoodsystem.html */

:root{
  /* ---- Paleta mockupu (natywne nazwy) ---- */
  --graphite:#17191C;   --steel:#23272C;    --steel-line:#33383E;
  --zinc:#9AA1A8;       --bone:#F0EDE7;      --paper:#FBFAF7;
  --signal:#E2541C;     --signal-deep:#C24411;
  --timber:#A9794C;     --ink:#14161A;
  --ok:#3F8F5B;         --err:#B91C1C;

  /* ---- Most do starych nazw (--c-*) — istniejący CSS przejmuje paletę ---- */
  --c-text:var(--graphite);   /* ciemne powierzchnie + nagłówki */
  --c-body:#4A4D52;           /* tekst na jasnym */
  --c-muted:#7A7E83;
  --c-border:#E2DDD3;         /* ciepła ramka kart */
  --c-bg:var(--paper);
  --c-surface:var(--paper);
  --c-cta:var(--signal);
  --c-cta-hover:var(--signal-deep);
  --c-ok:var(--ok);
  --c-err:var(--err);

  /* ---- Typografia ---- */
  --display:'Archivo', system-ui, sans-serif;   /* nagłówki — heavy */
  --body:'IBM Plex Sans', system-ui, sans-serif; /* treść */
  --mono:'IBM Plex Mono', ui-monospace, monospace; /* kody/wymiary/ceny */
  --font-ui:var(--body);   /* alias zgodności */
  --font-mono:var(--mono);

  /* ---- Siatka / spacing ---- */
  /* PREMIUM: treść w kontenerze (cap), tła sekcji pełne. Header+footer ten sam cap. */
  --unit:8px; --maxw:1480px; --pad:clamp(20px,4vw,56px);
  --radius:4px; --r:4px;   /* ostre krawędzie = premium */
}

/* lekki wzrost capa na 2K+ (żeby nie był wyspą), ale wciąż contained = premium */
@media (min-width:2300px){ :root{ --maxw:1640px; --pad:72px; } }

/* Baza */
body{
  font-family:var(--body);
  color:var(--c-body);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,.site-title{
  font-family:var(--display);
  color:var(--ink);
  font-weight:800;
  letter-spacing:-0.015em;
  line-height:1.05;
}

/* Wymiary / SKU / Art-Nr */
.fws-mono{
  font-family:var(--mono);
  font-size:0.92em;
  color:var(--c-muted);
  letter-spacing:0;
}

/* CTA / przyciski Woo — signal orange (jeden akcent) */
.wp-block-button__link,
.button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .single_add_to_cart_button{
  background:var(--signal) !important;
  border-color:var(--signal) !important;
  color:#fff !important;
  border-radius:var(--r);
  font-family:var(--display);
  font-weight:700;
  transition:background-color .18s ease, transform .1s ease;
}
.woocommerce .single_add_to_cart_button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover{
  background:var(--signal-deep) !important;
  border-color:var(--signal-deep) !important;
}

/* Cena */
.woocommerce span.price,
.woocommerce div.product p.price{ color:var(--ink); font-weight:700; }

/* Status na stanie */
.stock.in-stock{ color:var(--ok); font-weight:500; }
.stock.out-of-stock{ color:var(--err); font-weight:500; }

/* Focus ring (a11y) */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--signal); outline-offset:2px;
}