/* StyMetics Master Design System Tokens & Utility Styles */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Jost:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Montserrat:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Hind+Siliguri:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

:root {
  /* Brand Accents */
  --color-burgundy: #630D16;
  --color-burgundy-dk: #4A0A10;
  --color-burgundy-lt: #8B1520;
  --color-burgundy-glow: rgba(99, 13, 22, 0.25);
  
  /* Sand Neutrals */
  --color-sand: #D7C4B1;
  --color-sand-lt: #EDE4DA;
  --color-sand-light: #EDE4DA;
  --color-sand-xlt: #F7F3EF;
  --color-sand-extra-light: #F7F3EF;
  --color-sand-dark: #A08060;
  
  /* Typography Colors */
  --color-charcoal: #2D2D2D;
  --color-charcoal-dark: #2D2D2D;
  --color-charcoal-lt: #4A4A4A;
  --color-charcoal-light: #7A7A7A;
  --color-charcoal-medium: #4A4A4A;
  --color-charcoal-xlt: #7A7A7A;
  --color-white: #FFFFFF;
  --color-burgundy-dark: #4A0A10;
  
  /* Admin Dark Theme */
  --color-admin-bg: #0F0F0F;
  --color-admin-surface: #161616;
  --color-admin-elevated: #1E1E1E;
  --color-admin-overlay: #252525;
  --color-admin-sidebar: #111111;
  --color-admin-border: rgba(255, 255, 255, 0.08);
  --color-admin-text: #F0F0F0;
  --color-admin-text-muted: #A0A0A0;
  
  /* Functional Status */
  --color-success: #22C55E;
  --color-success-bg: rgba(34, 197, 94, 0.10);
  --color-warning: #F59E0B;
  --color-warning-bg: rgba(245, 158, 11, 0.10);
  --color-error: #EF4444;
  --color-error-bg: rgba(239, 68, 68, 0.10);
  --color-info: #3B82F6;
  --color-info-bg: rgba(59, 130, 246, 0.10);
}

:root {
  --header-h: 64px;
}

/* Base resets & typography */
html {
  max-width: 100%;
  overflow-x: clip;
  box-sizing: border-box;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  font-family: 'Jost', 'Hind Siliguri', sans-serif;
  color: var(--color-charcoal);
  background-color: var(--color-sand-lt);
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: clip;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .font-serif {
  font-family: 'Playfair Display', serif;
}

.font-nav {
  font-family: 'Montserrat', sans-serif;
}

.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

/* Smooth luxury transitions */
a, button, input, select {
  transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Custom scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--color-sand-dark);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-burgundy);
}

/* Pulse animation for Lookbook Hotspots */
@keyframes hotspot-pulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.hotspot-pin {
  animation: hotspot-pulse 2s infinite;
}

/* Toast animations */
@keyframes slideInUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.toast-enter {
  animation: slideInUp 350ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Magnifying glass zoom lens on PDP */
.zoom-container {
  position: relative;
  overflow: hidden;
  cursor: crosshair;
}

.zoom-image {
  transition: transform 0.2s ease-out;
}

/* Luxury Atelier Button Helpers */
.btn-burgundy {
  background-color: var(--color-burgundy, #630D16);
  color: #FFFFFF !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-burgundy:hover {
  background-color: var(--color-burgundy-dk, #4A0A10);
  color: #FFFFFF !important;
}

.btn-outline-burgundy {
  border: 1px solid var(--color-burgundy, #630D16);
  color: var(--color-burgundy, #630D16) !important;
  background-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-outline-burgundy:hover {
  background-color: var(--color-burgundy, #630D16);
  color: #FFFFFF !important;
}

/* Ensure mobile bottom navigation does not overlap page content */
@media (max-width: 1023px) {
  body {
    padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
  }
}

/* Infinite Product Carousel & Hardware-Accelerated Smooth Scrollers */
.infinite-carousel-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  contain: layout paint;
  mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
}

@media (min-width: 768px) {
  .infinite-carousel-wrapper {
    mask-image: linear-gradient(to right, transparent, black 32px, black calc(100% - 32px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 32px, black calc(100% - 32px), transparent);
  }
}

.infinite-carousel-track {
  display: flex !important;
  width: max-content !important;
  will-change: transform;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.infinite-carousel-track:active {
  cursor: grabbing;
}

.infinite-carousel-track.is-pointer-down {
  cursor: grabbing;
}

/* Card sizing per breakpoint - mobile first (165px for comfortable 2-card / 1.5 peek on 360px phones) */
.infinite-carousel-card {
  width: 165px;
  max-width: calc(100vw - 48px);
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

@media (min-width: 480px) {
  .infinite-carousel-card {
    width: 200px;
  }
}

@media (min-width: 640px) {
  .infinite-carousel-card {
    width: 235px;
  }
}

@media (min-width: 1024px) {
  .infinite-carousel-card {
    width: 275px;
  }
}

/* Scrollbar utilities */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
  contain: paint;
}

/* Mobile Bottom Safe Area */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Accessibility: respect user prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .infinite-carousel-track,
  .marquee-segment,
  #hero-announcement-track {
    animation: none !important;
  }
}