/* ===========================
   harmjoy.us — Shared Theme
   =========================== */

/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--hj-bg, #0f0f1a);
  color: #e0e0e0;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Background glow effects — uses theme accent tints */
.bg-glow {
  position: fixed;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 80%;
  background: radial-gradient(circle, var(--hj-bg-tint, rgba(99, 102, 241, 0.08)) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.bg-glow-2 {
  position: fixed;
  bottom: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 80%;
  background: radial-gradient(circle, var(--hj-bg-tint-2, rgba(168, 85, 247, 0.06)) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Pulse animation */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Icon color themes */
.icon-blue { background: rgba(59, 130, 246, 0.12); color: #60a5fa; }
.icon-green { background: rgba(34, 197, 94, 0.12); color: #4ade80; }
.icon-purple { background: rgba(168, 85, 247, 0.12); color: #c084fc; }
.icon-orange { background: rgba(249, 115, 22, 0.12); color: #fb923c; }
.icon-red { background: rgba(239, 68, 68, 0.12); color: #f87171; }
.icon-cyan { background: rgba(6, 182, 212, 0.12); color: #22d3ee; }
.icon-pink { background: rgba(236, 72, 153, 0.12); color: #f472b6; }
.icon-yellow { background: rgba(234, 179, 8, 0.12); color: #facc15; }
.icon-indigo { background: rgba(99, 102, 241, 0.12); color: #818cf8; }

/* Gradient heading — uses theme accents */
.gradient-heading {
  font-weight: 700;
  background: linear-gradient(135deg, var(--hj-accent-1, #818cf8), var(--hj-accent-2, #a78bfa), var(--hj-accent-3, #c084fc));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
}

/* Footer */
footer {
  text-align: center;
  color: #374151;
  font-size: 0.8rem;
}