/* ============================================================
   TANGRAM · EFFECTS — shadows, gradients, motion
   The brand reads as soft-3D & toy-like: chunky rounded forms,
   soft drop shadows, and a signature "solid offset" press shadow
   on interactive elements (chunky game-button feel).
   ============================================================ */

:root {
  /* Soft ambient shadows (cards, popovers) */
  --tg-shadow-sm: 0 1px 2px rgba(39, 39, 37, 0.06),
                  0 2px 6px rgba(39, 39, 37, 0.06);
  --tg-shadow-md: 0 4px 10px rgba(39, 39, 37, 0.08),
                  0 12px 28px rgba(39, 39, 37, 0.10);
  --tg-shadow-lg: 0 18px 50px rgba(39, 39, 37, 0.16);

  /* Colored glow — used sparingly for hero / accent emphasis */
  --tg-shadow-roxo: 0 12px 30px rgba(114, 40, 243, 0.32);
  --tg-shadow-verde: 0 12px 30px rgba(175, 242, 44, 0.40);

  /* Signature "chunky" solid-offset shadow (game-button) */
  --tg-press-roxo: 0 5px 0 0 var(--tg-roxo-700);
  --tg-press-verde: 0 5px 0 0 var(--tg-verde-700);
  --tg-press-dark: 0 5px 0 0 var(--tg-grafite-900);

  /* Brand gradients — the identity uses TWO, usually RADIAL.
     Light origin upper-left, darkening outward. Hero / dark sections;
     use deliberately, not as wallpaper. */
  --tg-gradient-roxo:      radial-gradient(120% 120% at 30% 20%, #7228F3 0%, #4C19B2 100%); /* @kind other */
  --tg-gradient-roxo-deep: radial-gradient(120% 120% at 30% 20%, #4C19B2 0%, #270274 100%); /* @kind other */

  /* ---- GRAFISMO · concentric circles (as applied in "Pop-up Vote Tangram") ----
     The brand's signature graphism: translucent discs of the SAME color,
     stacked at one shared center, forming a soft concentric halo — a
     brighter core where they overlap, a lighter outer band. Use it BEHIND
     content (e.g. behind Tango, a trophy, a number), anchored off-center —
     never as a loud full-bleed pattern. Apply via background-image with
     background-repeat:no-repeat, a background-size (the halo diameter) and
     background-position (its center). Match the variant to its ground.
     The literal building block is two stacked discs:
       rgba(138,77,246,.5)  (=roxo-400) at radii ~200px and ~135px. */
  --tg-halo-roxo:  radial-gradient(circle closest-side, rgba(138,77,246,0.75) 0 67%, rgba(138,77,246,0.50) 67% 100%, rgba(138,77,246,0) 100%); /* @kind other */
  --tg-halo-light: radial-gradient(circle closest-side, rgba(255,255,255,0.22) 0 67%, rgba(255,255,255,0.13) 67% 100%, rgba(255,255,255,0) 100%); /* @kind other */
  --tg-halo-verde: radial-gradient(circle closest-side, rgba(175,242,44,0.34) 0 67%, rgba(175,242,44,0.18) 67% 100%, rgba(175,242,44,0) 100%); /* @kind other */
  /* soft roxo halo for LIGHT grounds (cinza/branco) — quiet brand circle */
  --tg-halo-roxo-soft: radial-gradient(circle closest-side, rgba(114,40,243,0.16) 0 67%, rgba(114,40,243,0.09) 67% 100%, rgba(114,40,243,0) 100%); /* @kind other */

  /* Focus ring */
  --tg-ring: 0 0 0 4px rgba(114, 40, 243, 0.30);

  /* Motion — snappy & bouncy, never sluggish */
  --tg-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --tg-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --tg-dur-fast: 120ms; /* @kind other */
  --tg-dur: 200ms; /* @kind other */
  --tg-dur-slow: 340ms; /* @kind other */
}