/* ==========================================================
   A&C Jewellery — Shared design tokens
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Manrope:wght@300;400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400&display=swap');

:root {
  /* Brand */
  --aubergine: #1a0838;
  --purple-deep: #38157a;
  --purple-magenta: #6f0c72;
  --gold-light: #f3ce75;
  --gold: #e1b569;
  --gold-mid: #cc9c56;
  --gold-dark: #c49450;
  --cream: #fbf8f1;
  --cream-warm: #f6efe0;
  --ink: #1a0838;

  --font-display: 'Cormorant Garamond', 'Fraunces', serif;
  --font-body: 'Manrope', system-ui, sans-serif;
}

/* Reset-ish */
*, *::before, *::after { box-sizing: border-box; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }

/* Reusable shimmer */
@keyframes goldShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.gold-text {
  background: linear-gradient(90deg, #cc9c56 0%, #f3ce75 30%, #e1b569 50%, #f3ce75 70%, #cc9c56 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: goldShimmer 6s ease-in-out infinite;
}

/* Striped image placeholder used when real photography isn't available */
.placeholder-img {
  position: relative;
  overflow: hidden;
  background-color: #2a1050;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(225,181,105,0.12) 0px,
    rgba(225,181,105,0.12) 1px,
    transparent 1px,
    transparent 14px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(243,206,117,0.55);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
}
.placeholder-img--cream {
  background-color: #ece2cd;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(56,21,122,0.10) 0px,
    rgba(56,21,122,0.10) 1px,
    transparent 1px,
    transparent 14px
  );
  color: rgba(56,21,122,0.55);
}