:root {
  --accent: #2563eb;
  --accent-600: #1d4ed8;
  --accent-050: rgba(37, 99, 235, 0.08);
  --accent-100: rgba(37, 99, 235, 0.16);
  --radius: 16px;
  --font-display: 'Hanken Grotesk', 'Apple SD Gothic Neo', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Apple SD Gothic Neo', system-ui, sans-serif;
  --page-bg: #f8fafc;
  --page-bg-elevated: #ffffff;
  --ink: #0f172a;
  --ink-2: #334155;
  --ink-3: #64748b;
  --ink-4: #94a3b8;
  --price-old: #dc2626;
  --price-now: #16a34a;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --line: #e2e8f0;
  --line-2: #cbd5e1;
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.12);
  --ok: #16a34a;
  --warn: #d97706;
  --fail: #dc2626;
  --r-common: #64748b;
  --r-uncommon: #16a34a;
  --r-rare: #2563eb;
  --r-epic: #9333ea;
  --r-legendary: #ca8a04;
  --r-mythic: #e11d48;
  --r-super: #db2777;
  --super-rainbow-gradient: linear-gradient(
    90deg,
    #ff2bd6,
    #ff3b7a,
    #ffd23f,
    #38d878,
    #3b9cff,
    #a855f7,
    #ff2bd6
  );
  --legendary-gradient: linear-gradient(
    90deg,
    #fef3c7,
    #fde047,
    #facc15,
    #f59e0b,
    #d97706,
    #fbbf24,
    #fef08a,
    #fef3c7
  );
  --mythic-gradient: linear-gradient(
    90deg,
    #fda4af,
    #fb7185,
    #f43f5e,
    #e11d48,
    #ff3b7a,
    #db2777,
    #f472b6,
    #fda4af
  );
  --super-rainbow-size: 200% 100%;
  --super-rainbow-duration: 5s;
  --input-bg: #ffffff;
  --hover-bg: rgba(15, 23, 42, 0.04);
}

@keyframes super-rainbow-shift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes super-rainbow-hue {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  @keyframes super-rainbow-shift {
    0%, 100% { background-position: 0% 50%; }
  }

  @keyframes super-rainbow-hue {
    0%, 100% { filter: none; }
  }
}
