/**
 * OBN Beauty Standard Stylesheet & Accent Configurations
 * Pairs perfectly with Google Fonts (Playfair Display, Inter) 
 * Customized for the "Geometric Balance" design system.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Fira+Code:wght@400;500&display=swap');

/* System Core Styling Setup */
:root {
  --alabaster-color: #FAF6F0; /* Cream / Warm Ivory */
  --clay-color: #FAF5EE;      /* Soft blush cream / earth-tone */
  --gold-color: #DFBA73;      /* Warm boutique gold accent */
  --mint-color: #E6F3F1;      /* Tiffany green or soft mint */
  --rose-color: #FADADD;      /* Soft blush pink */
  --black-color: #111111;     /* Soft black text for luxury contrast */
  --white-color: #ffffff;
}

/* Base Body & Layout Defaults */
html, body {
  background-color: var(--alabaster-color);
  color: var(--black-color);
  font-family: 'Inter', system-ui, sans-serif;
  scroll-behavior: smooth;
}

/* Soft boutique rounded corners for boxes, cards, inputs, and buttons */
*, *::before, *::after {
  border-radius: 0.5rem; /* Allow soft organic curves everywhere */
}

/* Preserve full sharpness on outer document structure or sections to span screen properly */
html, body, main, section, footer, header {
  border-radius: 0px !important;
}

/* Preserve circular border-radius only for strictly circular UI indicators */
.rounded-full, 
.cart-count, 
.wishlist-count, 
header button i, 
span.w-10.h-10.rounded-full, 
div.w-10.h-10.rounded-full,
div.rounded-full,
button[class*="rounded-full"] {
  border-radius: 9999px !important;
}

/* Soft glow shadows instead of harsh outlines or flat structures */
.shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl, .shadow-xs, .shadow {
  box-shadow: 0 4px 20px -2px rgba(223, 186, 115, 0.08), 0 2px 8px -1px rgba(250, 218, 221, 0.15) !important;
}

/* Base Headings Setup */
h1, h2, h3, h4, .font-luxury-serif {
  font-family: 'Playfair Display', Georgia, serif !important;
}

body, p, span, div, a, button, input, select, textarea {
  font-family: 'Inter', system-ui, sans-serif;
}

/* Color Palette Variable Overrides for Tailwind Classes */
.bg-blush-50, section[class*="bg-blush-50"] {
  background-color: var(--alabaster-color) !important;
}

.bg-tiffany-50, .bg-stone-50, .bg-stone-50\/40, .bg-stone-50\/50, .bg-stone-50\/70, main[class*="bg-stone-50"] {
  background-color: var(--clay-color) !important;
}

.bg-white {
  background-color: var(--white-color) !important;
}

