/**
 * ═══════════════════════════════════════════════════════════════════════
 * BabySNEK Elemental Guardians — Master Design System & Styleguide Stylesheet
 * Brand Aesthetic: Cyber-Dark, Electric Neon, Playful Memecoin-meets-DeFi
 * ═══════════════════════════════════════════════════════════════════════
 */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Jua&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* ── Core Cyber-Dark Canvas ── */
  --snek-bg-darker: #050A0F;
  --snek-bg-dark: #0B1117;
  --snek-bg-surface: #131F2E;
  --snek-bg-surface-elevated: #1A283A;
  --snek-bg-glass: rgba(19, 31, 46, 0.75);
  --snek-bg-glass-card: rgba(26, 36, 47, 0.65);

  /* ── Core Brand Neon Accents ── */
  --snek-neon-cyan: #04CFFF;
  --snek-neon-cyan-glow: rgba(4, 207, 255, 0.35);
  --snek-neon-cyan-soft: rgba(4, 207, 255, 0.12);

  --snek-neon-pink: #FC8ECD;
  --snek-neon-pink-deep: #E55291;
  --snek-neon-pink-glow: rgba(252, 142, 205, 0.35);
  --snek-neon-pink-soft: rgba(252, 142, 205, 0.12);

  --snek-brand-yellow: #FFA324;
  --snek-brand-gold: #FFD700;
  --snek-brand-green: #45C967;
  --snek-brand-emerald: #4ADE80;
  --snek-brand-purple: #9B5DE5;
  --snek-brand-red: #E62334;

  /* ── Typography & Text ── */
  --snek-font-display: 'Jua', 'Bricolage Grotesque', system-ui, sans-serif;
  --snek-font-body: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --snek-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --snek-text-primary: #FFFFFF;
  --snek-text-secondary: #D4E9FB;
  --snek-text-muted: #8EA2B9;
  --snek-text-dim: #54667A;

  /* ── Borders & Outlines ── */
  --snek-border-subtle: rgba(255, 255, 255, 0.08);
  --snek-border-cyan: rgba(4, 207, 255, 0.3);
  --snek-border-pink: rgba(252, 142, 205, 0.3);
  --snek-border-glass: rgba(255, 255, 255, 0.12);

  /* ── Radii ── */
  --snek-radius-sm: 8px;
  --snek-radius-md: 14px;
  --snek-radius-lg: 20px;
  --snek-radius-xl: 28px;
  --snek-radius-full: 9999px;

  /* ── Shadows & Glows ── */
  --snek-shadow-glass: 0 10px 30px -5px rgba(0, 0, 0, 0.5), 0 0 1px 1px rgba(255, 255, 255, 0.05) inset;
  --snek-shadow-cyan-glow: 0 0 25px rgba(4, 207, 255, 0.35);
  --snek-shadow-pink-glow: 0 0 25px rgba(252, 142, 205, 0.35);
  --snek-shadow-elevated: 0 20px 40px -15px rgba(0, 0, 0, 0.7);

  /* ── Character Colorways (The 5 Plushies) ── */
  --snek-char-snekgirl-primary: #E55291;
  --snek-char-snekgirl-secondary: #FCAEC6;
  --snek-char-snekgirl-belly: #FFE4EE;

  --snek-char-jimmy-primary: #FFA324;
  --snek-char-jimmy-secondary: #FFEFA1;
  --snek-char-jimmy-belly: #FFF8D6;

  --snek-char-babysnek-primary: #52B6ED;
  --snek-char-babysnek-secondary: #AEE2FF;
  --snek-char-babysnek-belly: #E0F4FF;

  --snek-char-freddy-primary: #45C967;
  --snek-char-freddy-secondary: #D6F8DB;
  --snek-char-freddy-belly: #EEFDF1;

  --snek-char-bossman-primary: #E62334;
  --snek-char-bossman-secondary: #FFA1A9;
  --snek-char-bossman-belly: #FFE6E9;

  /* ── Physical Locker Tiers ── */
  --snek-tier-standard: #4ADE80;
  --snek-tier-standard-bg: rgba(74, 222, 128, 0.12);
  --snek-tier-enhanced: #9B5DE5;
  --snek-tier-enhanced-bg: rgba(155, 93, 229, 0.12);
  --snek-tier-alpha: #04CFFF;
  --snek-tier-alpha-bg: rgba(4, 207, 255, 0.12);
  --snek-tier-alpha-gold: #FFD700;
}

