@layer hpds-reset, hpds-tokens, hpds-base, hpds-layout, hpds-components, hpds-commerce, hpds-motion, hpds-utilities, hpds-overrides;

@layer hpds-tokens {
  body.hpds-enabled {
    --hpds-color-brand: #0d0d0d;
    --hpds-color-accent: #c28565;
    --hpds-color-accent-soft: #e7c1b4;
    --hpds-color-text: #171717;
    --hpds-color-text-muted: #62666b;
    --hpds-color-surface: #ffffff;
    --hpds-color-surface-subtle: #f1f3f2;
    --hpds-color-surface-raised: #ffffff;
    --hpds-color-border: #deded9;
    --hpds-color-border-strong: #aaa9a2;
    --hpds-color-link: #713e30;
    --hpds-color-link-hover: #4e291f;
    --hpds-color-success: #246b4a;
    --hpds-color-warning: #946200;
    --hpds-color-error: #b42318;
    --hpds-color-info: #1769aa;
    --hpds-color-club: #b88a1f;
    --hpds-color-sale: #b42318;
    --hpds-color-focus: #1769aa;
    --hpds-color-rose: #d7a59b;
    --hpds-color-mist: #eef0ef;

    --hpds-font-sans: "Assistant", Arial, sans-serif;
    --hpds-font-display: "Assistant", Arial, sans-serif;
    --hpds-font-size-100: 0.75rem;
    --hpds-font-size-200: 0.875rem;
    --hpds-font-size-300: 1rem;
    --hpds-font-size-400: 1.125rem;
    --hpds-font-size-500: 1.375rem;
    --hpds-font-size-600: 1.75rem;
    --hpds-font-size-700: 2.25rem;
    --hpds-font-size-800: 3rem;
    --hpds-font-size-900: 4rem;
    --hpds-line-tight: 1.15;
    --hpds-line-heading: 1.25;
    --hpds-line-body: 1.65;
    --hpds-weight-regular: 400;
    --hpds-weight-medium: 500;
    --hpds-weight-semibold: 600;
    --hpds-weight-bold: 700;
    --hpds-weight-black: 800;

    --hpds-space-0: 0;
    --hpds-space-1: 0.25rem;
    --hpds-space-2: 0.5rem;
    --hpds-space-3: 0.75rem;
    --hpds-space-4: 1rem;
    --hpds-space-5: 1.5rem;
    --hpds-space-6: 2rem;
    --hpds-space-7: 3rem;
    --hpds-space-8: 4rem;
    --hpds-space-9: 5rem;
    --hpds-space-10: 6rem;

    --hpds-container-wide: 90rem;
    --hpds-container-default: 78rem;
    --hpds-container-narrow: 50rem;
    --hpds-gutter: clamp(1rem, 3vw, 2.5rem);
    --hpds-section-space: clamp(3rem, 8vw, 6rem);

    --hpds-radius-none: 0;
    --hpds-radius-sm: 0.25rem;
    --hpds-radius-md: 0.5rem;
    --hpds-radius-round: 999px;
    --hpds-border: 1px solid var(--hpds-color-border);
    --hpds-shadow-sm: 0 0.125rem 0.5rem rgb(17 17 17 / 0.08);
    --hpds-shadow-md: 0 0.75rem 2rem rgb(17 17 17 / 0.12);
    --hpds-shadow-focus: 0 0 0 0.1875rem color-mix(in srgb, var(--hpds-color-focus) 32%, transparent);

    --hpds-duration-fast: 140ms;
    --hpds-duration-normal: 260ms;
    --hpds-duration-slow: 650ms;
    --hpds-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --hpds-ease-emphasis: cubic-bezier(0.2, 0.8, 0.2, 1);

    --hpds-z-base: 1;
    --hpds-z-sticky: 20;
    --hpds-z-menu: 40;
    --hpds-z-overlay: 60;
    --hpds-z-modal: 80;
    --hpds-z-toast: 100;
  }
}