/* ==========================================================================
   INDIAN NEO-BRUTALISM / DESI BRUTAL UI DESIGN SYSTEM
   StoreFront — High Impact, Vibrant, Tactile Indian Commerce Aesthetic
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700;800&display=swap');

:root {
  --brutal-black: #000000;
  --brutal-white: #FFFFFF;
  --brutal-cream: #FFFDF0;
  --brutal-sand: #FFF9E6;
  --brutal-dark: #0F0F14;
  --brutal-saffron: #FF6B00;
  --brutal-marigold: #FFAA00;
  --brutal-rani-pink: #FF2A85;
  --brutal-haldi-yellow: #FFE600;
  --brutal-peacock-blue: #2B59FF;
  --brutal-sky-blue: #00D2FF;
  --brutal-paan-green: #00D26A;
  --brutal-purple: #9D4EDD;
  --brutal-border-width: 3px;
  --brutal-shadow: 4px 4px 0px #000000;
  --brutal-shadow-lg: 7px 7px 0px #000000;
  --brutal-shadow-xl: 10px 10px 0px #000000;
}

/* Global Reset & Base */
html {
  scroll-behavior: smooth;
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
  background-color: #0d0d12;
  color: #1a1a1a;
}

body {
  overflow-x: hidden;
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
  background-color: #0d0d12;
  background-image: 
    radial-gradient(circle at 1px 1px, rgba(255, 230, 0, 0.07) 1.5px, transparent 0),
    radial-gradient(circle at 20px 20px, rgba(255, 107, 0, 0.05) 1.5px, transparent 0);
  background-size: 40px 40px, 40px 40px;
  color: #f1f5f9;
  position: relative;
  min-height: 100vh;
}

/* Ensure content is crisply layered above background particles */
main, header, footer, .brutal-card, nav, .relative {
  position: relative;
  z-index: 1;
}

/* Indian Brutalist Card & Container */
.brutal-card {
  background-color: #ffffff;
  color: #000000;
  border: 3px solid #000000;
  border-radius: 16px;
  box-shadow: 6px 6px 0px #000000;
  transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.brutal-card-dark {
  background-color: #161622;
  color: #ffffff;
  border: 3px solid #000000;
  border-radius: 16px;
  box-shadow: 6px 6px 0px #FFDE59;
  transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.brutal-card-interactive:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0px #000000;
}

.brutal-card-interactive:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px #000000;
}

/* Indian Brutalist Buttons */
.brutal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.95rem;
  padding: 0.85rem 1.6rem;
  border: 3px solid #000000;
  border-radius: 12px;
  box-shadow: 4px 4px 0px #000000;
  transition: all 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
}

.brutal-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px #000000;
}

.brutal-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0px #000000;
}

.brutal-btn-saffron {
  background-color: #FF6B00;
  color: #FFFFFF;
}
.brutal-btn-saffron:hover {
  background-color: #FF7D1A;
  color: #FFFFFF;
}

.brutal-btn-yellow {
  background-color: #FFE600;
  color: #000000;
}
.brutal-btn-yellow:hover {
  background-color: #FFF04D;
  color: #000000;
}

.brutal-btn-pink {
  background-color: #FF2A85;
  color: #FFFFFF;
}
.brutal-btn-pink:hover {
  background-color: #FF4797;
  color: #FFFFFF;
}

.brutal-btn-blue {
  background-color: #2B59FF;
  color: #FFFFFF;
}
.brutal-btn-blue:hover {
  background-color: #4D73FF;
  color: #FFFFFF;
}

.brutal-btn-green {
  background-color: #00D26A;
  color: #000000;
}
.brutal-btn-green:hover {
  background-color: #1FE07F;
  color: #000000;
}

.brutal-btn-white {
  background-color: #FFFFFF;
  color: #000000;
}
.brutal-btn-white:hover {
  background-color: #FFFDF0;
  color: #000000;
}

/* Indian Brutalist Badges & Stickers */
.brutal-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border: 2px solid #000000;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 2px 2px 0px #000000;
}

.brutal-sticker {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  font-weight: 900;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 2.5px solid #000000;
  border-radius: 6px;
  box-shadow: 3px 3px 0px #000000;
}

/* Running Marquee Banner */
.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  border-top: 3px solid #000000;
  border-bottom: 3px solid #000000;
  background-color: #FFE600;
  color: #000000;
  padding: 0.75rem 0;
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.marquee-content {
  display: inline-flex;
  gap: 2rem;
  animation: marquee 22s linear infinite;
}

.marquee-content:hover {
  animation-play-state: paused;
}

@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

/* Indian Pattern Backgrounds & Halftones */
.bg-grid-desi {
  background-size: 28px 28px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
}

.bg-dots-desi {
  background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
}

.bg-halftone-yellow {
  background-color: #FFFDF0;
  background-image: radial-gradient(#FFDE59 2px, transparent 2px);
  background-size: 16px 16px;
}

/* High Contrast Inputs */
.brutal-input {
  width: 100%;
  background-color: #FFFFFF;
  color: #000000;
  border: 3px solid #000000;
  border-radius: 12px;
  padding: 0.85rem 1.1rem;
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 3px 3px 0px #000000;
  outline: none;
  transition: all 0.15s ease;
}

.brutal-input:focus {
  background-color: #FFFDF0;
  border-color: #000000;
  box-shadow: 5px 5px 0px #FF6B00;
  transform: translate(-1px, -1px);
}

.brutal-input-dark {
  width: 100%;
  background-color: #1a1a24;
  color: #ffffff;
  border: 3px solid #000000;
  border-radius: 12px;
  padding: 0.85rem 1.1rem;
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 3px 3px 0px #FFE600;
  outline: none;
  transition: all 0.15s ease;
}

.brutal-input-dark:focus {
  border-color: #FFE600;
  box-shadow: 5px 5px 0px #FF2A85;
}

/* Custom Scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: #FF6B00 #121212;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: #121212;
  border-left: 2px solid #000000;
}

*::-webkit-scrollbar-thumb {
  background: #FF6B00;
  border: 2px solid #000000;
  border-radius: 4px;
}