/* Announcement Banner - Soft blush pink backdrop with deep charcoal text */
body > div.bg-pink-100:first-child,
.bg-pink-100:first-of-type {
  background-color: var(--rose-color) !important;
  color: var(--black-color) !important;
  text-transform: none !important;
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
  font-weight: 500 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Headers & Borders */
header {
  background-color: rgba(250, 246, 240, 0.96) !important;
  border-bottom: 1px solid rgba(223, 186, 115, 0.25) !important;
}

.border-stone-100, .border-neutral-100, .border-stone-150, .border-neutral-150, .border-stone-200, .border-neutral-200 {
  border-color: rgba(223, 186, 115, 0.2) !important;
}

.gold-accent-line {
  height: 1px !important;
  background: var(--gold-color) !important;
  opacity: 0.35;
}

/* Navigation Typography & Hovers */
header nav a {
  text-transform: uppercase !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  padding-bottom: 2px !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.3s ease !important;
}

header nav a:hover {
  color: var(--black-color) !important;
  background-color: var(--rose-color) !important;
  padding-left: 8px;
  padding-right: 8px;
}

header nav a[class*="border-b-2"] {
  border-bottom: 2px solid var(--gold-color) !important;
  color: var(--black-color) !important;
}

/* Custom Header Logo Formatting to Mirror OBN Beauty Design */
span.font-serif.text-2xl.tracking-widest {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.5rem !important;
  letter-spacing: 0.1em !important;
  font-weight: 700 !important;
  font-style: italic !important;
  color: var(--black-color) !important;
}

span.font-serif.text-2xl.tracking-widest span {
  font-weight: 300 !important;
  font-style: normal !important;
  font-size: 1.1rem !important;
  color: var(--black-color) !important;
  letter-spacing: 0.1em !important;
}

/* Geometric Solid and Outline Button Definitions */
button, .btn,
a[class*="bg-neutral-950"], 
button[class*="bg-neutral-950"], 
a[class*="bg-black"], 
button[class*="bg-black"] {
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Hover Behavior for Pure Black Buttons -> Transitions into Soft Gold or Blush */
a[class*="bg-neutral-950"]:hover, 
button[class*="bg-neutral-950"]:hover, 
a[class*="bg-black"]:hover, 
button[class*="bg-black"]:hover {
  background-color: var(--rose-color) !important;
  color: var(--black-color) !important;
  border-color: var(--rose-color) !important;
}

/* Outlined Buttons -> Soft Gold border and Cream bg, Mint hover highlight */
a[class*="border-neutral-200"], 
a[class*="border-stone-200"], 
button[class*="border-neutral-200"], 
button[class*="border-stone-200"],
a[class*="border-zinc-200"],
a[class*="border-stone-150"] {
  border: 1px solid var(--gold-color) !important;
  background-color: var(--white-color) !important;
  color: var(--black-color) !important;
}

a[class*="border-neutral-200"]:hover, 
a[class*="border-stone-200"]:hover, 
button[class*="border-neutral-200"]:hover, 
button[class*="border-stone-200"]:hover,
a[class*="border-zinc-200"]:hover {
  background-color: var(--mint-color) !important;
  border-color: var(--gold-color) !important;
  color: var(--black-color) !important;
}

/* Category cards, Product tiles, and steps boxiness */
.luxury-card-hover {
  border: 1px solid rgba(212, 175, 55, 0.2) !important;
  background-color: var(--white-color) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.luxury-card-hover:hover {
  transform: translateY(-4px) !important;
  border-color: var(--gold-color) !important;
  background-color: var(--alabaster-color) !important;
}

.bg-stone-50 p-4.bg-white,
div[class*="space-y-3 p-4 bg-white"] {
  border: 1px solid rgba(212, 175, 55, 0.2) !important;
}

/* Step badges */
.w-10.h-10.bg-pink-100, 
.w-10.h-10.bg-tiffany-100, 
.w-10.h-10.bg-yellow-105, 
.w-10.h-10.bg-yellow-100,
.w-10.h-10.bg-emerald-100,
.w-10.h-10.bg-pink-150 {
  background-color: var(--clay-color) !important;
  color: var(--black-color) !important;
  border: 1px solid var(--gold-color) !important;
}

/* Product catalog filter sidebar and panels */
aside, .bg-white.p-5 {
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
}

/* Option Selected Pill Info boxes represent geometric precision */
.bg-stone-50\/70 {
  background-color: var(--clay-color) !important;
  border: 1px dashed rgba(212, 175, 55, 0.4) !important;
}

/* Text Highlights on Categories and Accents */
.text-gold-700, .text-gold-600 {
  color: var(--gold-color) !important;
}

/* Badges for Sale */
.bg-pink-100.text-pink-700 {
  background-color: var(--rose-color) !important;
  color: var(--black-color) !important;
  font-weight: 800 !important;
  border: 1px solid var(--black-color) !important;
}

/* Custom Utilities */
.luxury-fade {
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-gold-border {
  border-image: linear-gradient(to right, #ffffff, var(--gold-color), #ffffff) 1;
}

/* Custom video container overlay */
.video-overlay-gradient {
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 70%, rgba(0,0,0,0.3) 100%);
}

/* Shopify rich text custom renders (Body HTML column) */
.shopify-body-content p {
  margin-bottom: 0.75rem;
  line-height: 1.6;
  color: #4a4a4a;
}
.shopify-body-content ul {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 1rem;
}
.shopify-body-content ul li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.35rem;
  line-height: 1.5;
  color: #4a4a4a;
}
.shopify-body-content ul li::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: var(--gold-color); /* Gold star bullets for luxury */
}

/* Custom scrollbars with geometric gold styling */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--clay-color);
}
::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.4) !important; /* soft gold scrollbar */
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 175, 55, 0.8) !important;
}