:root {
  --background: #0A0A0A;
  --foreground: #F5F5F5;
  --primary: #D4AF37;
  --secondary: #1A1A1A;
  --border: #262626;
  --font-playfair: "Playfair Display", serif;
  --font-inter: "Inter", sans-serif;
  --ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
  --font-heading: var(--font-playfair);
  --font-body: var(--font-inter);
}

/* THEMES */
[data-theme="dark"], [data-theme="noir-gold"] {
  --background: #0A0A0A; --foreground: #F5F5F5; --primary: #D4AF37; --secondary: #1A1A1A; --border: #262626;
}
[data-theme="light"], [data-theme="vogue-white"] {
  --background: #FFFFFF; --foreground: #000000; --primary: #000000; --secondary: #F5F5F5; --border: #EAEAEA;
}
[data-theme="brutalist-color"] {
  --background: #FFF8E7; --foreground: #000000; --primary: #FF5F00; --secondary: #F5F5F5; --border: #000000;
}
[data-theme="arctic"], [data-theme="arctic-clean"] {
  --background: #F8FAFC; --foreground: #0F172A; --primary: #3182CE; --secondary: #FFFFFF; --border: #E2E8F0; --font-heading: var(--font-inter);
}
[data-theme="swiss-type"] {
  --background: #FFFFFF; --foreground: #000000; --primary: #FF0000; --secondary: #F5F5F5; --border: #000000; --font-heading: var(--font-inter);
}
[data-theme="calm-ivory"] {
  --background: #F8F7F4; --foreground: #2C2C2C; --primary: #A69D8F; --secondary: #F2F0EB; --border: #EAE8E2;
}
[data-theme="vintage-wine"] {
  --background: #2D0B0B; --foreground: #E2B07E; --primary: #E2B07E; --secondary: #3D0F0F; --border: #4D1F1F;
}

/* LAYOUTS - Scoped to avoid breaking UI */
[data-layout="brutalist"] main section { border-bottom: 4px solid var(--border); padding: 4rem 2rem !important; }
[data-layout="brutalist"] h1, [data-layout="brutalist"] h2 { text-transform: uppercase; font-weight: 900; line-height: 0.85; font-family: var(--font-inter); }

[data-layout="minimalist"] body, [data-layout="stack"] body { text-align: center; font-weight: 300; }
[data-layout="minimalist"] .max-w-7xl, [data-layout="stack"] .max-w-7xl { max-width: 900px; margin: 0 auto; }

[data-layout="luxury"] h1, [data-layout="luxury"] h2, [data-layout="editorial"] h1, [data-layout="editorial"] h2 { font-style: italic; font-weight: 400; }
[data-layout="luxury"] main section, [data-layout="editorial"] main section { padding-left: 3rem; margin-left: 2rem; }

/* Sidebar Navigation for Luxury */
@media (min-width: 768px) {
    [data-layout="luxury"] #main-nav, [data-layout="editorial"] #main-nav {
        width: 6rem; height: 100vh; flex-direction: column; border-right: 1px solid var(--border); border-bottom: none;
        padding: 3rem 0; background: var(--background); opacity: 1; top: 0; left: 0;
    }
    [data-layout="luxury"] #main-nav .max-w-7xl, [data-layout="editorial"] #main-nav .max-w-7xl { flex-direction: column; height: 100%; gap: 3rem; padding: 0; }
    [data-layout="luxury"] #main-nav .flex-1, [data-layout="editorial"] #main-nav .flex-1 { flex-direction: column; flex: none; gap: 2rem; display: flex !important; }
    [data-layout="luxury"] main, [data-layout="editorial"] main { margin-left: 6rem; padding-top: 0; }
}

/* UI Elements */
body { background-color: var(--background); color: var(--foreground); font-family: var(--font-body); transition: background-color 0.5s ease, color 0.5s ease; margin: 0; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--font-heading); }

.grain-effect { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); }
.lux-reveal { opacity: 0; transform: translateY(20px); transition: all 1s var(--ease-luxury); }
.lux-reveal.visible { opacity: 1; transform: translateY(0); }

#custom-cursor { position: fixed; width: 20px; height: 20px; background: var(--primary); border-radius: 50%; pointer-events: none; z-index: 10000; mix-blend-mode: difference; transition: transform 0.1s ease; display: none; }
@media (pointer: fine) { #custom-cursor { display: block; } }

.nav-link { position: relative; transition: color 0.3s ease; }
.nav-link::after { content: ''; position: absolute; width: 100%; height: 1px; bottom: -4px; left: 0; background-color: var(--primary); transform: scaleX(0); transform-origin: bottom right; transition: transform 0.6s var(--ease-luxury); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: bottom left; }
.nav-link:hover { color: var(--primary); }

/* Sidebar UI Stability - Locked to white/black to prevent "jitter" */
#design-sidebar .bg-white\/80 { background-color: rgba(255, 255, 255, 0.9) !important; backdrop-filter: blur(20px) !important; border-left: 1px solid rgba(0,0,0,0.1) !important; }
#design-sidebar * { color: #18181b !important; border-color: rgba(0,0,0,0.1) !important; }
#design-sidebar .opacity-30, #design-sidebar .opacity-40, #design-sidebar .opacity-50 { opacity: 0.5 !important; }

#design-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  max-width: 28rem; /* Equivalent to max-w-md */
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  transition: visibility 0.6s;
  visibility: hidden;
  height: 100vh !important;
  overflow: hidden;
}

#design-sidebar.open {
  visibility: visible;
  pointer-events: auto;
}

#design-sidebar > div {
  transform: translateX(100%);
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#design-sidebar.open > div {
  transform: translateX(0);
}

/* Ensure content container within sidebar is scrollable */
#sidebar-content-container {
  overflow-y: auto !important;
  flex: 1;
  height: 100%;
}

.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 10px; }