/* Skin kit for the Napoli Pop storefront. Every rule reads an OPTIONAL token and falls back to the original Napoli Pop value, so loading
   this file changes nothing until a skin (public/themes/skins/<id>.css) sets a token. Load order: napoli-pop-theme.css, _base.css, _kit.css, <skin>.css.

   Palette (set on :root by the skin):  --np-red --np-red2 --np-cream --np-paper --np-surface --np-ink --np-ink2 --np-mute --np-sun --np-tint --np-basil --np-basil-s --np-bad --np-bad-bg --np-line
   Shape:     --np-r1 --np-r2 --np-r3 (radii)  --np-sh --np-sh-lg (shadows)  --np-bw --np-bd (outline width / colour)
   Type:      --np-fd (headings) --np-fi (italic highlight) --np-fb (body, default = --np-fd)
   Kit:       --np-field (inputs, white wells) --np-onred (text on red)  --np-hd-bg --np-hd-fg --np-hd-bd | --np-ib-bg --np-ib-fg --np-ib-bd | --np-hero-bg --np-hero-fg --np-hero-hl --np-hero-arc (none|block)
              --np-btn-r --np-btn-fg --np-btn-case | --np-bn-bg --np-bn-fg --np-ft-bg --np-ft-fg --np-ft-hl | --np-strip-bg --np-strip-fg --np-cbar-bg --np-cbar-fg
              --np-hs (hard-shadow scale, 0 = none) --np-hsc | --np-plate-bd --np-plate-sh --np-plate-rot --np-plate-fit (cover|contain) | --np-title-case --np-title-w --np-title-ls | --np-card-bg */

body.np { font-family: var(--np-fb, var(--np-fd)); }
.np-hd { background: var(--np-hd-bg, var(--np-ink)); color: var(--np-hd-fg, var(--np-cream)); border-bottom-color: var(--np-hd-bd, var(--np-bd, var(--np-ink))); }
.np-brand__text, .np-nav a { color: var(--np-hd-fg, var(--np-cream)); }
.np-nav a.on, .np-nav a:hover { background: var(--np-hd-fg, var(--np-cream)); color: var(--np-hd-bg, var(--np-ink)); }
.np-lang a { color: var(--np-hd-fg, #f3e6d0); }
.np-lang a.on { background: var(--np-hd-fg, var(--np-cream)); color: var(--np-hd-bg, var(--np-ink)); }
.np-ib { background: var(--np-ib-bg, var(--np-cream)); color: var(--np-ib-fg, var(--np-ink)); border-color: var(--np-ib-bd, var(--np-ib-bg, var(--np-cream))); }
.np-ib b, .np-bn__c b { border-color: var(--np-hd-bg, var(--np-ink)); }
.np-hero { background: var(--np-hero-bg, var(--np-red)); color: var(--np-hero-fg, #fff); }
.np-hero::after { display: var(--np-hero-arc, block); }
.np-hero .np-title { color: var(--np-hero-fg, #fff); }
.np-hero .np-title i { color: var(--np-hero-hl, var(--np-sun)); }
.np-hero .np-lead, .np-hero .np-skiplink { color: var(--np-hero-fg, #fff); }
.np-title { text-transform: var(--np-title-case, none); font-weight: var(--np-title-w, 800); letter-spacing: var(--np-title-ls, -.045em); }
.np-btn { border-radius: var(--np-btn-r, 99px); text-transform: var(--np-btn-case, none); }
.np-btn--sun { color: var(--np-btn-fg, var(--np-ink)); }
/* _base.css gives every .np-btn the on-red text colour; the outlined and ink variants keep their own */
.np-btn--alt { color: var(--np-ink); }
.np-btn--ink { color: var(--np-cream); }
.np-card, .np-prow, .np-fc, .np-perks > div, .npp-info-card, .npp-choice-card, .npp-quantity-card, .npp-reviews { background: var(--np-card-bg, var(--np-paper)); }
.np-bn { background: var(--np-bn-bg, var(--np-paper)); border-top-color: var(--np-bd, var(--np-ink)); }
.np-bn a { color: var(--np-bn-fg, var(--np-mute)); }
.np-bn a.on { color: var(--np-red); }
.np-paystrip { background: var(--np-strip-bg, var(--np-sun)); color: var(--np-strip-fg, var(--np-ink)); }
.np-cbar a { background: var(--np-cbar-bg, var(--np-ink)); color: var(--np-cbar-fg, var(--np-cream)); }
.np-ft { background: var(--np-ft-bg, var(--np-ink)); color: var(--np-ft-fg, var(--np-cream)); }
.np-ft a { color: var(--np-ft-fg, var(--np-cream)); }
.np-ft h2 { color: var(--np-ft-hl, var(--np-sun)); }
.np-plate__disc { border-color: var(--np-plate-bd, var(--np-ink)); box-shadow: var(--np-plate-sh, 8px 12px 0 rgba(0, 0, 0, .3)); transform: rotate(var(--np-plate-rot, 12deg)); }
.np-plate__disc img { object-fit: var(--np-plate-fit, cover); }

.np-plate__disc { background: var(--np-plate-bg, var(--np-sun)); }

/* Blog: the shared blog partial draws white cards and grey chips; on a skin they follow the palette (dark skins stay readable). */
body.np-skin .bt-blog__search, body.np-skin .bt-feature, body.np-skin .bt-blog__card, body.np-skin .bt-post__copy, body.np-skin .bt-post__card, body.np-skin .bt-post__related-card { background: var(--np-card-bg, var(--np-paper)); border-color: var(--np-bd, var(--np-line)); color: var(--np-ink); }
body.np-skin .bt-chip, body.np-skin .bt-post__tags a, body.np-skin .bt-blog__filters a { background: var(--np-tint); border-color: var(--np-bd, var(--np-line)); color: var(--np-ink); }
body.np-skin .bt-blog__filters a.active, body.np-skin .bt-chip--accent { background: var(--np-red); border-color: var(--np-red); color: var(--np-onred, #fff); }
body.np-skin .bt-blog__cover, body.np-skin .bt-feature__cover { background: var(--np-tint); }
body.np-skin .bt-blog__search input { color: var(--np-ink); }
body.np-skin .bt-blog__search button, body.np-skin .bt-blog__button, body.np-skin .bt-post__cta a, body.np-skin .bt-blog__avatar { color: var(--np-onred, #fff); }
body.np-skin .bt-post__related { border-top-color: var(--np-bd, var(--np-line)); }