/* ============================================================
   VIVIDISTA — RADIUS, BORDER, SHADOW, BLUR, MOTION, TEXTURE
   ============================================================ */
:root {
  /* ---- Radius --------------------------------------------- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;   /* signature card radius */
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-pill: 100px;  /* buttons, chips */
  --radius-full: 9999px;

  /* ---- Border widths ------------------------------ @kind other */
  --bw-hair: 1px;   /* @kind other */
  --bw-med:  1.5px; /* @kind other */

  /* ---- Shadows (dark-tuned; mostly glow + depth) ---------- */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:   0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg:   0 24px 60px rgba(0,0,0,0.55);
  --shadow-glow:        0 0 0 1px rgba(200,245,62,0.20), 0 0 32px rgba(200,245,62,0.28);
  --shadow-glow-strong: 0 0 0 1px rgba(200,245,62,0.35), 0 0 48px rgba(200,245,62,0.45);
  --shadow-glow-teal:   0 0 40px rgba(94,234,212,0.30);
  --inset-hairline: inset 0 1px 0 rgba(255,255,255,0.06);

  /* ---- Blur (backdrop for overlay elements) ------- @kind other */
  --blur-sm:  8px;  /* @kind other */
  --blur-md:  16px; /* @kind other */
  --blur-lg:  28px; /* @kind other */

  /* ---- Motion ------------------------------------- @kind other */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);    /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);    /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   240ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */

  /* ---- Noise texture (subtle grain over the page) ---------
     SVG fractal-noise data URI; layer at low opacity via
     .vv-noise or background-image on ::before. @kind other */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); /* @kind other */
}

/* ---- Reusable noise overlay helper ------------------------ */
.vv-noise::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-size: 140px 140px;
  opacity: 0.035;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 0;
}