/**
 * PaperHit — design tokens (źródło: Breakdance global-settings.css)
 * https://sklep-paperhit.agencjaluna.pl/wp-content/uploads/breakdance/css/global-settings.css
 * Ostatnia synchronizacja: 2026-06-05 — patrz DESIGN-SYSTEM.md
 */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;700&family=Montserrat:wght@400;500;600&family=Poppins:wght@400;600;700;900&display=swap');

:root {
  /* ── Kolory marki ── */
  --ph-brand: #005194;
  --ph-brand-hover: #005194;
  --ph-brand-dark: #07355e;
  --ph-accent: #fecc00;
  --ph-accent-hover: #e6b800;
  --ph-accent-soft: rgba(254, 204, 0, 0.79);

  /* ── Powierzchnie ── */
  --ph-bg: #f5fbff;
  --ph-surface: #ffffff;
  --ph-surface-muted: #d3e1f3;
  --ph-surface-pill: #edf4ff;

  /* Tło strony: biały pas (hero) → jasnoniebieski od okolic Allegro/FAQ w dół */
  --ph-page-gradient-white-end: 26%;
  --ph-page-gradient-blue-start: 48%;
  --ph-page-gradient: linear-gradient(
    180deg,
    var(--ph-surface) 0%,
    var(--ph-surface) var(--ph-page-gradient-white-end),
    var(--ph-bg) var(--ph-page-gradient-blue-start),
    var(--ph-bg) 100%
  );

  /* ── Tekst ── */
  --ph-text: #616161;
  --ph-heading: #505050;
  --ph-text-inverse: #ffffff;

  /* ── Obramowania i cienie ── */
  --ph-border: #d1d5db;
  /* Breakdance: --bde-palette-shadows-7fee99e6-ef4b-46b4-bd94-4d55f4bb3681-19 */
  --ph-shadow-color: #00000024;
  --ph-shadow: 0 2px 6px var(--ph-shadow-color);
  --ph-shadow-soft: var(--ph-shadow);
  --ph-shadow-hero: none;
  --ph-shadow-hero-width: 14px;
  --ph-shadow-hero-color: rgba(0, 0, 0, 0.1);
  --ph-shadow-up: 0 -2px 6px var(--ph-shadow-color);
  --ph-shadow-bleed: 8px;

  /* ── Typografia ── */
  --ph-font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ph-font-heading: 'Poppins', var(--ph-font-body);
  --ph-font-accent: 'Exo 2', var(--ph-font-body);
  --ph-text-base: 16px;
  --ph-leading-body: 1.68;
  --ph-leading-heading: 1.3;

  /* Skala nagłówków (ratio 1.25) */
  --ph-h1: clamp(1.925rem, 1.56rem + 1.65vw, 3rem);
  --ph-h1-secondary: clamp(1.7rem, 1.44rem + 1.2vw, 2.5rem);
  --ph-h2: clamp(1.7rem, 1.44rem + 1.2vw, 2.5rem);
  --ph-h2-step: 24px;
  --ph-h2-section: 20px;
  --ph-h3: 17px;
  --ph-label-sm: 13px;
  --ph-cat-nav-font-size: 14px;
  --ph-label-md: 15px;
  --ph-label-lg: 19px;

  /* ── Przyciski (Breakdance primary) ── */
  --ph-btn-font: var(--ph-font-heading);
  --ph-btn-size: 17px;
  --ph-btn-weight: 600;
  --ph-btn-radius: 2px;
  --ph-btn-border: 2px;
  --ph-btn-padding: 16px 24px;
  --ph-btn-padding-sm: 8px 16px;
  --ph-btn-padding-lg: 28px 54px;
  --ph-btn-primary-bg: var(--ph-brand);
  --ph-btn-primary-text: var(--ph-text-inverse);
  --ph-btn-primary-text-hover: var(--ph-brand);
  --ph-btn-secondary-bg: transparent;
  --ph-btn-secondary-text: var(--ph-brand);
  --ph-btn-secondary-border: var(--ph-brand);
  --ph-btn-secondary-bg-hover: var(--ph-accent);
  --ph-btn-secondary-text-hover: var(--ph-brand);
  --ph-btn-transition: 450ms ease-in-out;
  /* Breakdance .button-underline-accent */
  --ph-btn-accent-line: 4px solid var(--ph-accent);
  --ph-btn-accent-line-brand: 4px solid var(--ph-brand);

  /* ── Layout ── */
  --ph-container: 1200px;
  --ph-section-px: clamp(16px, 4vw, 40px);
  --ph-site-inset: max(
    var(--ph-section-px),
    calc((100vw - min(100vw, var(--ph-container))) / 2 + var(--ph-section-px))
  );
  --ph-radius-pill: 999px;
  --ph-radius-card: 4px;
  --ph-radius-product: 4px;
  --ph-topbar-nav-py: 10px;
  --ph-topbar-nav-px-right: 20px;
  --ph-topbar-nav-px-left: 0px;
  --ph-topbar-nav-font-size: 12px;
  --ph-topbar-nav-line-height: 1.2;
  --ph-topbar-nav-links-gap: 30px;
  /* Breakdance: linki 12px + padding 10/10; min-h tuż nad contentem */
  --ph-topbar-nav-min-h: calc(
    var(--ph-topbar-nav-py) * 2 +
    var(--ph-topbar-nav-font-size) * var(--ph-topbar-nav-line-height) + 2px
  );
  --ph-topbar-flank-left-h: 34px;
  --ph-topbar-nav-gap: 0px;
  --ph-header-pill-h: 56px;
  /* Pill przeniesiony nad listę produktów (statycznie) — hero ma zwykły odstęp sekcji, bez rezerwy pod pill */
  --ph-hero-copy-pt: calc(var(--ph-strip-gap) - 30px);
  --ph-hero-copy-pb: var(--ph-strip-gap);
  --ph-hero-perk-title: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  --ph-hero-perk-gap: clamp(32px, 4vw, 48px);
  --ph-hero-cta-mt: 34px;
  --ph-strip-gap: 36px;
  --ph-strip-sec-per-tile: 3.3;
  --ph-strip-duration-min: 36;
  /* Hero — niski, pod spodem widać pasek wzorów */
  --ph-hero-min-h: 0;
  --ph-search-drawer-inset: clamp(18px, 3.5vw, 32px);
  --ph-search-drawer-tuck: 12px;
  --ph-search-drawer-inner-pt: 28px;
  --ph-search-drawer-shadow: var(--ph-shadow);

  /* ── Aliasy legacy (stary landing) ── */
  --blue: var(--ph-brand);
  --blue-d: var(--ph-brand-dark);
  --blue-lt: #eef3fb;
  --yellow: var(--ph-accent);
  --yellow-d: var(--ph-accent-hover);
  --dark: var(--ph-heading);
  --gray: var(--ph-text);
  --gray-lt: #f3f4f6;
  --border: var(--ph-border);
  --white: var(--ph-surface);
  --bg: var(--ph-bg);
  --r: var(--ph-radius-card);
  --r-lg: var(--ph-radius-product);
}

