/* Pagayo Winkel · homepage
   Tokens uit design-system/tokens.json. De delen die standaard aan staan. */

:root,
[data-theme="light"] {
  --surface: #ffffff;
  --surface-warm: #f4f4f2;
  --surface-tint: #ecf0f3;
  --surface-sunk: #e9eaec;
  --media-dark: #3a3e44;
  --line: #e3e5e8;
  --line-strong: #868d97;
  --ink: #17191c;
  --ink-muted: #5b616b;
  --inverse: #17191c;
  --on-inverse: #ffffff;
  --on-inverse-muted: #9aa0a8;
  --brand: #2d4f6b;
  --on-brand: #ffffff;
  --action: #17191c;
  --on-action: #ffffff;
  --sale: #b42318;
  --success: #067647;
  --font-sans: "Manrope", system-ui, "Segoe UI", "Noto Sans", sans-serif;
  --font-serif: "Fraunces", "Noto Serif", Georgia, serif;
  --font-grotesk: "Space Grotesk", system-ui, "Noto Sans", sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-section: 96px;
  --space-section-compact: 56px;
  --radius-sharp: 2px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --control-md: 48px;
  --control-sm: 44px;
  --header-h: 72px;
  --container: 1200px;
  --category-disc: 128px;
  --shadow-float: 0 12px 32px rgba(23, 25, 28, 0.14);
}

[data-theme="dark"] {
  --surface: #121417;
  --surface-warm: #1b1d21;
  --surface-tint: #18222c;
  --surface-sunk: #24272b;
  --media-dark: #2a2d31;
  --line: #2b2f35;
  --line-strong: #6b727c;
  --ink: #f2f3f5;
  --ink-muted: #a9afb8;
  --inverse: #0b0c0e;
  --on-inverse: #f2f3f5;
  --on-inverse-muted: #9aa0a8;
  --brand: #9cbcd8;
  --on-brand: #0f1a24;
  --action: #f2f3f5;
  --on-action: #121417;
  --sale: #f97066;
  --success: #47cd89;
  --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* Hero-carrousel (homepage demo) */
.pw-hero[data-hero-slider] {
  position: relative;
  min-height: 520px;
}

@media (max-width: 760px) {
  .pw-hero[data-hero-slider] {
    min-height: 420px;
  }
}

.pw-hero-slides {
  position: absolute;
  inset: 0;
}

.pw-hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.pw-hero-slide[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}

.pw-hero-slide .pw-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
}

.pw-hero-slide .pw-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.pw-hero-slide .pw-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(23, 25, 28, 0.72) 0%,
    rgba(23, 25, 28, 0.4) 50%,
    rgba(23, 25, 28, 0.22) 100%
  );
  pointer-events: none;
}

.pw-hero[data-hero-slider] .pw-hero-arrow,
.pw-hero[data-hero-slider] .pw-hero-nav {
  z-index: 2;
}

.pw-hero[data-hero-slider] .pw-dots button {
  width: 24px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: color-mix(in srgb, var(--on-inverse) 35%, transparent);
  cursor: pointer;
}

.pw-hero[data-hero-slider] .pw-dots button[aria-current="true"] {
  background: var(--on-inverse);
}

@media (prefers-reduced-motion: reduce) {
  .pw-hero-slide {
    transition: none;
  }
}