/* ==========================================================================
   SKATE STICKER NEO-BRUTALISM DESIGN SYSTEM STYLES
   Designed for BIG'D CBD / NOOTORIOUS CBD E-Commerce
   ========================================================================== */

:root {
  --font-display: 'Anton', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --color-border-ink: #111111;
  --color-surface-canvas: #FFFDF7;
  --color-surface-cream: #F9F5EA;
  --color-surface-mint: #E9FFFB;
  --color-primary: #0D631B;
  --color-primary-container: #2E7D32;
  --color-secondary-container: #FFD027;
  --color-accent-orange: #FF5722;
  --color-accent-electric: #00E599;
  --color-danger-red: #E53935;
  --color-pure-white: #FFFFFF;
}

/* Material Symbols fill utility */
.material-symbols-fill {
  font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 24;
}

/* Neo-Brutalist Hard Drop Shadows */
.comic-shadow-xs { box-shadow: 2px 2px 0px var(--color-border-ink); }
.comic-shadow-sm { box-shadow: 3px 3px 0px var(--color-border-ink); }
.comic-shadow-md { box-shadow: 5px 5px 0px var(--color-border-ink); }
.comic-shadow-lg { box-shadow: 8px 8px 0px var(--color-border-ink); }
.comic-shadow-reverse { box-shadow: -6px 6px 0px var(--color-border-ink); }
.comic-shadow-yellow { box-shadow: 6px 6px 0px var(--color-secondary-container); }

/* Tactile physical press state */
.btn-brutal {
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.15s ease;
  cursor: pointer;
}
.btn-brutal:hover {
  transform: translateY(-2px);
}
.btn-brutal:active {
  transform: translate(3px, 3px) !important;
  box-shadow: 0px 0px 0px var(--color-border-ink) !important;
}

/* Halftone & Comics Dot Patterns */
.dot-pattern {
  background-image: radial-gradient(var(--color-border-ink) 1.5px, transparent 1.5px);
  background-size: 16px 16px;
}
.dot-pattern-white {
  background-image: radial-gradient(rgba(255, 255, 255, 0.45) 2px, transparent 2px);
  background-size: 20px 20px;
}

/* Infinite Marquee text tickers */
@keyframes marquee-horizontal {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.animate-ticker, .animate-marquee {
  display: flex;
  width: 200%;
  animation: marquee-horizontal 22s linear infinite;
}
.animate-ticker:hover, .animate-marquee:hover {
  animation-play-state: paused;
}

/* Idle float bounce animation for mascots */
@keyframes sticker-float {
  0%, 100% { transform: translateY(0px) rotate(-1deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}
.animate-sticker-float {
  animation: sticker-float 4.2s ease-in-out infinite;
}

/* Cart Drawer (Pochon) Styles */
#pochonDrawer {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#pochonDrawer.open {
  transform: translateX(0);
}

#pochonOverlay {
  transition: opacity 0.3s ease;
}

/* Checkout Modal */
#checkoutModal {
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--color-surface-cream);
  border-left: 2px solid var(--color-border-ink);
}
::-webkit-scrollbar-thumb {
  background: var(--color-secondary-container);
  border: 2px solid var(--color-border-ink);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent-orange);
}

/* Utility classes for sticker rotation */
.rotate-sticker-1 { transform: rotate(-1.5deg); }
.rotate-sticker-2 { transform: rotate(2deg); }
.rotate-sticker-3 { transform: rotate(-3deg); }
.rotate-sticker-4 { transform: rotate(4deg); }