/* ── Kontener sekcji (full-width elementy go nie używają) ── */
.ph-section {
  width: min(100%, var(--ph-container));
  max-width: var(--ph-container);
  margin-inline: auto;
  padding-inline: var(--ph-section-px);
  box-sizing: border-box;
}

/* ── Klasy przycisków (Breakdance: button-atom + button-underline-accent) ── */
.ph-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ph-btn-font);
  font-size: var(--ph-btn-size);
  font-weight: var(--ph-btn-weight);
  line-height: 1;
  padding: var(--ph-btn-padding);
  border-radius: var(--ph-btn-radius);
  border: var(--ph-btn-border) solid var(--ph-brand);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--ph-btn-transition), background var(--ph-btn-transition), border-color var(--ph-btn-transition);
  max-width: 100%;
}

/* Breakdance: button-atom--primary — wypełnienie żółte od dołu + button-underline-accent */
.ph-btn--primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--ph-btn-primary-text);
  background: var(--ph-btn-primary-bg);
  border: none;
  border-bottom: var(--ph-btn-accent-line);
  transition: color var(--ph-btn-transition);
}

.ph-btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ph-accent);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform var(--ph-btn-transition);
  z-index: -1;
  pointer-events: none;
}

.ph-btn--primary:hover,
.ph-btn--primary:focus-visible {
  color: var(--ph-btn-primary-text-hover);
  background: var(--ph-btn-primary-bg);
}

.ph-btn--primary:hover::before,
.ph-btn--primary:focus-visible::before {
  transform: scaleY(1);
}

.ph-btn--secondary {
  background: var(--ph-surface);
  color: var(--ph-btn-secondary-text);
  border-color: var(--ph-btn-secondary-border);
}

.ph-btn--secondary:hover {
  background: var(--ph-btn-secondary-bg-hover);
  color: var(--ph-btn-secondary-text-hover);
  border-color: var(--ph-accent);
}