/* ============================================
   STYLEJEWELRYS — Design Tokens (Black & Gold)
   ============================================ */
:root {
  /* Brand gold */
  --gold: #C9A227;
  --gold-light: #E8C86A;
  --gold-deep: #8C6D14;
  --gold-gradient: linear-gradient(135deg, #E8C86A 0%, #C9A227 40%, #8C6D14 100%);
  --gold-sheen: linear-gradient(100deg, #8C6D14 0%, #E8C86A 35%, #FFF3C4 50%, #E8C86A 65%, #8C6D14 100%);
  /* Neutrals */
  --black: #0A0A0A;
  --surface: #141414;
  --surface-2: #1C1C1C;
  --surface-3: #262626;
  --line: rgba(201, 162, 39, 0.22);
  --line-soft: rgba(255, 255, 255, 0.08);
  /* Text */
  --text: #F5F5F5;
  --text-dim: #A8A8A8;
  --text-mute: #6E6E6E;
  /* Accent (trend color) */
  --accent: #FF3B6B;
  --accent-soft: rgba(255, 59, 107, 0.15);
  /* Status */
  --ok: #2ECC71;
  --warn: #F1C40F;
  /* Geometry */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  /* Elevation */
  --shadow-1: 0 2px 10px rgba(0,0,0,.45);
  --shadow-2: 0 10px 34px rgba(0,0,0,.6);
  --glow-gold: 0 0 24px rgba(201,162,39,.35);
  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .28s;
  /* Layout */
  --topbar-h: 68px;
  --navbar-h: 62px;
  --rail-w: 300px;
}
/* ---------- Light theme ---------- */
[data-theme="light"] {
  --black: #FAF8F4;
  --surface: #FFFFFF;
  --surface-2: #F4F1EA;
  --surface-3: #EAE5DA;
  --line: rgba(140, 109, 20, 0.25);
  --line-soft: rgba(0,0,0,.08);
  --text: #14110C;
  --text-dim: #5A5348;
  --text-mute: #8B8378;
  --shadow-1: 0 2px 10px rgba(0,0,0,.08);
  --shadow-2: 0 10px 34px rgba(0,0,0,.12);
  --glow-gold: 0 0 20px rgba(201,162,39,.28);
}
/* ---------- Base ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { height: 100%; width: 100%; }
body { height: 100%; width: 100%; }
body {
  margin: 0;
  background: var(--black);
  color: var(--text);
  font-family: "Helvetica Neue", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* Brand typography */
.brand-type {
  font-family: "Didot", "Bodoni MT", "Playfair Display", Georgia, serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}
/* Gold text treatment */
.gold-text {
  background: var(--gold-sheen);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: sheen 6s linear infinite;
}
@keyframes sheen {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}
/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }
/* Focus ring */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}