/* S.L.Y. storefront v2 design tokens — established dark fashion palette */
:root {
  --sly-bg: #0b0b0c;
  --sly-bg-elevated: #121214;
  --sly-bg-soft: #18181b;
  --sly-fg: #f2f2f2;
  --sly-fg-muted: #b3b3b3;
  --sly-fg-subtle: #7a7a7f;
  --sly-line: rgba(255, 255, 255, 0.12);
  --sly-line-strong: rgba(255, 255, 255, 0.22);
  --sly-focus: #ffffff;
  --sly-danger: #c45c5c;

  --sly-font: "Manrope", system-ui, sans-serif;
  --sly-fs-xs: 0.75rem;
  --sly-fs-sm: 0.875rem;
  --sly-fs-md: 1rem;
  --sly-fs-lg: 1.125rem;
  --sly-fs-xl: 1.375rem;
  --sly-fs-2xl: 1.75rem;
  --sly-fs-3xl: 2.25rem;
  --sly-lh: 1.45;
  --sly-tracking: 0.04em;

  --sly-space-1: 0.25rem;
  --sly-space-2: 0.5rem;
  --sly-space-3: 0.75rem;
  --sly-space-4: 1rem;
  --sly-space-5: 1.5rem;
  --sly-space-6: 2rem;
  --sly-space-7: 3rem;
  --sly-space-8: 4rem;

  --sly-max: 1440px;
  --sly-header-h: 72px;
  --sly-mobile-bar-h: calc(72px + env(safe-area-inset-bottom, 0px));
  --sly-radius: 0;
  --sly-radius-sm: 2px;
  --sly-drawer-w: min(100vw, 420px);
  /* Slightly wider at the 1024 transition so the panel stays usable. */
  --sly-panel-w: clamp(300px, 26vw, 380px);
  --sly-media-gap: 2px;
  --sly-card-gap: var(--sly-space-5);
  --sly-section-gap: var(--sly-space-7);
  --sly-touch: 44px;

  --sly-bp-sm: 480px;
  --sly-bp-md: 768px;
  --sly-bp-lg: 1024px;
  --sly-bp-xl: 1280px;

  --sly-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sly-dur: 220ms;
  --sly-z-header: 40;
  --sly-z-mobile-bar: 45;
  --sly-z-drawer: 60;
  --sly-z-search: 70;
}

@media (min-width: 1280px) {
  :root {
    --sly-panel-w: clamp(320px, 22vw, 380px);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sly-dur: 1ms;
  }
}