/* NiishCloud Static Theme - Christiana Boutique */
/* PRIMARY and ONLY custom stylesheet */

:root {
  /* African-inspired color palette */
  --color-gold: #d4a853;
  --color-gold-light: #e8c97a;
  --color-gold-dark: #b8923f;
  --color-terracotta: #c65d3b;
  --color-terracotta-light: #d4785a;
  --color-brown: #5c3d2e;
  --color-brown-light: #8b6b5a;
  --color-green: #2d5a4a;
  --color-green-light: #3d7a64;
  --color-black: #1a1a1a;
  --color-black-soft: #2d2d2d;
  --color-white: #ffffff;
  --color-off-white: #fdf8f3;
  --color-cream: #f5e6d3;
  --color-warm-gray: #6b5b4f;
  --color-light-gray: #e8e0d8;
}

/* Base Styles */
body {
  background-color: var(--color-off-white);
  color: var(--color-black);
  font-family: "Raleway", sans-serif;
  font-size: 16px;
  line-height: 1.625;
}

@media (min-width: 640px) {
  body {
    font-size: 17px;
  }
}

@media (min-width: 1024px) {
  body {
    font-size: 18px;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Playfair Display", serif;
  line-height: 1.25;
}

/* Custom Utilities & Animations */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.8s ease-out forwards;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-fade-in {
  animation: fade-in 0.6s ease-out forwards;
}

.gold-gradient {
  background: linear-gradient(135deg, #d4a853 0%, #e8c97a 50%, #d4a853 100%);
}

/* Fashion Patterns */
.fashion-mannequin-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='140' height='200' viewBox='0 0 140 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23E8C97A' stroke-width='1.2' opacity='0.25'%3E%3Cellipse cx='70' cy='22' rx='10' ry='12'/%3E%3Cpath d='M60 32 Q55 40 52 55 Q48 75 55 95 Q45 120 50 160 Q52 175 70 180 Q88 175 90 160 Q95 120 85 95 Q92 75 88 55 Q85 40 80 32'/%3E%3Cpath d='M52 55 Q40 58 35 70' stroke-dasharray='3,4'/%3E%3Cpath d='M88 55 Q100 58 105 70' stroke-dasharray='3,4'/%3E%3Cpath d='M55 95 Q70 90 85 95' stroke-dasharray='2,3'/%3E%3Cpath d='M50 130 Q70 125 90 130'/%3E%3Cpath d='M50 160 Q70 155 90 160'/%3E%3C/g%3E%3C/svg%3E");
}

.fashion-scissors-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23D4A853' stroke-width='1' opacity='0.22'%3E%3Ccircle cx='50' cy='50' r='8'/%3E%3Cpath d='M50 42 Q55 35 50 30 Q45 35 50 42'/%3E%3Cpath d='M58 50 Q65 45 70 50 Q65 55 58 50'/%3E%3Cpath d='M50 58 Q55 65 50 70 Q45 65 50 58'/%3E%3Cpath d='M42 50 Q35 45 30 50 Q35 55 42 50'/%3E%3Cpath d='M56 44 Q62 38 58 32'/%3E%3Cpath d='M56 56 Q62 62 58 68'/%3E%3Cpath d='M44 56 Q38 62 42 68'/%3E%3Cpath d='M44 44 Q38 38 42 32'/%3E%3Ccircle cx='50' cy='50' r='3' fill='%23D4A853' opacity='0.3'/%3E%3Cpath d='M50 20 L50 15 M50 85 L50 80' stroke-dasharray='2,2'/%3E%3Cpath d='M20 50 L15 50 M85 50 L80 50' stroke-dasharray='2,2'/%3E%3C/g%3E%3C/svg%3E");
}

.fashion-thread-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='120' viewBox='0 0 80 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' opacity='0.28'%3E%3Cpath d='M10 0 Q20 30 15 60 Q10 90 20 120' stroke='%23E8C97A' stroke-width='0.8'/%3E%3Ccircle cx='12' cy='15' r='5' stroke='%23E8C97A' stroke-width='1'/%3E%3Ccircle cx='12' cy='15' r='2.5' fill='%23E8C97A' opacity='0.4'/%3E%3Ccircle cx='16' cy='40' r='5' stroke='%23E8C97A' stroke-width='1'/%3E%3Ccircle cx='16' cy='40' r='2.5' fill='%23E8C97A' opacity='0.4'/%3E%3Ccircle cx='13' cy='65' r='5' stroke='%23E8C97A' stroke-width='1'/%3E%3Ccircle cx='13' cy='65' r='2.5' fill='%23E8C97A' opacity='0.4'/%3E%3Ccircle cx='15' cy='90' r='5' stroke='%23E8C97A' stroke-width='1'/%3E%3Ccircle cx='15' cy='90' r='2.5' fill='%23E8C97A' opacity='0.4'/%3E%3Cpath d='M60 0 Q70 30 65 60 Q60 90 70 120' stroke='%23D4A853' stroke-width='0.8'/%3E%3Ccircle cx='62' cy='20' r='4' stroke='%23D4A853' stroke-width='0.8'/%3E%3Ccircle cx='67' cy='50' r='4' stroke='%23D4A853' stroke-width='0.8'/%3E%3Ccircle cx='63' cy='80' r='4' stroke='%23D4A853' stroke-width='0.8'/%3E%3C/g%3E%3C/svg%3E");
}