/* ── Base Utility & Typography Classes ── */
.snek-font-display {
  font-family: var(--snek-font-display);
}

.snek-font-body {
  font-family: var(--snek-font-body);
}

.snek-gradient-text-cyan-pink {
  background: linear-gradient(135deg, var(--snek-neon-cyan) 0%, var(--snek-neon-pink) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.snek-gradient-text-gold {
  background: linear-gradient(135deg, #FFE875 0%, var(--snek-brand-yellow) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Glassmorphic Cards ── */
.snek-card {
  background: var(--snek-bg-glass-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--snek-border-glass);
  border-radius: var(--snek-radius-xl);
  box-shadow: var(--snek-shadow-glass);
  transition: all 0.25s ease-in-out;
}

.snek-card:hover {
  border-color: var(--snek-border-cyan);
  transform: translateY(-2px);
}

.snek-card-glow-cyan {
  border-color: var(--snek-border-cyan);
  box-shadow: 0 0 30px var(--snek-neon-cyan-glow), var(--snek-shadow-glass);
}

.snek-card-glow-pink {
  border-color: var(--snek-border-pink);
  box-shadow: 0 0 30px var(--snek-neon-pink-glow), var(--snek-shadow-glass);
}

/* ── Buttons & CTAs ── */
.snek-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-family: var(--snek-font-body);
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: var(--snek-radius-lg);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  border: none;
}

.snek-btn-primary {
  background: linear-gradient(135deg, #04CFFF 0%, #0099FF 100%);
  color: #050A0F;
  box-shadow: 0 4px 20px rgba(4, 207, 255, 0.4);
}

.snek-btn-primary:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 6px 25px rgba(4, 207, 255, 0.6);
}

.snek-btn-pink {
  background: linear-gradient(135deg, #FC8ECD 0%, #E55291 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 20px rgba(252, 142, 205, 0.4);
}

.snek-btn-pink:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 6px 25px rgba(252, 142, 205, 0.6);
}

.snek-btn-outline {
  background: rgba(255, 255, 255, 0.04);
  color: var(--snek-text-primary);
  border: 1px solid var(--snek-border-cyan);
}

.snek-btn-outline:hover {
  background: rgba(4, 207, 255, 0.1);
  border-color: var(--snek-neon-cyan);
}

/* ── Badges & Chips ── */
.snek-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--snek-radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.snek-badge-nfc {
  background: rgba(4, 207, 255, 0.15);
  color: var(--snek-neon-cyan);
  border: 1px solid rgba(4, 207, 255, 0.4);
}

.snek-badge-standard {
  background: var(--snek-tier-standard-bg);
  color: var(--snek-tier-standard);
  border: 1px solid rgba(74, 222, 128, 0.35);
}

.snek-badge-enhanced {
  background: var(--snek-tier-enhanced-bg);
  color: var(--snek-tier-enhanced);
  border: 1px solid rgba(155, 93, 229, 0.35);
}

.snek-badge-alpha {
  background: var(--snek-tier-alpha-bg);
  color: var(--snek-tier-alpha);
  border: 1px solid rgba(4, 207, 255, 0.4);
}

/* ── NFC Radar Pulse Animation ── */
@keyframes snekNfcPulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(4, 207, 255, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 16px rgba(4, 207, 255, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(4, 207, 255, 0);
  }
}

.snek-nfc-indicator {
  width: 14px;
  height: 14px;
  background-color: var(--snek-neon-cyan);
  border-radius: 50%;
  animation: snekNfcPulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}