/* DIN Pro — 5 odmian użytych na LP */
@font-face{font-family:"DIN Pro";src:url("../fonts/DINPro-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DIN Pro";src:url("../fonts/DINPro-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"DIN Pro";src:url("../fonts/DINPro-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"DIN Pro Condensed";src:url("../fonts/DINPro-CondBold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"DIN Pro Condensed";src:url("../fonts/DINPro-CondBlack.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

/* Tokeny marki Ceramikker */

/* ---------- colors ---------- */
/* KOLORYSTYKA — paleta oficjalna (księga znaku v1.0, s. 7)
   Sześć kolorów, ani jednego więcej. Proporcje w layoucie: czerń 45 · biel 33 · czerwień 15 · zieleń 7. */
:root {
  /* --- Baza --- */
  --czern:            #000000;  /* RGB 0·0·0 · CMYK 0·0·0·100 — typografia, tła, apla wersji białej */
  --biel:             #FFFFFF;  /* RGB 255·255·255 · CMYK 0·0·0·0 — tła, przestrzeń, kontra dla czerni */
  --czerwien:         #E63448;  /* RGB 230·52·72 · CMYK 0·77·69·10 — korona, akcenty, CTA */
  --czerwien-gleboka: #C71530;  /* RGB 199·21·48 · CMYK 0·89·76·22 — gradient korony, stany hover */
  --zielen:           #008358;  /* RGB 0·131·88 · CMYK 100·0·33·49 — AKCENT: promocje i eco */
  --zielen-jasna:     #00A65E;  /* RGB 0·166·94 · CMYK 100·0·43·35 — AKCENT: okazje, potwierdzenia */

  /* --- Gradient sygnetu — wyłącznie korona i drobne paski akcentowe --- */
  --gradient-sygnet:     linear-gradient(90deg, #E63448 0%, #C71530 100%); /* @kind color */
  --gradient-sygnet-135: linear-gradient(135deg, #E63448 0%, #C71530 100%); /* @kind color */

  /* --- Pochodne czerni i bieli (powierzchnie UI) --- */
  --pow-ciemna:        #121212;
  --pow-ciemna-2:      #1A1A1A;
  --pow-ciemna-3:      #0C0C0C;   /* pole zdjęciowe / media */
  --pow-jasna:         #F4F4F4;
  --linia-ciemna:      rgba(255,255,255,.14);
  --linia-ciemna-mika: rgba(255,255,255,.09);
  --linia-jasna:       rgba(0,0,0,.12);
  --tekst-wyciszony:   rgba(255,255,255,.64);
  --tekst-wyciszony-j: rgba(0,0,0,.56);
  --poswiata-czerwona: radial-gradient(closest-side, rgba(230,52,72,.16), transparent 70%); /* @kind color */

  /* --- Aliasy semantyczne (dark-first: czerń buduje layout) --- */
  --surface-page:     var(--czern);
  --surface-card:     var(--pow-ciemna);
  --surface-raised:   var(--pow-ciemna-2);
  --surface-media:    var(--pow-ciemna-3);
  --surface-inverse:  var(--biel);
  --surface-inverse-card: var(--pow-jasna);

  --text-primary:     var(--biel);
  --text-muted:       var(--tekst-wyciszony);
  --text-inverse:     var(--czern);
  --text-inverse-muted: var(--tekst-wyciszony-j);
  --text-accent:      var(--czerwien);

  --border-default:   var(--linia-ciemna);
  --border-subtle:    var(--linia-ciemna-mika);
  --border-inverse:   var(--linia-jasna);

  --action-primary:       var(--czerwien);
  --action-primary-hover: var(--czerwien-gleboka);
  --action-promo:         var(--zielen);
  --state-success:        var(--zielen-jasna);
  --state-error:          var(--czerwien-gleboka);
  --state-focus:          var(--czerwien);
}

/* ---------- typography ---------- */
/* TYPOGRAFIA (księga znaku, s. 9–10)
   Jeden krój wystarczy — kontrast buduj grubością i skalą.
   Nagłówki ZAWSZE wersalikami w odmianie Black. Condensed do danych, liczb i oznaczeń. */
:root {
  --font-din:  'DIN Pro', 'Barlow', Arial, sans-serif;
  --font-cond: 'DIN Pro Condensed', 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;

  /* Aliasy semantyczne */
  --font-display: var(--font-din);
  --font-body:    var(--font-din);
  --font-data:    var(--font-cond);

  /* Wagi = odmiany DIN Pro */
  --w-black: 900; /* @kind font */  /* DIN Pro Black — nagłówki i tytuły */
  --w-bold:  700; /* @kind font */  /* DIN Pro Bold — śródtytuły, wyróżnienia */
  --w-med:   500; /* @kind font */
  --w-reg:   400; /* @kind font */  /* DIN Pro Regular — tekst podstawowy */

  /* Skala (mapowanie z księgi: 26 cond / 58 black / 31 reg / 26 reg / 24 cond) */
  --fs-display:  56px;
  --fs-h1:       40px;
  --fs-h2:       28px;
  --fs-h3:       20px;
  --fs-lead:     19px;
  --fs-body:     16px;
  --fs-small:    13.5px;
  --fs-overline: 13px;
  --fs-data:     14px;

  /* Interlinia */
  --lh-display: 1.04; /* @kind other */
  --lh-head:    1.15; /* @kind other */
  --lh-lead:    1.55; /* @kind other */
  --lh-body:    1.6; /* @kind other */

  /* Tracking */
  --ls-display:  .005em; /* @kind other */
  --ls-overline: .2em; /* @kind other */
  --ls-data:     .06em; /* @kind other */
  --ls-label:    .16em; /* @kind other */
  --ls-btn:      .09em; /* @kind other */
  --ls-tagline:  .38em; /* @kind other */
}

/* ---------- spacing ---------- */
/* RYTM I GEOMETRIA — technicznie, ostro. Zero zaokrągleń. */
:root {
  --radius: 0px;          /* Ceramikker nie zaokrągla niczego poza sygnetem-awatarem */
  --radius-pill: 999px;   /* wyjątek: awatar / kółko znacznika ✓ ✕ */

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  --gap-inline: var(--s-3);
  --gap-stack:  var(--s-4);
  --gap-grid:   var(--s-4);
  --pad-card:   var(--s-5);
  --pad-section: 64px;
  --wrap-max: 860px;      /* kolumna dokumentacyjna */
  --page-max: 1240px;     /* kolumna sklepu */
}

/* ---------- surfaces ---------- */
/* POWIERZCHNIE, OBRYSY, RUCH
   Marka nie używa cieni ani blura — głębię budują linie hairline i płaszczyzny czerni. */
:root {
  --border-hairline: 1px solid var(--linia-ciemna); /* @kind other */
  --border-tile:     1px solid var(--linia-ciemna-mika); /* @kind other */
  --border-input:    1.5px solid rgba(255,255,255,.28); /* @kind other */
  --border-input-light: 1.5px solid rgba(0,0,0,.28); /* @kind other */
  --border-btn:      2px solid transparent; /* @kind other */

  --shadow-none: none;    /* cienie są zabronione na znaku i niestosowane w UI */

  --motion-fast:  .15s ease; /* @kind other */
  --motion-base:  .22s ease; /* @kind other */
  --easing:       cubic-bezier(.2,.6,.2,1); /* @kind other */

  --redbar-w: 34px;
  --redbar-h: 4px;
}

/* ---------- base ---------- */
/* BAZA — dark-first: czerń buduje layout, kolor jest dodatkiem. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--czern);
  color: var(--biel);
  font-family: var(--font-din);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--czerwien); text-decoration: none; }
a:hover { color: var(--czerwien-gleboka); }
.on-light a { color: var(--czerwien); }
.on-light a:hover { color: var(--czerwien-gleboka); }
::selection { background: var(--czerwien); color: var(--biel); }

/* ---------- produkty ---------- */
/* KOLORY PRODUKTOWE — warstwa opakowań, nie warstwa layoutu.
   Każdy produkt Ceramikker ma na etykiecie własny pas w kolorze sygnaturowym.
   Wartości odczytane z packshotów (assets/produkty/).

   ZASADA: te kolory NIE zastępują palety marki. W layoucie nadal rządzą
   czerń, biel i czerwień; kolor produktowy używaj wyłącznie jako:
   · cienki pas / linia przy nazwie produktu na ulotce lub karcie,
   · kropka-marker kategorii na liście,
   · tło rendera / kropka przy mockupie (assets/produkty/mockup/).
   Nigdy jako tło całej sekcji, nigdy jako kolor CTA, nigdy w typografii tekstu. */
:root {
  --p-ac-reset:          #7BB8DE;  /* jasny błękit — świeże powietrze */
  --p-zero-ice:          #22C0DE;  /* turkus — zimowa formuła */
  --p-ceramic-wax:       #E63448;  /* czerwień marki + srebro */
  --p-liquid-glass:      #F2C31F;  /* złoto */
  --p-clear-glass:       #E3DE2F;  /* żółć */
  --p-neon-ace:          #D2DC1E;  /* limonka */
  --p-vampire-ace:       #C71530;  /* czerwień głęboka — „bloody" */
  --p-interior-one:      #A25AA8;  /* fiolet */
  --p-interior-booster:  #6C4CA8;  /* purpura */
  --p-surface-one:       #FFFFFF;  /* biel / srebro */
  --p-plastire:          #FFFFFF;  /* biel / srebro */
  --p-smart-wipe:        #2E9E63;  /* zieleń produktowa (≠ zieleń eco marki) */
  --p-pure-prestige:     #E63448;  /* czerwień marki na czerni */
  --p-grizzly-towel:     #4A4A4A;  /* grafit */
  --p-gift-box:          #E63448;  /* czerwień marki na czerni */
  --p-wetless:           #C71530;  /* czerwień głęboka na czarnej tkaninie */
}

/* ---------- utilities ---------- */
/* WARSTWA KLAS — 1:1 z księgą znaku. Dla HTML pisanego ręcznie;
   komponenty React używają tych samych zmiennych inline. */

.wrap { max-width: var(--wrap-max); margin: 0 auto; padding: 44px 36px 52px; }
.on-light { background: var(--biel); color: var(--czern); }

/* --- Typografia --- */
.display, .h1, .h2, .h3 { font-family: var(--font-din); margin: 0; }
.display { font-size: clamp(40px, 6vw, var(--fs-display)); font-weight: var(--w-black); text-transform: uppercase; line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.h1 { font-size: var(--fs-h1); font-weight: var(--w-black); text-transform: uppercase; line-height: 1.08; }
.h2 { font-size: var(--fs-h2); font-weight: var(--w-black); text-transform: uppercase; line-height: var(--lh-head); }
.h3 { font-size: var(--fs-h3); font-weight: var(--w-bold); line-height: 1.3; }
.lead { font-size: var(--fs-lead); font-weight: var(--w-reg); line-height: var(--lh-lead); margin: 0; }
.body { font-size: var(--fs-body); margin: 0; }
.small { font-size: var(--fs-small); }
.overline { font-family: var(--font-cond); font-size: var(--fs-overline); font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: var(--ls-overline); line-height: 1.2; }
.data { font-family: var(--font-cond); font-size: var(--fs-data); font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: var(--ls-data); }
.num { font-family: var(--font-cond); font-weight: var(--w-bold); letter-spacing: .02em; }
.tagline { font-family: var(--font-cond); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: var(--ls-tagline); }

.red { color: var(--czerwien); }
.green { color: var(--zielen); }
.green-l { color: var(--zielen-jasna); }
.muted { color: var(--tekst-wyciszony); }
.on-light .muted, .muted-l { color: var(--tekst-wyciszony-j); }

/* --- Linie i powierzchnie --- */
.hairline { border: 0; border-top: 1px solid var(--linia-ciemna); margin: 0; }
.on-light .hairline, .hairline-l { border-top-color: var(--linia-jasna); }
.red-bar { width: var(--redbar-w); height: var(--redbar-h); background: var(--gradient-sygnet); }
.tile { background: var(--pow-ciemna); border: var(--border-tile); padding: var(--pad-card); }
.on-light .tile, .tile-l { background: var(--pow-jasna); border: 1px solid rgba(0,0,0,.07); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-grid); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); }

/* --- Przyciski --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-din); font-size: 14px; font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: var(--ls-btn); text-decoration: none; padding: 15px 28px; border: var(--border-btn); border-radius: var(--radius); cursor: pointer; transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast); line-height: 1; }
.btn-primary { background: var(--czerwien); color: var(--biel); }
.btn-primary:hover { background: var(--czerwien-gleboka); color: var(--biel); }
.btn-promo { background: transparent; border-color: var(--zielen); color: var(--zielen-jasna); font-family: var(--font-cond); letter-spacing: .12em; }
.btn-promo:hover { background: rgba(0,131,88,.14); color: var(--zielen-jasna); }
.on-light .btn-promo { color: var(--zielen); }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,.44); color: var(--biel); }
.btn-ghost:hover { border-color: var(--biel); color: var(--biel); }
.on-light .btn-ghost { border-color: rgba(0,0,0,.5); color: var(--czern); }
.on-light .btn-ghost:hover { border-color: var(--czern); color: var(--czern); }
.btn-sm { padding: 10px 18px; font-size: 12.5px; }
.btn-lg { padding: 18px 36px; font-size: 15px; }
.btn[disabled], .btn.is-disabled { background: rgba(255,255,255,.16); color: rgba(255,255,255,.4); cursor: not-allowed; border-color: transparent; }
.on-light .btn[disabled], .on-light .btn.is-disabled { background: rgba(0,0,0,.1); color: rgba(0,0,0,.32); }

/* --- Badge / etykiety --- */
.chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-cond); font-size: 12px; font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: .14em; padding: 6px 12px; line-height: 1.2; border: 1.5px solid transparent; }
.chip-red { background: var(--czerwien); color: var(--biel); }
.chip-green { background: var(--zielen); color: var(--biel); }
.chip-green-l { background: var(--zielen-jasna); color: var(--biel); }
.chip-outline-green { border-color: var(--zielen); color: var(--zielen-jasna); }
.on-light .chip-outline-green { color: var(--zielen); }
.chip-outline { border-color: rgba(255,255,255,.4); color: var(--biel); }
.on-light .chip-outline { border-color: rgba(0,0,0,.4); color: var(--czern); }

/* --- Formularze --- */
.field { display: grid; gap: 8px; }
.field label { font-family: var(--font-cond); font-size: 12px; font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--tekst-wyciszony); }
.on-light .field label { color: var(--tekst-wyciszony-j); }
.input, select.input, textarea.input { width: 100%; background: transparent; color: inherit; font-family: var(--font-din); font-size: 15px; padding: 13px 14px; border: var(--border-input); border-radius: var(--radius); outline: none; transition: border-color var(--motion-fast); }
.on-light .input { border-color: rgba(0,0,0,.28); }
.input::placeholder { color: rgba(255,255,255,.34); }
.on-light .input::placeholder { color: rgba(0,0,0,.34); }
.input:focus { border-color: var(--czerwien); }
.input.is-valid { border-color: var(--zielen-jasna); }
.input.is-error { border-color: var(--czerwien-gleboka); }
.help { font-size: 12.5px; color: var(--tekst-wyciszony); }
.help.ok { color: var(--zielen-jasna); }
.help.err { color: var(--czerwien); }

/* --- Tabele danych --- */
table.spec { width: 100%; border-collapse: collapse; }
table.spec th, table.spec td { text-align: left; padding: 11px 4px; border-bottom: 1px solid var(--linia-ciemna); }
.on-light table.spec th, .on-light table.spec td { border-bottom-color: var(--linia-jasna); }
table.spec th { font-family: var(--font-cond); font-size: 12px; font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: .14em; color: var(--tekst-wyciszony); }
table.spec td.val { font-family: var(--font-cond); font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: .04em; }

/* --- Drobne --- */
.x-mark { width: 22px; height: 22px; border-radius: var(--radius-pill); background: var(--czerwien); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; line-height: 1; }
.ok-mark { width: 22px; height: 22px; border-radius: var(--radius-pill); background: var(--zielen-jasna); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; line-height: 1; }
.stars { color: var(--czerwien); letter-spacing: 2px; font-size: 15px; }