: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: #94a3b8;
  --r-uncommon: #38d878;
  --r-rare: #3b9cff;
  --r-epic: #a855f7;
  --r-legendary: #ffd23f;
  --r-mythic: #ff3b7a;
  --r-super: #ff2bd6;
  --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: 240% 100%;
  --super-rainbow-duration: 4s;
  --rarity-common-gradient: linear-gradient(90deg, #94a3b8, #cbd5e1, #64748b, #94a3b8);
  --rarity-uncommon-gradient: linear-gradient(90deg, #38d878, #4ade80, #16a34a, #38d878);
  --rarity-rare-gradient: linear-gradient(90deg, #3b9cff, #60a5fa, #2563eb, #3b9cff);
  --rarity-epic-gradient: linear-gradient(90deg, #a855f7, #c084fc, #9333ea, #a855f7);
  --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); }
}

@keyframes cta-gradient-shift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  @keyframes super-rainbow-shift {
    0%, 100% { background-position: 0% 50%; }
  }

  @keyframes super-rainbow-hue {
    0%, 100% { filter: none; }
  }
}