/* ==========================================================================
   Gopnik NFT Marketplace — v2 Design Tokens
   Shared by every `.mpv2-*` surface. Single source of truth for colors,
   radii, shadows, motion curves, and rarity treatments.
   ========================================================================== */

:root {
  /* Base surfaces */
  --mpv2-bg-deep:       #050510;
  --mpv2-bg-panel:      rgba(14, 14, 36, 0.72);
  --mpv2-bg-panel-hi:   rgba(22, 20, 54, 0.85);
  --mpv2-bg-glass:      rgba(18, 20, 44, 0.55);
  --mpv2-border:        rgba(139, 92, 246, 0.20);
  --mpv2-border-hi:     rgba(139, 92, 246, 0.55);

  /* Accent palette */
  --mpv2-purple:        #8b5cf6;
  --mpv2-purple-soft:   rgba(139, 92, 246, 0.32);
  --mpv2-cyan:          #22d3ee;
  --mpv2-pink:          #f472b6;
  --mpv2-green:         #34d399;
  --mpv2-amber:         #f59e0b;
  --mpv2-red:           #ef4444;

  /* Rarity scale */
  --mpv2-rarity-common:    #64748b;
  --mpv2-rarity-rare:      #38bdf8;
  --mpv2-rarity-epic:      #a855f7;
  --mpv2-rarity-legendary: #f59e0b;
  --mpv2-rarity-mythic:    #f472b6;

  /* Typography */
  --mpv2-text:       #f0f1ff;
  --mpv2-text-dim:   #8b89b8;
  --mpv2-text-faint: #5c5a85;
  --mpv2-font-disp:  'Poppins', 'Inter', system-ui, sans-serif;
  --mpv2-font-body:  'Inter', system-ui, sans-serif;
  --mpv2-font-mono:  'JetBrains Mono', ui-monospace, monospace;

  /* Motion */
  --mpv2-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --mpv2-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --mpv2-dur-fast:    180ms;
  --mpv2-dur-med:     320ms;
  --mpv2-dur-slow:    640ms;
  --mpv2-dur-xslow:   1200ms;

  /* Radii */
  --mpv2-radius-xs: 6px;
  --mpv2-radius-sm: 10px;
  --mpv2-radius-md: 14px;
  --mpv2-radius-lg: 22px;
  --mpv2-radius-xl: 32px;

  /* Shadows */
  --mpv2-shadow-card:  0 12px 40px rgba(0, 0, 0, 0.50);
  --mpv2-shadow-hover: 0 20px 60px rgba(139, 92, 246, 0.28),
                       0 0 0 1px rgba(139, 92, 246, 0.22);
  --mpv2-shadow-glow:  0 0 24px rgba(139, 92, 246, 0.45);

  /* Gradients */
  --mpv2-grad-title:    linear-gradient(135deg, #a78bfa 0%, #22d3ee 55%, #f472b6 100%);
  --mpv2-grad-mythic:   conic-gradient(from var(--angle, 0deg),
                          #f472b6, #a855f7, #22d3ee, #34d399, #f59e0b, #f472b6);
  --mpv2-grad-legendary: conic-gradient(from var(--angle, 0deg),
                          rgba(245,158,11,0.2) 0deg,
                          rgba(245,158,11,1) 90deg,
                          rgba(250,204,21,1) 130deg,
                          rgba(245,158,11,0.2) 220deg);
  --mpv2-grad-epic:     conic-gradient(from var(--angle, 0deg),
                          #a855f7, #8b5cf6, #7c3aed, #a855f7);

  /* Scrim / overlays */
  --mpv2-scrim: radial-gradient(80% 60% at 50% 0%,
                 rgba(139, 92, 246, 0.18) 0%,
                 rgba(5, 5, 16, 0) 70%);
}

/* Enable smooth gradient animation for rarity conic borders */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}