:root {
  --bg-1: #FFFFFF;
  --bg-2: #F6F6F7;
  --bg-3: #ECECEE;
  --surface: #FFFFFF;
  --text-primary: #1A1A1C;
  --text-secondary: #4F4F52;
  --muted: #7A7A7D;
  --interactive: #3157A5; /* mineral blue */
  --highlight: #FFD54A; /* logo yellow */
  --accent-sandstone: #D2B48C;
  --success: #3CB371;
  --warning: #FFC107;
  --danger: #E53935;
  --card-radius: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 4px rgba(30,30,30,0.06);
  --shadow-md: 0 6px 18px rgba(30,30,30,0.08);
  --motion: cubic-bezier(0.4, 0.0, 0.2, 1);
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue";
  --font-serif: "EB Garamond", serif;
  --font-common: "Times New Roman", serif;

  /* motion */
  --motion-ease: cubic-bezier(0.4,0,0.2,1);
  --motion-fast: 160ms;
  --motion-medium: 260ms;
  --motion-slow: 420ms;

  /* shadows / depth */
  --shadow-elev-1: 0 6px 16px rgba(10,12,14,0.06);
  --shadow-elev-2: 0 12px 30px rgba(10,12,14,0.08);

  /* colors (use your theme tokens) */
  --gold: #BBA66E; /* Gold Silt */
  --gold-bright: #FFD54A; /* optional bright accent */
  --accent: #7CA08A; /* oxidized bronze green */
}

.theme-dark {
  --bg-1: #0C0C0C;
  --bg-2: #1A1A1D;
  --bg-3: #262628;
  --surface: #1A1A1D;
  --text-primary: #EDEDED;
  --text-secondary: #B7B7B7;
  --muted: #999688;
  --interactive: #7CA08A;
  --highlight: #FFD54A;
  --accent-sandstone: #D2B48C;
  --success: #44B78B;
  --warning: #D8A54A;
  --danger: #D16969;
  --shadow-sm: 0 1px 6px rgba(0,0,0,0.6);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.6);
}

.micro-levitate {
  transition: transform var(--motion-fast) var(--motion-ease),
              box-shadow var(--motion-fast) var(--motion-ease),
              filter var(--motion-fast) var(--motion-ease);
  transform-origin: center;
  will-change: transform, filter;
  /* baseline */
  transform: translateZ(0) translateY(0) scale(1);
  box-shadow: var(--shadow-elev-1);
}

/* hover / focus / keyboard */
.micro-levitate:hover,
.micro-levitate:focus {
  transform: translate3d(0, -6px, 0) scale(1.015);
  box-shadow: var(--shadow-elev-2);
  /* subtle brightness nudge for buttons */
  filter: brightness(1.02);
}

/* active (press) — subtle press in */
.micro-levitate:active {
  transform: translate3d(0, -2px, 0) scale(1.008);
  transition-duration: 120ms;
}

@media (prefers-reduced-motion: reduce) {
  .micro-levitate { transition: none; transform: none; box-shadow: var(--shadow-elev-1); filter: none; }
}

.sparkle-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.btn-sparkle { position: relative; overflow: visible; }

.btn-sparkle.success {
  animation: sparkle-pulse 700ms var(--motion-ease);
}
@keyframes sparkle-pulse {
  0% { box-shadow: 0 0 0 0 rgba(187,166,110,0.35); transform: scale(1); }
  50% { box-shadow: 0 12px 48px rgba(187,166,110,0.12); transform: scale(1.02); }
  100% { box-shadow: 0 0 0 0 rgba(187,166,110,0); transform: scale(1); }
}