/**
 * Global reset + production theme tokens (shared theme tokens).
 * Section CSS files consume these variables; md = 48rem, lg = 64rem.
 */

/* Site fonts — theme font assets (woff2) */
@font-face {
  font-family: "Geograph";
  src: url("../assets/fonts/geograph-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geograph";
  src: url("../assets/fonts/geograph-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Akkurat Mono";
  src: url("../assets/fonts/akkurat-mono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Same file aliased at 500 — hero eyebrow uses font-medium */
@font-face {
  font-family: "Akkurat Mono";
  src: url("../assets/fonts/akkurat-mono.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Self Modern";
  src: url("../assets/fonts/self-modern_regular_web.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans: "Geograph", system-ui, sans-serif;
  --font-serif: "Self Modern", ui-serif, serif;
  --font-mono: "Akkurat Mono", ui-monospace, monospace;
  --color-black: #212121;
  --color-white: #fff;
  --color-natural-white: #e0dacf;
  --color-natural-white-60: #ece9e2;
  --color-natural-white-25: #f5f4f1;
  --color-light-charcoal: #575757;
  --color-red: #9c0f0f;
  --color-stroke: #cdcdcd;
  --color-gray-300: #d1d5db;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-green-600: #16a34a;
  --color-blue-500: #3b82f6;
  --color-amber-100: #fef3c7;
  --color-amber-800: #92400e;
  --spacing: 0.25rem;
  --text-xs: 0.75rem;
  --text-xs--line-height: calc(1 / 0.75);
  --text-sm: 0.875rem;
  --text-sm--line-height: calc(1.25 / 0.875);
  --text-base: 1rem;
  --text-base--line-height: 1.5;
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: 1.2;
  --text-4xl: 2.25rem;
  --text-4xl--line-height: calc(2.5 / 2.25);
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --radius: 20px;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --blur-xs: 4px;
  --ease-sine-in: cubic-bezier(0.12, 0, 0.39, 0);
  --ease-sine-out: cubic-bezier(0.61, 1, 0.88, 1);
  --ease-sine-in-out: cubic-bezier(0.37, 0, 0.63, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --hero-header-offset-mobile: 6.25rem;
  --hero-header-offset-desktop: 4rem;
  --hero-header-offset-mobile-lg: 8.25rem;
  --hero-header-offset-desktop-lg: 5.25rem;
  --z-content: 10;
  --z-swiper-button: 10;
  --z-background-overlay: 30;
  --z-floating-card: 40;
  --z-filter-dropdown: 50;
  --z-floating-widget: 60;
  --z-navigation-content: 70;
  --z-header: 80;
  --z-global-banner: 85;
  --z-takeover: 90;
  --global-banner-height: 32px;
  --global-banner-offset: 32px;
  color: var(--color-white);
  list-style-position: initial;
  list-style-type: none;
}

/* Hide page content until auth-gate confirms a session.
   Use opacity (not visibility): descendants with visibility:visible
   (e.g. .global-banner__slide--active) punch through visibility:hidden
   and flash the banner message during the redirect to auth. */
html.auth-checking body {
  opacity: 0 !important;
  pointer-events: none !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  border: 0 solid;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  tab-size: 4;
  line-height: 1.5;
  font-family: var(--font-sans);
  /* Always reserve the scrollbar so opening cart/menus cannot change viewport width.
     Overlays paint on top; they do not remove the scrollbar. */
  overflow-y: scroll;
}

body {
  min-height: 100vh;
  background-color: var(--color-natural-white-60);
  color: rgb(0, 0, 0);
}

img {
  vertical-align: middle;
  display: block;
  max-width: 100%;
  height: auto;
}

/*
 * High-DPI photo rendering: isolate compositor layers so fractional layout
 * widths (carousel slides) stay crisp. Avoid setting `transform` here — section
 * CSS (e.g. promo hover zoom) owns that.
 */
img.product-card__image,
img.hero__image,
img.collection-header__image,
img.promo-tiles__image,
img.category-row__image,
img.category-row__hover-image,
.product-gallery__slide img,
img.cart-drawer__upsells-image,
img.cart-drawer__line-image {
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Absolute-fill photos must ignore the global height:auto reset */
img.product-card__image,
img.hero__image,
img.collection-header__image,
img.category-row__image,
img.category-row__hover-image {
  max-width: none;
  height: 100%;
}

svg {
  vertical-align: middle;
  display: block;
}

/* Themed zoom pointer — round badge with plus (product gallery, etc.) */
.cursor-zoom-plus {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='23.5' fill='%23ece9e2' stroke='%2303143b' stroke-width='0.5'/%3E%3Cpath d='M24 16V32' stroke='%2303143b' stroke-width='1' stroke-linecap='round'/%3E%3Cpath d='M16 24H32' stroke='%2303143b' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") 24 24, zoom-in;
}

/* —— Loading: spinners for actions, pulse/shimmer for background work —— */
.venus-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  border: 2px solid rgba(33, 33, 33, 0.2);
  border-top-color: #212121;
  border-radius: 50%;
  animation: venus-spin 0.65s linear infinite;
}

.venus-spinner--on-dark {
  border-color: rgba(255, 255, 255, 0.28);
  border-top-color: #fff;
}

.venus-spinner--sm {
  width: 0.85rem;
  height: 0.85rem;
  border-width: 1.75px;
}

@keyframes venus-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes venus-text-pulse {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

button.is-loading,
.btn.is-loading,
[role='button'].is-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  cursor: wait;
  pointer-events: none;
}

button.is-loading:disabled,
.btn.is-loading.is-disabled,
.btn.is-loading[aria-disabled='true'] {
  opacity: 1;
}

@keyframes venus-locate-pulse {
  0%,
  100% {
    background: rgba(0, 0, 0, 0.04);
  }
  50% {
    background: rgba(0, 0, 0, 0.1);
  }
}

@keyframes venus-locate-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1.5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .venus-spinner {
    animation: venus-text-pulse 1s var(--ease-in-out) infinite;
  }
}