/**
 * Galaxia Storage Network – Design System & Brand Theme
 * App: Galaxia Storage Network (GSN)
 * Accent: #78909C | Gradient: #78909C → #263238
 * Purpose: Decentralized file storage
 * "Chart the Unknown Possibilities of Existence." 🚀
 */

:root {
  /* ─── GSN Brand (from APP COLOR REGISTRY) ─── */
  --gsn-accent: #78909C;
  --gsn-accent-from: #78909C;
  --gsn-accent-to: #263238;
  --gsn-gradient: linear-gradient(135deg, #78909C 0%, #263238 100%);
  --gsn-glow: 0 0 20px rgba(120, 144, 156, 0.4);

  /* ─── Shared Galaxia Design System (non-negotiable) ─── */
  --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: 1px solid #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;

  /* ─── GSN-specific (accent overrides where needed) ─── */
  --gsn-primary-gradient: linear-gradient(135deg, var(--gsn-accent-from) 0%, var(--gsn-accent-to) 100%);
  --gsn-logo-glow: drop-shadow(0 0 12px var(--gsn-accent));
  --gsn-transition: opacity 200ms ease, transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

/* Base page – star-field background, dark only */
.gsn-app {
  background: var(--galaxia-bg);
  color: var(--galaxia-text);
  min-height: 100vh;
  font-family: 'DM Sans', system-ui, sans-serif;
}

.gsn-app h1, .gsn-app h2, .gsn-app h3 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 600;
}

.gsn-app code, .gsn-app .mono {
  font-family: 'JetBrains Mono', monospace;
}

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

/* Primary button – GSN gradient */
.gsn-btn-primary {
  background: var(--gsn-primary-gradient);
  color: #F0EEFF;
  border: none;
  border-radius: var(--galaxia-btn-radius);
  padding: 12px 24px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--gsn-transition);
  box-shadow: var(--gsn-glow);
}

.gsn-btn-primary:hover {
  transform: scale(1.03);
  box-shadow: 0 0 24px rgba(120, 144, 156, 0.5);
}

/* Secondary button */
.gsn-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: 500;
  cursor: pointer;
  transition: var(--gsn-transition);
}

.gsn-btn-secondary:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

/* Inputs */
.gsn-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;
  transition: var(--gsn-transition);
}

.gsn-input:focus {
  outline: none;
  border-color: var(--galaxia-input-focus);
}

/* Logo glow (Galaxia galaxy mark + GSN accent) */
.gsn-logo {
  filter: var(--gsn-logo-glow);
}

/* Entry animation */
.gsn-animate-in {
  animation: gsnFadeUp 200ms ease forwards;
}

@keyframes gsnFadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}