/* ============================================================
   EBANX Hackathon 2026 — Effects: shadows, glows, motion, FX
   Dark-first brand → elevation reads through glow + hairline,
   not heavy drop shadows. The violet "vibe" glow is signature.
   ============================================================ */

:root {
  /* ---- Shadows (subtle on dark canvas) ------------------ */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.40);
  --shadow-md:  0 4px 14px rgba(0,0,0,0.45);
  --shadow-lg:  0 12px 32px rgba(0,0,0,0.55);
  --shadow-xl:  0 24px 60px rgba(0,0,0,0.60);

  /* ---- Violet glow (the signature "vibe" light) --------- */
  --glow-sm:    0 0 12px rgba(164,89,255,0.35);
  --glow-md:    0 0 24px rgba(164,89,255,0.45);
  --glow-lg:    0 0 48px rgba(164,89,255,0.55);
  --glow-text:  0 0 18px rgba(164,89,255,0.65);
  --glow-inset: inset 0 0 24px rgba(164,89,255,0.18);

  /* ---- Rings ------------------------------------------- */
  --ring-focus: 0 0 0 3px color-mix(in oklab, var(--violet-400) 55%, transparent);
  --ring-brand: 0 0 0 1.5px var(--violet-500);

  /* ---- Motion ------------------------------------------ */
  /* Snappy & techy: short, slightly assertive easing.
     No bouncy overshoot — the brand is precise, not playful. */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);   /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in:       cubic-bezier(0.5, 0, 0.75, 0); /* @kind other */

  --duration-fast:   120ms;  /* @kind other */
  --duration-base:   200ms;  /* @kind other */
  --duration-slow:   320ms;  /* @kind other */
  --duration-slower: 520ms;  /* @kind other */

  --transition-base: all var(--duration-base) var(--ease-standard); /* @kind other */

  /* ---- Surface gradients ------------------------------- */
  --gradient-violet:  linear-gradient(135deg, var(--violet-500) 0%, var(--violet-700) 100%); /* @kind color */
  --gradient-canvas:  radial-gradient(1200px 600px at 50% -10%, rgba(164,89,255,0.14), transparent 60%); /* @kind color */
  --gradient-veil:    linear-gradient(180deg, transparent 0%, rgba(10,9,7,0.85) 100%); /* @kind color */

  /* ---- Backdrop blur ----------------------------------- */
  --blur-sm: blur(6px);  /* @kind other */
  --blur-md: blur(14px); /* @kind other */
  --blur-lg: blur(28px); /* @kind other */
}