/* =========================================================
   VikasCircle — Design Tokens
   Theme: "Night Arcade" — deep indigo void with neon violet,
   cyan and pink accents. All colors/type/spacing live here so
   every other stylesheet stays free of magic numbers.
   ========================================================= */

:root {
  /* ---- Color: surfaces ---- */
  --bg-void:        #0D0B1F;   /* page background */
  --bg-surface:     #17132F;   /* card / panel background */
  --bg-surface-2:   #201A44;   /* elevated / hovered surface */
  --bg-surface-3:   #2A2358;   /* inputs, chips */

  /* ---- Color: neon accents ---- */
  --accent-violet:  #7C5CFF;   /* primary brand / CTAs */
  --accent-violet-dim: #5A3FD6;
  --accent-cyan:    #00E5C7;   /* links, secondary highlight */
  --accent-pink:    #FF4D8D;   /* "hot" badges, alerts, hover glow */
  --accent-yellow:  #FFC24B;   /* ratings / stars */

  /* ---- Color: text ---- */
  --text-primary:   #F4F2FF;
  --text-muted:     #A9A3C9;
  --text-faint:     #6E6893;

  /* ---- Gradients ---- */
  --grad-brand: linear-gradient(135deg, var(--accent-violet) 0%, var(--accent-pink) 100%);
  --grad-cyan:  linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-violet) 100%);
  --grad-card-1: linear-gradient(135deg, #7C5CFF 0%, #3A2A8C 100%);
  --grad-card-2: linear-gradient(135deg, #00E5C7 0%, #0B7A6C 100%);
  --grad-card-3: linear-gradient(135deg, #FF4D8D 0%, #7A1E43 100%);
  --grad-card-4: linear-gradient(135deg, #FFC24B 0%, #B5680A 100%);
  --grad-card-5: linear-gradient(135deg, #5CA8FF 0%, #1E3E8C 100%);
  --grad-card-6: linear-gradient(135deg, #B45CFF 0%, #4A1E8C 100%);

  /* ---- Typography ---- */
  --font-display: 'Fredoka', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;
  --fs-3xl:  3rem;
  --fs-4xl:  4rem;

  /* ---- Spacing scale ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* ---- Radii ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* ---- Shadows / glows ---- */
  --glow-violet: 0 0 0 1px rgba(124,92,255,.35), 0 8px 30px rgba(124,92,255,.25);
  --glow-pink:   0 0 0 1px rgba(255,77,141,.4), 0 8px 30px rgba(255,77,141,.3);
  --glow-cyan:   0 0 0 1px rgba(0,229,199,.4), 0 8px 30px rgba(0,229,199,.25);
  --shadow-card: 0 10px 30px rgba(0,0,0,.35);

  /* ---- Layout ---- */
  --container-max: 1320px;
  --header-h: 76px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 150ms;
  --dur-med:  280ms;

  /* ---- Z-index scale ---- */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}