/* ==========================================================================
   Blue Moon Hair Design — Main Stylesheet
   Crafted under /impeccable standards
   ========================================================================== */

:root {
  --color-dark: #0c121d;
  --color-card: #141d2d;
  --color-slate: #1e293b;
  --color-light: #fdfcf9;
  --color-cream: #f5f2eb;
  --color-gold: #cda861;
  --color-gold-hover: #b8924b;
  --color-rose: #ea2c59;
  --color-ink: #181818;
  --color-muted: #64748b;
  
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Montserrat', Helvetica, Arial, sans-serif;
  
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  color: var(--color-ink);
  background-color: var(--color-light);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background-color: var(--color-gold);
  color: var(--color-dark);
}

h1, h2, h3, .font-serif {
  font-family: var(--font-serif);
}

/* Subtle transitions & Elevation */
.price-card {
  transition: transform 0.25s var(--ease-expo), box-shadow 0.25s var(--ease-expo), border-color 0.25s var(--ease-expo);
}

.price-card:hover {
  transform: translateY(-2px);
  border-color: rgba(205, 168, 97, 0.3);
}

/* Tab button state */
.price-tab.active {
  background-color: var(--color-gold) !important;
  color: var(--color-dark) !important;
  border-color: var(--color-gold) !important;
  font-weight: 600;
}

/* Image containment */
img {
  max-width: 100%;
  height: auto;
}