/**
 * Galaxia NFT Series — Design System
 * Official NFT collections · Accent #F06292 · Gradient #F06292 → #880E4F
 * Shared Galaxia design system + app-specific tokens.
 */

:root {
  /* App: Galaxia NFT Series */
  --galaxia-app-accent: #F06292;
  --galaxia-app-gradient-from: #F06292;
  --galaxia-app-gradient-to: #880E4F;
  --galaxia-app-glow: rgba(240, 98, 146, 0.4);

  /* Shared design system */
  --galaxia-bg: #05050F;
  --galaxia-nav-bg: #0D0D2B;
  --galaxia-surface: #1A1A4E;
  --galaxia-border: #2A2A5A;
  --galaxia-text: #F0EEFF;
  --galaxia-text-muted: rgba(240, 238, 255, 0.5);
  --galaxia-card-bg: rgba(255, 255, 255, 0.05);
  --galaxia-card-border: #2A2A5A;
  --galaxia-card-radius: 16px;
  --galaxia-input-bg: #1A1A4E;
  --galaxia-input-border: #2A2A5A;
  --galaxia-input-focus: #00D4FF;
  --galaxia-input-radius: 10px;
  --galaxia-success: #06D6A0;
  --galaxia-error: #FF6B6B;
  --galaxia-warning: #FFD166;
  --galaxia-secondary-btn-border: #00D4FF;
  --galaxia-secondary-btn-color: #00D4FF;
  --galaxia-btn-radius: 12px;
  --galaxia-blur: 12px;
}

/* Base */
body {
  background: var(--galaxia-bg);
  color: var(--galaxia-text);
  font-family: 'DM Sans', system-ui, sans-serif;
  margin: 0;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 600;
}

code, .mono, [data-address] {
  font-family: 'JetBrains Mono', monospace;
}

/* Cards */
.galaxia-card {
  background: var(--galaxia-card-bg);
  backdrop-filter: blur(var(--galaxia-blur));
  -webkit-backdrop-filter: blur(var(--galaxia-blur));
  border: 1px solid var(--galaxia-card-border);
  border-radius: var(--galaxia-card-radius);
}

/* Primary button — gradient + glow */
.galaxia-btn-primary {
  background: linear-gradient(135deg, var(--galaxia-app-gradient-from), var(--galaxia-app-gradient-to));
  color: #fff;
  border: none;
  border-radius: var(--galaxia-btn-radius);
  padding: 12px 24px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.galaxia-btn-primary:hover {
  transform: scale(1.03);
  box-shadow: 0 0 24px var(--galaxia-app-glow);
}

/* Secondary button */
.galaxia-btn-secondary {
  background: transparent;
  color: var(--galaxia-secondary-btn-color);
  border: 1px solid var(--galaxia-secondary-btn-border);
  border-radius: var(--galaxia-btn-radius);
  padding: 12px 24px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}
.galaxia-btn-secondary:hover {
  opacity: 0.9;
}

/* Inputs */
.galaxia-input {
  background: var(--galaxia-input-bg);
  border: 1px solid var(--galaxia-input-border);
  border-radius: var(--galaxia-input-radius);
  color: var(--galaxia-text);
  padding: 10px 14px;
  font-size: 1rem;
}
.galaxia-input:focus {
  outline: none;
  border-color: var(--galaxia-input-focus);
}

/* Logo glow (use with Galaxia galaxy mark) */
.galaxia-logo-glow {
  filter: drop-shadow(0 0 12px var(--galaxia-app-accent));
}

/* Animations */
.galaxia-fade-up {
  animation: galaxiaFadeUp 0.2s ease-out forwards;
}
@keyframes galaxiaFadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}