@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Poppins:wght@400;500;600&display=swap');

:root {
  --background: 40 33% 97%;
  --foreground: 0 0% 7%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 7%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 7%;
  --primary: 46 65% 52%;
  --primary-foreground: 0 0% 7%;
  --secondary: 0 0% 7%;
  --secondary-foreground: 0 0% 100%;
  --muted: 38 28% 91%;
  --muted-foreground: 0 0% 36%;
  --accent: 39 45% 88%;
  --accent-foreground: 0 0% 7%;
  --destructive: 0 72% 45%;
  --destructive-foreground: 0 0% 100%;
  --success: 142 54% 36%;
  --success-foreground: 0 0% 100%;
  --warning: 38 92% 50%;
  --warning-foreground: 0 0% 7%;
  --info: 209 85% 45%;
  --info-foreground: 0 0% 100%;
  --border: 36 22% 82%;
  --input: 36 22% 82%;
  --ring: 46 65% 52%;
  --radius: 0.625rem;
  --font-sans: 'Poppins', system-ui, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --shadow-sm: 0 1px 2px hsl(var(--foreground)/0.05);
  --shadow-md: 0 4px 12px hsl(var(--foreground)/0.08);
  --shadow-lg: 0 12px 32px hsl(var(--foreground)/0.12);
  --shadow-elegant: 0 20px 60px hsl(var(--primary)/0.24);
  --transition-fast: 150ms cubic-bezier(0.4,0,0.2,1);
  --transition: 200ms cubic-bezier(0.4,0,0.2,1);
  --transition-smooth: 300ms cubic-bezier(0.4,0,0.2,1);
}

.dark {
  --background: 0 0% 7%;
  --foreground: 40 33% 97%;
  --card: 0 0% 10%;
  --card-foreground: 40 33% 97%;
  --popover: 0 0% 12%;
  --popover-foreground: 40 33% 97%;
  --primary: 46 65% 58%;
  --primary-foreground: 0 0% 7%;
  --secondary: 40 33% 97%;
  --secondary-foreground: 0 0% 7%;
  --muted: 0 0% 16%;
  --muted-foreground: 38 18% 72%;
  --accent: 0 0% 18%;
  --accent-foreground: 40 33% 97%;
  --destructive: 0 68% 48%;
  --destructive-foreground: 0 0% 100%;
  --success: 142 48% 42%;
  --success-foreground: 0 0% 100%;
  --warning: 38 92% 56%;
  --warning-foreground: 0 0% 7%;
  --info: 209 78% 56%;
  --info-foreground: 0 0% 7%;
  --border: 0 0% 22%;
  --input: 0 0% 22%;
  --ring: 46 65% 58%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  padding-top: env(safe-area-inset-top);
}
h1, h2, h3, .font-display { font-family: var(--font-display); }
button, input, select, textarea { font: inherit; }
input, select, textarea { font-size: max(16px, 1rem); }
::selection { background: hsl(var(--primary)/0.28); }
.hero-luxury {
  background-image: linear-gradient(115deg, hsl(var(--foreground)/0.86), hsl(var(--foreground)/0.52)), url('../assets/glam-look-salon-interior.svg');
  background-size: cover;
  background-position: center;
}
.dark .hero-luxury { background-image: linear-gradient(115deg, hsl(var(--background)/0.72), hsl(var(--background)/0.46)), url('../assets/glam-look-salon-interior.svg'); }
.glass-panel { background: hsl(var(--card)/0.72); backdrop-filter: blur(18px); }
.gold-glow { box-shadow: var(--shadow-elegant); }
.luxury-card { box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
.luxury-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.animate-rise { animation: rise 700ms cubic-bezier(0.4,0,0.2,1) both; }
.animate-rise-delayed { animation: rise 900ms cubic-bezier(0.4,0,0.2,1) both; }
.float-accent { animation: floatAccent 5s ease-in-out infinite; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes floatAccent { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.masonry { column-count: 1; column-gap: 1rem; }
@media (min-width: 640px) { .masonry { column-count: 2; } }
@media (min-width: 1024px) { .masonry { column-count: 3; } }
.masonry-item { break-inside: avoid; margin-bottom: 1rem; }
.safe-bottom { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }