/* ============================================================
   O TAL THIAGO — Radius, Shadow & Effects
   Rounded corners with subtle shadows. Glass only where it
   sits over live video (overlays, lower-thirds).
   ============================================================ */

:root {
  /* ---- Radius ---- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;   /* default card / control */
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* ---- Elevation (soft, cinematic) ---- */
  --shadow-sm:   0 1px 2px rgba(3, 14, 31, 0.30);
  --shadow-md:   0 6px 18px rgba(3, 14, 31, 0.35);
  --shadow-lg:   0 18px 44px rgba(3, 14, 31, 0.45);
  --shadow-xl:   0 32px 80px rgba(3, 14, 31, 0.55);

  /* Accent glows (used sparingly for live / hero states) */
  --glow-gold:   0 0 0 1px rgba(212, 175, 55, 0.45), 0 8px 30px rgba(212, 175, 55, 0.22);
  --glow-blue:   0 0 0 1px rgba(33, 150, 243, 0.45), 0 8px 30px rgba(33, 150, 243, 0.28);
  --glow-live:   0 0 0 1px rgba(229, 52, 43, 0.55), 0 0 24px rgba(229, 52, 43, 0.35);

  /* Ring (crisp gold hairline used to frame broadcast cards) */
  --ring-gold:   inset 0 0 0 1px rgba(212, 175, 55, 0.55); /* @kind shadow */
  --ring-hair:   inset 0 0 0 1px rgba(255, 255, 255, 0.08); /* @kind shadow */

  /* ---- Glassmorphism (over video only) ---- */
  --glass-bg:     rgba(7, 26, 53, 0.55); /* @kind color */
  --glass-blur:   blur(18px) saturate(120%); /* @kind other */
  --glass-border: rgba(255, 255, 255, 0.12); /* @kind color */

  /* ---- Signature gradients ---- */
  /* Broadcast backdrop — deep navy vignette */
  --grad-stage:   radial-gradient(120% 90% at 50% 0%, #0C264A 0%, #071A35 45%, #030E1F 100%); /* @kind color */
  /* Gold bar / underline sweep */
  --grad-gold:    linear-gradient(90deg, #B8912A 0%, #D4AF37 45%, #E4C766 100%); /* @kind color */
  /* Electric action sweep */
  --grad-blue:    linear-gradient(90deg, #1478D4 0%, #2196F3 60%, #4FB0F8 100%); /* @kind color */
  /* Burgundy-to-navy hero wash */
  --grad-hero:    linear-gradient(135deg, #5A1023 0%, #2A1230 40%, #071A35 100%); /* @kind color */
  /* Bottom protection gradient for text over imagery */
  --grad-scrim:   linear-gradient(180deg, rgba(3,14,31,0) 0%, rgba(3,14,31,0.85) 78%, #030E1F 100%); /* @kind color */

  /* ---- Motion ---- */
  --ease-broadcast: cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   240ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */
}