.fashion-swatch-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='80' viewBox='0 0 120 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23D4A853' stroke-width='1.2' opacity='0.2'%3E%3Cpath d='M60 40 Q40 25 25 35 Q35 40 60 40'/%3E%3Cpath d='M60 40 Q80 25 95 35 Q85 40 60 40'/%3E%3Cpath d='M60 40 Q55 50 50 65' stroke-width='1.5'/%3E%3Cpath d='M60 40 Q65 50 70 65' stroke-width='1.5'/%3E%3Cellipse cx='60' cy='40' rx='6' ry='5' fill='%23D4A853' opacity='0.25'/%3E%3Cpath d='M25 35 Q20 40 25 45 Q35 42 60 40' stroke-dasharray='2,2'/%3E%3Cpath d='M95 35 Q100 40 95 45 Q85 42 60 40' stroke-dasharray='2,2'/%3E%3C/g%3E%3C/svg%3E");
}

.fashion-sketch-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='160' height='220' viewBox='0 0 160 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23E8C97A' stroke-width='1' opacity='0.2'%3E%3Cpath d='M80 15 Q82 25 80 35'/%3E%3Cellipse cx='80' cy='12' rx='6' ry='8'/%3E%3Cpath d='M74 38 Q68 45 65 60 Q60 80 65 100 Q55 130 60 170 Q62 190 80 200 Q98 190 100 170 Q105 130 95 100 Q100 80 95 60 Q92 45 86 38'/%3E%3Cpath d='M65 60 Q50 65 40 80' stroke-dasharray='4,4'/%3E%3Cpath d='M95 60 Q110 65 120 80' stroke-dasharray='4,4'/%3E%3Cpath d='M65 100 Q80 95 95 100'/%3E%3Cpath d='M60 140 Q80 135 100 140' stroke-dasharray='3,3'/%3E%3Cpath d='M60 170 Q80 165 100 170'/%3E%3Cpath d='M70 200 Q75 210 80 215 Q85 210 90 200' stroke-dasharray='2,3'/%3E%3C/g%3E%3C/svg%3E");
}

.fashion-buttons-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' opacity='0.25'%3E%3Ccircle cx='40' cy='40' r='15' stroke='%23D4A853' stroke-width='0.8'/%3E%3Ccircle cx='40' cy='40' r='12' stroke='%23E8C97A' stroke-width='0.8' stroke-dasharray='3,3'/%3E%3Ccircle cx='40' cy='40' r='8' stroke='%23D4A853' stroke-width='0.8'/%3E%3Cpath d='M40 25 Q45 30 40 35 Q35 30 40 25' stroke='%23E8C97A' stroke-width='1'/%3E%3Cpath d='M55 40 Q50 45 45 40 Q50 35 55 40' stroke='%23E8C97A' stroke-width='1'/%3E%3Cpath d='M40 55 Q35 50 40 45 Q45 50 40 55' stroke='%23E8C97A' stroke-width='1'/%3E%3Cpath d='M25 40 Q30 35 35 40 Q30 45 25 40' stroke='%23E8C97A' stroke-width='1'/%3E%3Ccircle cx='40' cy='40' r='4' fill='%23D4A853' opacity='0.35'/%3E%3Ccircle cx='10' cy='10' r='6' stroke='%23E8C97A' stroke-width='0.6' stroke-dasharray='2,2'/%3E%3Ccircle cx='70' cy='70' r='6' stroke='%23E8C97A' stroke-width='0.6' stroke-dasharray='2,2'/%3E%3Ccircle cx='10' cy='70' r='4' stroke='%23D4A853' stroke-width='0.6'/%3E%3Ccircle cx='70' cy='10' r='4' stroke='%23D4A853' stroke-width='0.6'/%3E%3C/g%3E%3C/svg%3E");
}

.fashion-tape-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23D4A853' opacity='0.18'%3E%3Cpath d='M20 50 Q30 30 50 30 Q70 30 70 50 Q70 70 50 70 Q40 70 35 60' stroke-width='1.5'/%3E%3Cpath d='M80 50 Q70 70 50 70' stroke-width='0.8' stroke-dasharray='3,3'/%3E%3Ccircle cx='20' cy='50' r='3' fill='%23D4A853'/%3E%3Ccircle cx='35' cy='60' r='2' fill='%23E8C97A'/%3E%3C/g%3E%3C/svg%3E");
}

.african-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30L30 0z' fill='none' stroke='%23D4A853' stroke-width='1' opacity='0.25'/%3E%3C/svg%3E");
}

.kente-stripe {
  background: linear-gradient(
    90deg,
    #d4a853 0%,
    #d4a853 20%,
    #c65d3b 20%,
    #c65d3b 40%,
    #2d5a4a 40%,
    #2d5a4a 60%,
    #d4a853 60%,
    #d4a853 80%,
    #5c3d2e 80%,
    #5c3d2e 100%
  );
}

.adinkra-accent::before {
  content: "◆";
  color: #d4a853;
  margin-right: 0.5rem;
}
.adinkra-accent::after {
  content: "◆";
  color: #d4a853;
  margin-left: 0.5rem;
}

/* Hero Slider Transitions */
#hero-image,
.serif-heritage {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 400;
}

#hero-title,
#hero-desc {
  transition: opacity 0.5s ease-in-out;
}

#hero-image-container {
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

#hero-indicators .indicator {
  transition: all 0.3s ease;
}

#hero-indicators .indicator.active {
  width: 24px;
  background-color: #d4a853;
  border-radius: 4px;
}

/* Concentric Circle Animation */
@keyframes circle-pulse {
  0% {
    transform: scale(1);
    opacity: 0.1;
  }
  50% {
    transform: scale(1.03);
    opacity: 0.15;
  }
  100% {
    transform: scale(1);
    opacity: 0.1;
  }
}

.animate-circle-pulse {
  animation: circle-pulse 8s infinite ease-in-out;
}

/* Custom styles for specific React components transitioned to static */
[data-is-scrolled="true"] {
  background-color: rgba(253, 248, 243, 0.95);
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}