/* ============================================================
   VINCO SPORT — SPACING, RADII, SHADOW, MOTION, LAYOUT TOKENS
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base grid) ---- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   32px;
  --space-8:   40px;
  --space-9:   48px;
  --space-10:  64px;
  --space-11:  80px;
  --space-12:  96px;
  --space-13:  128px;

  /* ---- Radii — broadcast UI favours crisp, low rounding ---- */
  --radius-none: 0;
  --radius-xs:   3px;
  --radius-sm:   5px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  22px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---- Borders ---- */
  --border-width:      1px;
  --border-width-thick: 2px;
  --border-accent-bar: 3px;  /* the signature left/top red rule */

  /* ---- Shadows (tuned for dark surfaces; deep & soft) ---- */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm:  0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-md:  0 6px 18px rgba(0, 0, 0, 0.50);
  --shadow-lg:  0 14px 40px rgba(0, 0, 0, 0.55);
  --shadow-xl:  0 28px 70px rgba(0, 0, 0, 0.62);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* Accent glow — for live / hero CTAs */
  --glow-accent: 0 0 0 1px rgba(197, 57, 25, 0.5), 0 8px 30px rgba(197, 57, 25, 0.30);
  --glow-live:   0 0 0 1px rgba(255, 45, 32, 0.6), 0 0 22px rgba(255, 45, 32, 0.40);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);     /* @kind other */ /* decisive settle */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* @kind other */
  --ease-snap:   cubic-bezier(0.4, 0, 0.2, 1);      /* @kind other */

  --dur-instant: 80ms;   /* @kind other */
  --dur-fast:    140ms;  /* @kind other */
  --dur-base:    220ms;  /* @kind other */
  --dur-slow:    340ms;  /* @kind other */
  --dur-slower:  520ms;  /* @kind other */

  /* ---- Layout ---- */
  --container-sm:  640px;
  --container-md:  860px;
  --container-lg:  1120px;
  --container-xl:  1320px;
  --container-2xl: 1560px;

  --gutter:        24px;
  --header-height: 64px;
  --rail-width:    248px;

  /* ---- Z-index scale ---- */
  --z-base:     0;     /* @kind other */
  --z-raised:   10;    /* @kind other */
  --z-sticky:   100;   /* @kind other */
  --z-header:   200;   /* @kind other */
  --z-overlay:  900;   /* @kind other */
  --z-modal:    1000;  /* @kind other */
  --z-toast:    1100;  /* @kind other */
  --z-tooltip:  1200;  /* @kind other */
}