/* ============================================================
   Trade Challenge — Spacing, radii, shadows, motion
   The product leans on generous glassy cards with glowing blue
   shadows, fully-rounded pills, and snappy (.2–.25s) transitions.
   ============================================================ */

:root {
  /* ---- Spacing scale (px) ----------------------------------- */
  --tc-space-1:  4px;
  --tc-space-2:  8px;
  --tc-space-3:  12px;
  --tc-space-4:  16px;
  --tc-space-5:  18px;   /* default grid gap   */
  --tc-space-6:  22px;   /* card padding       */
  --tc-space-8:  32px;
  --tc-space-10: 40px;
  --tc-space-13: 52px;   /* section padding-y  */

  /* ---- Layout ----------------------------------------------- */
  --tc-wrap-max:    1480px;  /* page container     */
  --tc-wrap-pad:    26px;
  --tc-nav-height:  74px;

  /* ---- Radii ------------------------------------------------ */
  --tc-radius-sm:   8px;    /* small chips / icon tiles */
  --tc-radius-md:   12px;   /* inputs, buttons          */
  --tc-radius-lg:   16px;   /* cards                    */
  --tc-radius-xl:   18px;   /* large cards              */
  --tc-radius-2xl:  22px;   /* auth card / modal        */
  --tc-radius-pill: 999px;  /* pills, tags, avatars     */

  /* ---- Shadows (glowing, blue-tinted) ----------------------- */
  --tc-shadow-card:    0 10px 30px rgba(0, 8, 26, 0.30);
  --tc-shadow-raised:  0 18px 50px rgba(40, 90, 220, 0.40);
  --tc-shadow-modal:   0 30px 80px rgba(0, 8, 40, 0.70), inset 0 1px 0 rgba(160, 200, 255, 0.10);
  --tc-shadow-btn:     0 4px 20px rgba(70, 90, 255, 0.50), inset 0 0 12px rgba(180, 200, 255, 0.25);
  --tc-shadow-btn-hi:  0 8px 26px rgba(90, 110, 255, 0.70);
  --tc-glow-cyan:      0 0 14px rgba(60, 140, 255, 0.30);
  --tc-glow-green:     0 0 8px var(--tc-green);
  --tc-inset-top:      inset 0 1px 0 rgba(150, 190, 255, 0.10);

  /* ---- Motion ----------------------------------------------- */
  --tc-ease:        cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --tc-ease-pop:    cubic-bezier(0.18, 0.9, 0.3, 1.1); /* @kind other */
  --tc-dur-fast:    0.15s; /* @kind other */
  --tc-dur:         0.25s; /* @kind other */
  --tc-dur-slow:    0.65s; /* @kind other */

  /* ---- Hover / press conventions ---------------------------- */
  --tc-lift:        translateY(-2px);   /* @kind other */
  --tc-lift-card:   translateY(-4px);   /* @kind other */
}